In your past WordPressings, we’re sure you’ve found some themes that you really like, but there are a few things that were bugging you about it. The better supported themes will offer you options to tweak a few things, but you’ll never have the level of control that you really need.

Luckily, WP is all about being open and customizable. Any theme can be built upon and tweaked to your heart’s content.


What is a Child Theme?

Let’s say you you are using the Twenty Twelve theme. You love it’s simple, minimalist design. However, you think the font it uses for it’s headings is dumb and want to change it. You paid attention in Intro to Web Design and know that you can alter the style.css file in order to make what changes you want.

So you open up Cyberduck and open a connection to your server/ open up the File Manager through CPanel, navigate to wp-content/themes/twentytwelve/style.css and open it. You then see that there are about 1800 lines of code in it and say to yourself, “I’m not even gonna mess with this” because who needs that kind of confusion?

You were right to turn back. Altering the files within a theme is a bad idea. Here’s a few reasons why:

  • Any changes you make will be lost when the theme updates. Good themes are maintained and updated by their developers
  • You risk causing serious damage to the theme and end up having to reinstall it
  • When you’re dealing with hundreds and thousands of lines of CSS, it get’s very difficult to keep track of what you’ve changed.

This is where child themes come in. A child theme is a theme that you create which inherits all the style and functionality of its parent. You are then able to safely alter the style, add template files, and functions. In other words, you make a copy of a theme that you can easily make changes to.

Video Explanation:

How to Make a Child Theme

This Codex page details what a child theme is and how to make one. Read this before using the guide written here.

Let’s work through how to make your own child theme. We’re going to make one for the Twenty Twelve theme.

Making a child theme can be thought of as three steps:

  1. Creating a new directory/folder in your WP instances’s wp-content/themes folder
  2. Inside your child theme directory, create a style.css file to house all of your new style rules
  3. Inside your child theme directory, create a functions.php file to load everything from the original theme and then load our new style.css styles over that.

Below is a text walk through sectioned according to these three steps. We will be using the CPanel File Manager to do this (you can also use FTP).

Step 1: Create Child Theme Directory

We are going to make a child theme for Twenty Twelve WordPress theme. You should have it installed already, if not, install it now. Next, login to CPanel and go to the File Manager.

  1. Find the directory where your WordPress instance is installed. For me, its in the lesson3 folder.

    cthemes_1

  2. Go into this folder. There is a directory called wp-content. Go into that folder.

    cthemes_2

  3. Inside wp-content, there is a directory called themes. As it is named, this folder contains the themes installed on this WordPress instance. Go into this folder.

    cthemes_3

  4. Here, we can see all the themes installed on this WordPress instance.

    cthemes_4

  5. We want to make a child theme based off of the Twenty Twelve theme. Notice that the directory for the Twenty Twelve theme is twentytwelve.
  6. To create a child theme, we need to create a new directory that will house the child theme’s files. Create a new directory in the themes directory called twentytwelve-child. At the top of the File Manager, use the New Folder tool.

    cthemes_5

  7. To make it easy to find our child theme, name it twentytwelve-child. The -child differentiates it from the original theme. Make sure the end of the filepath is themes, meaning the new folder will be placed in the themes folder. Hit Create New Folder.

    cthemes_6

  8. If the folder didn’t automatically show up, hit the refresh button right above all of the folders. If you did everything correctly, you should see your new folder.

    cthemes_7

  9. If you see the new folder you created, you can move onto the next step.

Step 2: Create new style.css

Next, we are going to create a style.css file to house all of the CSS changes we want to make to the original WordPress theme.

Part 1

  1. Go into your new child theme folder.
  2. It should be empty. To create a new file with File Manager, use the New File tool at the top.

    cthemes_8

  3. Name the new file, style.css. Do not forget to include the .css. Hit Create New File.

    cthemes_9

  4. If everything worked, we should see the style.css appear in the child theme folder.

    cthemes_10

Part 2

We need to fill in the style.css file with some prerequisite information.

  1. Go to the WordPress Codex page on Child themes here.
  2. Copy and paste the following code from the Codex page into your style.css file. You can open your style.css file in File Manager by highlighting the style.css file and then using the Code Editor tool at the top. When the popup appears, just hit Edit.

    cthemes_11

  3. You should have this in code in your style.css file. The two important lines we need to change are Theme name and Template.

    cthemes_12

  4. Change Theme Name to what you want your child theme named (it will be displayed in the theme manager). Change the value of Template to the name of the folder for the original theme, in our case, it was twentytwelve.

    cthemes_13

  5. The CSS style rule changes you make will be placed after this big comment block.
  6. Make sure to hit Save before exiting.

You can now move to Step 3.

Step 3: Create new functions.php

Login into the backend of your WordPress instance. Go to Themes. If everything worked so far, you should see your child theme appear in the Theme Manager.

cthemes_14

Activate your child theme. What do you see? Hmmm, it seems that our website is still running, but it’s as if all of the styling dropped out. Why?

cthemes_15

Well, we created the child theme directory inside the theme folder. We put in our style.css file and changed the Template value to the original theme’s folder name. This was suppose to tell WordPress what theme’s style we are basing our child theme off of. Why didn’t this work?

In the past, below the comment in our style.css file, we would use an import statement to tell WordPress the location of the style sheet of the original theme. Now, there is a new best practice we will go over in this section.

We need to tell WordPress what styling to import and use. Then, we can make changes to those styles in our new style.css instead of sifting through a 1000+ lines in the original theme. This is the Cascading nature of CSS.

We do this with functions.php. Let’s get started.

  1. Back in File Manager, inside your child theme folder (the same folder as our style.css file), create a new file called functions.php. Do not forget the .php.

    cthemes_16

  2. Open this functions.php with the Code Editor tool.
  3. In a new tab, go back to the WordPress Codex page on Child themes here.
  4. Copy and paste this code into the functions.php file. There are two PHP code snippets, use the second one.

    cthemes_17

  5. We aren’t done yet with the PHP code we just pasted. We need to use an opening PHP tag (<?php) to start this file with. On a line before the code you just pasted (for me I’ll put it on the first line in the file), put <?php. There is not a closing angle bracket on an opening php tag.

    cthemes_18

  6. Hit Save before exiting the file.
  7. Refresh your WordPress instance. If everything worked, the correct styling should be applied.

Step 3a: Add a Theme Image

You don’t have to do this, but it will make it look nice. This creates a preview image for your theme manager. Just take any image file and title it “screenshot.png” and put it in the child directory

Note about functions.php

We copy and pasted PHP code without necassarily knowing what it exactly did. We do not expect or require you to learn PHP (you can if you want in your free time).

A basic explanation of what the PHP does is: the first thing the code does is finds the main stylesheet the parent/original theme is using (you can see it where it says parent-style.) Next, it finds the stylesheet in our child theme. It then loads them in the order: parent, then child.

cthemes_19

Important note: Notice how the PHP code uses the name style.css for both stylesheets (Arrows pointing both). If the stylesheet in either the parent theme or the child theme was named differently, we would need to change the file names in this PHP code in functions.php accordingly

Note about Template Files

In the next lesson, we will be learning about some of the PHP template files WordPress uses to build our websites. When we begin editing template files, we will make a copy of the template file we want to edit and add it to our child theme directory. We do not need to update our functions.php file to account for this and the copied template file will be use automatically.

How Do People Use Child Themes?

Lot’s of people use child themes as a jumping off point for their own theme or as a learning tool. Twenty Twelve is really nice to learn from and improve upon. Check out this gallery comparing several different Twenty Twelve Children.

We have already watched this video, but it is a good example of how to use developer tools and start making changes with your child theme:


Text Walk Through

Step 1: Identify An Element

I want to change the way the menu looks in the Twenty Twelve Theme. Specifically, I want to make the menu items centered instead of left-aligned.

Open up Firebug and click the select tool. Then select the menu area. Look to make sure that you’ve got the right thing selected by looking at the HTML. The class on that unordered list (remember that we used unordered lists to make the nave menus?) is “nav-menu” so this is probably the thing we want to alter

Step 2: Mess with the CSS

Here is where you get to play around. On the right hand side of the Firebug pane, you’ll see the style tab. This will tell you all the style rules affecting the element that you have selected. Double click on values to change them. Since we wanted to make the menu aligned in the center, let’s alter the “text-align” property to “center”. Don’t worry about all the other stuff.

You’ll notice that it the change takes effect immediately on the page so you know what you did worked.

Step 3: Copy Pasta

Now all you have to do is copy the rule you just made and paste it into your child theme’s style sheet.

Select it all. You’ll copy the right part, don’t worry

Step 4: Paste Into Your Stylesheet

Simple enough.

This will work perfectly fine and do everything you need it to, but do you really need everything else?

Step 5: Get Rid of Superfluous Code

Child themes inherit everything from their parents so you only employ your child theme when you’re changing something. That means that all we wanted to do was change the text alignment so that’s all we have to have on there.

Step 6: You’re Done!

Hooray! You wanted to get the menu items in the middle and that’s what we did!

Google Web Fonts

Browsers only recognize a small amount of fonts so we must go outside for solutions. Google Web fonts is an open source repository of fonts that anyone can access. Let’s use Google Web Fonts to put a new font on our site title.

Text Walk Through:

Step 1: Go to the Web Fonts Homepage

You can find it at google.com/fonts

Step 2: Choose the One You Want

On the bottom right of each pane, there is a button that says “quick use”. Click it.

Step 3: Choose the Addition Method

On step 3 you are asked how you want to add the code to your website. Choose the ‘@import’ option. This is much like the way that we made our style sheets import the parent theme styles.

Open up your style sheet and paste it in below where you imported the Twenty Twelve style sheet. I like to add a little note to show that this is the place to put font imports.

Step 4: You Now Have That Font

The font is now able to be called upon. Copy the CSS from the Web Font page so you don’t forget it.

 

A Cautionary Note

Don’t go overboard with Web Fonts. Every time you add one, you’re making your blog make an external request to Google. This slows down page loads slightly. A few font’s won’t hurt but put in a lot and you’ll see a slow down.

If you’re going to use special fonts, then it’s a good idea to limit it to two or three. Heading and body text, and maybe a special font for your site title

Homework Assignment

You will be putting that shiny new child theme to good use. Whenever you change the color of anything, you must use a hex color code. Use ColorPicker.com for hex codes or get the ColorZilla Chrome and Firefox extension. Whenever you must use a different font, use a web safe font or import a Google web font. Please make the following changes to your site.

Part I: Revealing The Container Structure

Reveal the container structure of your WordPress site, yourdomain/wordpresspart2, by color coding it. This will help you better understand that a page is made up of several <div>s all nested within each other.

If your haven’t already, create a child theme for the Twenty Twelve theme installed on your WordPress instance at yourdomain/wordpresspart2.

Add the following rules to all the major page containers

#selector {
 padding: 10px;
 border-radius: 25px;
 border: 1px dotted black;
 background-color: #??????;
}

Where #?????? is a hex color. We suggest you use soft colors so that you can see the contrast while still being able to make sense of the site. Bright colors are straining to look at so please bear in mind that your lab instructors have to look at a lot of these…

Add these rules to the following divs:

  • body
  • #page
  • #masthead
  • #site-navigation
  • #main
  • #primary
  • #content
  • .post
  • #secondary
  • #colophon

Part II: Styling the Content

Next, we are going to put our child theme’s stylesheet to use. Use your knowledge of developer tools to help you. Add the following CSS changes to the style.css file in your child theme that you just created at yourdomain/wordpresspart2:

Change the font and color of

  • The site title
  • The site description
  • Page titles
  • The menu items

Paragraphs: Change the font of all paragraphs appearing in the post or page content

Change the spacing of the menu items.

Submitting

Once you’ve completed all the parts, download a copy of your child theme’s stylesheet.

Email wordpress@labs.everettprogram.org with :

  • The email subject line in the following format: HW#3 Firstname Lastname
  • The web address of your WordPress instance
  • A copy of your child theme’s stylesheet attached to the email