WordPress Child Themes Tutorial

WordPress Child Themes Cheat Sheet

WordPress Child Theme Cheat Sheet

1. Style.css

Create a folder for your child theme in the WordPress wp-content/themes folder. You can name it whatever you want.

In that folder create a style.css file

Paste this in  your newly created style.css file:

Edit the code above and remember to change the mantra value in Template: and @import with the name of the directory of the theme you’re creating the child theme for (this name is case sensitive!). Example for Twenty Twelve theme (‘twentytwelve‘).

Next you can start adding your own CSS styles in this file. Remember specificity and the importance of !important in your CSS declarations.

2. Activate your new child theme

You can now activate your child theme from the WordPress dashboard » Appearance » Themes.

3. Functions.php

Create a functions.php inside your child theme folder. Remember it needs to start and end with the PHP tags:

Now start adding your own code to the child theme!

4. WordPress pluggable functions

Pluggable functions are special because they allow you to override them, essentially adding new functionality into the built-in workings of WordPress. To recognize a pluggable function look for the existence check (function_exists()):

To override the parent theme’s make_header_red() function all you need to do is declare it in your child theme, with the exact same name:

Same function name, different code inside. Usually you copy the function from the parent theme (without the existence check) and paste in your child theme. Then you start editing the code inside to your liking.

5. Hooks, actions and filters

Hooks are triggers at specific points throughout WordPress that run all functions attached to them at that specific point. A simple example of attaching our function to an existing theme hook via the add_action() function:

The hook in this example is wp_head and we just attached our child_echo_hello() function to it. The actual trigger hook is situated in header.php in all WordPress themes. So with this code we output a string into the header but all that from the comfort of our child theme. No editing of header.php needed.

For unhooking an existing function from a hook and adding our own, you can use code similar to this:

So use remove_action() to remove the parent theme’s function, then add our newly created one via add_action().

The third step may seem a bit strange but since our child theme is loaded by WordPress before the parent theme, our actions must be run just after WordPress loads (we’re basically just telling WordPress to wait until the parent’s theme make_footer_red() function is hooked just so we can unhook it then).

Filters are very similar to actions and with filters you use remove_filter() and add_filter().

More detailed info on actions and filters. A complete list of WP core actions and one of WP core filters. Themes can have their own action and filter hooks. Look for them.

6. Scripts and styles

To add styles and scripts directly from your child theme use code similar to this:

Use wp_enqueue_script() and wp_enqueue_style() to add scripts/styles then with add_action() hook them into the wp_enqueue_scripts / wp_enqueue_styles hooks.

Also, two very important WordPress functions:

get_stylesheet_directory_uri() returns the directory for the current child theme.

get_template_directory_uri() returns the directory for the parent theme.

 

To remove existing scripts and styles you can use code similar to this:

Use wp_deregister_script() and wp_deregister_styles() to remove scripts/styles. These functions usually need just the handle (name)  as a parameter. Then using add_action(), hook your function to the wp_enqueue_scripts / wp_enqueue_styles hooks.

7. Overriding theme files

Remember, except for functions.php, most other files that you place in your child theme and have the same name as the ones in your parent theme, override them and WordPress will only use the ones in your child theme.

It’s a best practice to copy the file from the parent theme and paste it in your child theme, then start editing.

Download sample child theme

More Tutorials This article is part of our WordPress general and theme specific tutorials series. For more useful information check out our tutorials section.

32 Comments

  1. Hi guys, I’m working on a Parabola Theme. I can’t able to create a Theme Child. I followed the same routing in the other website i buidl but in the back office I see just a corrupted theme… I can’t explain why. Can you help, please?

  2. Hello,
    Thank you for this great tutorial!
    I am trying to make a child theme on Fluida basis. I need to replace the function fluida_setup() in /includes/setup.php which is hooked to ‘after_setup_theme’. Unfortunately the child function does not get called no matter where I hook it – I tried to init, after_setup_theme, setup_theme… Every time the parent function gets called.

    Here is the code:
    function fluida_setup_featured_imgs() {
    // my custom code goes here
    }

    function child_remove_theme_actions() {
    remove_action(‘after_setup_theme’,’fluida_setup’);
    add_action(‘after_setup_theme’, ‘fluida_setup_featured_imgs’);
    }

    add_action(‘setup_theme’, ‘child_remove_theme_actions’);

  3. Hello, I’m using Mantra theme and currently working for the child theme of it in order to keep my customization. I’ve been following this great tutorial for a while, but got stuck at “parent function removal’ thing and tried different ways in my whole day still haven’t figure it out. Hopefully you would like to help me out.
    For instance, I was trying to modify the display of breadcrumbs, the related function is mantra_breadcrumbs(). So I have done this as follow what you written in tutorial:

    function addon_mantra_breadcrumbs() {
    // My customization code here
    }

    function replace_mantra_breadcrumbs() {
    remove_action(‘cryout_before_content_hook’,’mantra_breadcrumbs’);
    add_action (‘cryout_before_content_hook’,’addon_mantra_breadcrumbs’,0);
    }

    if($mantra_breadcrumbs==”Enable”) add_action (‘init’,’replace_mantra_breadcrumbs’);

    I don’t know why the old function of breadcrumbs is still there…

    1. function addon_mantra_breadcrumbs() {
      // My customization code here
      }

      function addon_remove_mantra_functions() {
      remove_action ('cryout_before_content_hook','mantra_breadcrumbs',0);
      }
      if($mantra_breadcrumbs=="Enable") {
      add_action('init','addon_remove_mantra_functions');
      add_action('cryout_before_content_hook','addon_mantra_breadcrumbs',0);
      }

  4. The attitude of this tutorial is really weird. I don’t think that serial killer joke is very funny, what if I actually did have a long term history of alcohol and drug abuse? It’s not really something to laugh about. I have a lot of friends with serious alcohol and drug problems and a history of abusive families, it doesn’t make them serial killers..it makes them people with difficult problems they are trying to get through. The whole mood of this tutorial is kind of aggressive. I know it’s trying to be funny, but to me the humour is randomly dark and kind of weird. It’s good to have a modern, edgy copy on your website, which breaks the monotony of reading stock standard copy and has a sense of humour…but when it comes to directly insulting the reader, you’re going to lose interest from them. I stopped reading halfway through and just decided to change to a different theme.

  5. Is nirvana-theme able to handle a child-version? I use nirvana-theme and by doing like described in this tutorial, wordpress reports that the child-theme cannot be activated because the parent theme is missing. But both folders exist: “Make” & “Make-child” and the style.css in the child-folder is like explained above. What can i do?

  6. Hi, sorry would you kindly clarify then:

    If I make my changes in the Nirvana Settings and the Nirvan Custom CSS window…will I LOSE those changes if I update the Nirvana theme in the future???

    If I want to use a font OTHER than Google fonts or the supplied Nirvana fonts, will I need a CHILD THEME?

    and

    Am I able to install other plugins, for example, a Portfolio plugin that I like?? Will I need to have a Child Theme for that?

    I’ve used Child Themes many times with another theme company, where the Child Theme was INCLUDED with the core theme. I made CSS edits, etc. to the Child Theme, and occassonally, some php code (for Excerpts, for example).

    I’ve never used a theme where I had to CREATE a Child Theme, so I am a bit unclear on what happens to the core Nirvana theme changes that I would make under Nirvana Settings.

    thanks very much, great theme, and excellent Forum support!!

  7. Thank you for the info. If all your edits are made in the theme options panels, and the only edits above that are custom css in the custom css section of the theme options panel, is a child theme necessary?

    1. Hi Ryan,

      If theme settings and custom CSS are enough to make your changes then you don’t need a child theme. Only if you need heavier changes like editing actual code, creating new functions etc, then you’d need a child theme.

  8. Just started the tutorial, and got to the point where you recommend FileZilla. Not a bit fan of that program. It stores FTP credentials (site, user name, password) in a plain text file in the user’s folder. Easily accessible by anyone (or any hacker). Big security hole.

    I’d recommend WinSCP. Fully encrypted access, including a master password that you can set up. FileZilla works as an FTP client, but the plain-text user credential file is a big no-no for this computer security dweeb.

    If you want details on the security hole in FileZilla, I wrote about it two years ago here http://securitydawg.com/insecure-filezilla-ftp-program/ . I’ve stopped using it since then. They may have fixed it, but the developers didn’t think it was a problem two years ago, and weren’t going to fix it then.

  9. Is every Theme able to handle a child-version? Might be a silly question, but I bought the “make”-Theme from TheThemeFoundry and by doing like described in this tutorial, wordpress reports that the child-theme cannot be activated because the parent theme is missing. But both folders exist: “Make” & “Make-child” and the style.css in the child-folder is like explained above ….. hm??

    1. We don’t usually answer questions that are not related to our own creations, but themes need to be written to support child theme advanced functionality override. Otherwise, all you’re able to change via child themes is CSS and the standard page/section templates.
      Also, the parent theme name is case sensitive, so “make” and “Make” are two different parent themes.

  10. This is just what I have been needing to educate myself on, Thanks so much! I’ve been able to use theme options for most of the websites I’ve worked on but was really in need of a child theme for my current project and saw the Cryout updates on the Tempera theme options page – it’s like you knew I just needed this short tutorial to acquaint myself with child themes 🙂

    First time using the Tempera theme by the way and I love the adaptability – will definitely be using it again!

Leave a Comment