How to Tweak Your Site Without Breaking It

Custom CSS & An Intro to Child Themes

Lisa Yoder / @_lisli

(One of) The Coolest Thing(s) About Websites?

They're just a bunch of text files. I wish someone had told me this years ago.

Parts of a WordPress Site

  • HTML
  • CSS
  • PHP
  • MySQL
  • WTF? (JK)

Don't be alarmed! We're only going to be talking about HTML & CSS.

HTML & CSS

HTML is how content is organized, and CSS is how content is styled.

We can see (and experiment with!) the HTML & CSS of any website using the inspector. Let's take a look.

Ok, that's great...

But how do you actually make changes? Just edit the files in the Dashboard?

NO.

That's a really efficient way to break a Wordpress site.

So instead...

Custom CSS

Custom CSS plugins are good for small tweaks, such as changing a color or removing a border.

Let's try making a change using the inspector and writing some custom CSS!

Feel free to get adventurous — you won't break anything, at least not permanently!

Custom CSS is cool, but what about substantive changes?

Child theming is where it's at. A child theme is built on top of a parent theme. The child extends the parent, but will overwrite it.

This is really great because you'll still benefit from theme updates to the parent while keeping any changes you make with the child.

Let's make a child theme

You guessed it — there's a plugin for this, too. But let's look at how it's set up.

Where do the themes live?

wordpress-folder > wp-content > themes

How do I start?

Make a new folder, for example "twentytwelve-child", and then make a new file called "style.css

Then paste in this:


/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
					
*Taken shamelessly from the Codex. That's what it's there for.

That's all you need.

And then?

Write CSS until your heart's content. You can't permanently break anything with a child theme.

That's the beauty!

Want to learn more?

Questions? Comments? Thoughts?

Let's chat.

@_lisli | lisa@tinyfireworks.com