Vancouver Custom WordPress Development

Mon Cahier Child Theme

September 22, 2012

I’m extremely happy with the feedback I’ve received so far on Mon Cahier, but there have been a few questions about how to change a few things. I thought I would put together a short tutorial on how you can do this by making a child theme.

First thing you’ll need to do is make a new folder. You can call your folder anything you want, but it cannot be the same name as the parent theme and it shouldn’t contain any spaces. I’m going to use mon-cahier-child as my folder name. (You can grab a copy of my child theme if you want.)

Your child theme must have a style.css and it must contain the Theme Name, Template and import the parent stylesheet. The Author, Version and Description are optional, so you can leave those out if you want.

Once you have your child theme set up, upload it to your theme directory via FTP, navigate to Themes in your admin, and activate it. Your website shouldn’t look any different yet. We need to make more changes first.

Let’s say you wanted to change the body font-family to Helvetica instead of Georgia and the headings to Georgia instead of Cutive.

Looking at the parent theme you’ll find, on line #69, the style for the body copy and the headings on line 85. Adding the following lines of code to the style.css of our child theme will give you the result you’re looking for:

There you have it. With just a few lines of code, we managed to change our fonts. You could go a step further now and change the sizes, widths of the various columns, etc…

But what if you wanted to make bigger changes like change the title of the archives? That’s possible too, but needs a bit more effort digging through the code.

Right now, if you navigate to a category, you’ll notice that the heading of the category, displays, “Category Archives: name of category”. To change this, make a copy the archive.php template from the parent and insert it in your child theme.

Open your copy of archive.php in your text editor and look for the words “Category Archives”. You’ll find these on line #22 which looks like this:

Removing the sidebar from pages is done in a similar fashion. Make a copy of page.php and insert it in your child theme. Once opened in your text editor, you’ll find on line 30. Just delete that line of code and that will remove the sidebar from all pages.

The hardest thing about making a child theme is finding which file does what and what code to remove or edit. But once you’ve started poking around, you’ll get the hang of it and the best part is that by mucking about with the child theme, your not touching the parent, so you always have a backup. You could of course, just change the parent, but then if there’s a theme update, you will loose all of your changes, so it’s best to always make a child theme.

To learn more about child theming, have a look at the Codex. At the bottom of this page, you’ll find a few links to other resources, one of which is the excellent tutorial by Siobhan McKeown which shows you how to use Firebug to make a child theme.