WordPress Child Themes

Posted by on Oct 12, 2012 in Blog, Tutorials | 3 Comments

So what really is a child theme? Nothing beats the clear and solid definition created by the WordPress website which states

“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to change, or add to, the functionality of that parent theme.”

In this post, i will talk about m experiences with working with child themes and how to set them up on your own WordPress website!


If you would like to skip the backstory and jump straight to what i have learned about child themes and how to set them up, click here!

The Backstory:

I havent really updated my blog too much lately (which is a shame since i really need to get my stuff together when it comes to blogging consistently!). Other than being sick, this thanksgiving weekend i went back to my parents place for the weekend and had some yummy Indian all you can eat food in Brampton. During this time uptown, i had a secondary task (Primary was to fill myself with delicious foods!) which was to give my mom an updated website.

She has had a Tumblr for quite sometime but quickly realized some downfalls of the free service (not being able to re-arrange the posts, no easy way to display her images as a set and just not being a professional portfolio website were some of the downfalls). So i decided to do a weekend revamp of her website!

The Other Technicalities:

  • I ended up getting the domain name from Namecheap since my other domain names were already together with this service. I havent had any issues with them and find their website straightforward and easy to use.
  • WordPress is the name, themes are the game! I am mostly familiar with WordPress and theme editing so that’s the route i would be taking for this weekend task.
  • Hosting would be through my own account on Hostgator, since i have their unlimited hosting account, all i really needed to do was to buy the domain name.

The process in a nutshell would go something like the following. First to buy the domain, then redirect  the DNS values to Hostgator. This would take a couple of hours for the redirect, after it is redirected, log into the cpanel and install the WordPress platform through Fantastico De Luxe. Below is a screenshot of the end version of her website. Check out her website up close and personal here!


The Child Theme: 

So what a child theme does is to build on top of a pre-existing theme. Some things to take note of when working with a child theme are

  • When updates to the base theme occurs, your child theme will still be in effect (if you did your changes on the base theme, when you update it, all the changes you had done would disappear!)
  • It creates a clean slate to work with. Unless you coded the theme, one problem i found is that i can never find what im looking for! Editing someone elses code is quite the hassle!
  • One can organize multiple child themes easily, therefore make many iterations of the same base template.
  • You cannot have a child theme on top of a child theme
  • When adding CSS code to the child theme, it fully OVERRIDES the parent themes code equivalent code. When creating a new file like the functions.php, it ADDS the code to the parent themes function.php

Setting up a child theme: 

If time is of the essence, many popular themes already have child themes readily downloadable, so do a quick google search to see if there are any child themes for the template you are using. Here is a 5min step by step guide that will allow you to create a child theme from scratch.

  1. Firstly, make sure you have a text editing software. There are multiple free ones that can be found online like Textwrangler (Mac) or Notepad++ (Win)
  2. Find out the name of your parent theme (one way of doing this is to log into your WordPress dashboard, go to Appearance –> Themes. Then click on the theme you want to use as a template. Now look at the URL and copy the last part of it, specifying the theme name. The red box shows what you should be copying down.
  3. Open up your text editor, and copy in the following:
    /*
    Theme Name: ONE
    Template: TWO
    */
    /* Imports the base theme style sheet */
    @import url(‘../THREE/style.css’);
    /* Add your CSS changes below the line to override the base template CSS
    ————————————————————– */
  4. Change ONE to the name of your child theme (could be anything)
  5. Change TWO to the theme name you acquired in step 2
  6. Change THREE to the folder name that the base template is in. Most of the time, it’s the same as the theme name. However one way to find the folder name is to go to the WordPress dashboard –> Appearance –> Themes. Now find the theme you want to use as the base and click “Details”. The red box represents the folder name of the base theme.
  7. Now save the file as style.css
  8. Place the style.css into a folder (the folder can be named whatever you want)
  9. Compress the folder into a .zip file (for Mac, right-click on the folder and select compress “folder name”. For Windows, right-click on the folder, select send to then select compressed “zipped” folder)
  10. Now all you need is to log into your WordPress dashboard again, go to the “themes” area –> “Install Themes”. Then select “upload”
  11. Choose the zipped folder you created, upload and activate it.
  12. There you have it, your child theme is activated and ready for you to edit!

Conclusion:

Child themes are certainly the best way to edit themes. It is easy to keep track of your own changes and allows you to keep the integrity of the base template. They are easy to use and a must-learn skill for any WordPress theme modifier. To learn more about the specifics of how a child theme works, i highly recommend reading the page they have on WordPress.com about Child Themes. If you have any questions, don’t be shy, shoot me a comment!

3 Comments

  1. Rudi
    22 Oct ’12

    thank you for the guides.

    Reply
  2. Ribice
    14 Oct ’12

    Great guide, would love to give it a try and design a child theme for Standard. Thanks!

    Reply
    • Paul
      14 Oct ’12

      Im glad you liked the post, you have quite the sweet website also! On a side note, VS support FTW xD

Leave a Reply