WordPress Child Themes Tutorial

WordPress Tutorials

3. The functions.php file – and the power is yours

Although a style.css file is enough to have a child theme, you usually want to change more than just a few styling settings. You may want to add a few functions or modify some existing ones. That’s where the functions.php file comes into play.

Still inside your child theme’s main folder, right next to style.css create a functions.php file. Files with the .php extension are text files as well so you can use  Notepad++ to edit them. Unlike style.css, the child theme’s functions.php doesn’t replace the parent theme’s functions.php. It adds to it.

So in the newly created functions.php you can now add the pieces of code that you want to, without losing them on the next theme update. They will always be there. Just remember that the file must always begin and end with PHP tags:

<?php

// Your whole code here

?>

So, you can add new code or new functions to further enhance your WordPress theme. But what if you want to edit some existing functions from the parent theme, or maybe remove them altogether. You’ll have to check out the parent theme’s functions.php file and see what functions are pluggable and what functions are loaded via actions or filters.

Before getting knee deep into PHP code, here’s a quick tip on comments.

// This is a single line comment

/* And this is a 
multi-line comment */

Comments are not executed by PHP and you can use them to write instructions about your code, either for yourself (to remember what you were trying to do) or for others that may read your code later on. Here’s a more complex example:

/* Function for outputting my name on the screen
   For use inside my mantra child theme
   This is a mutli-line comment */

function child_mynameis($name) {
  // Using the $name variable for a custom name - single line comment 
  echo 'My name is'.$name;
} // end of child_mynameis() function - single line comment

And with comments out of the way we can move on.

3a. What’s a pluggable function?

A WordPress pluggable function is a function that when declared has an existence check. It looks something like this:

/* PARENT THEME FUNCTIONS.PHP */

if ( ! function_exists( 'make_header_red' ) ) {
  function make_header_red() {
    // Code for making the header red
  }
}

Notice the function_exists() function? That means that the function make_header_red() is pluggable. You see, the cool thing about WordPress is that is loads your child theme’s functions.php before the parent theme’s functions.php. This means that if you declare a function with the same name in your child theme, it will be used instead. So you could copy that function from the parent theme and change it according to your needs. Like this:

/* CHILD THEME FUNCTIONS.PHP */

function make_header_red() {
  // Change code to make the header GREEN
}

This way you won’t have to edit the parent theme files where the function make_header_red() is called. If, for example, this function was called in header.php you wouldn’t have to edit that the file at all. You just changed what that function does right from within your child theme.

3b. What are actions and filters?

Another way functions may be loaded in the parent theme is something similar to this:

/* PARENT THEME FUNCTIONS.PHP */

function make_footer_red() {
  // code to make the footer red
}

add_action('wp_footer','make_footer_red')

The function is declared without the function_exists() check here but the interesting part is how it’s being loaded into WordPress. It’s being loaded via the add_action() function. The first parameter ‘wp_footer’ is a hook and it tells WordPress where the function should be loaded. There’s a huge list of hooks in WordPress, and themes can add their own (and they usually do). But that shouldn’t really interest you because you’ll be using the same hooks. The second parameter is the function to be loaded and in our case it’s make_footer_red().

So in our example the make_footer_red() function is added as an action to the wp_footer hook. What does this mean exactly? Well, for this to make perfect sense you need to fully understand what WordPress hooks are, but the main idea is that they’re triggers at specific points throughout WordPress that run all functions attached to them at that specific point. For example all WordPress themes must have a wp_head hook in their header.php file and a wp_footer hook in their footer.php file.

So instead of modifying footer.php to insert a function and make the footer red, we can do that from our child theme’s functions.php file by using the wp_hook with the help of the add_action() function.

With that out of the way, now back in our child theme, what we have to do to change the footer from red to blue is very simple. Remove the existing function from the hook and add our own to the same hook:

/* CHILD THEME FUNCTIONS.PHP */

// 1. Our function for making the footer blue
function child_make_footer_blue() {
  // Code to make footer blue 
}

// 2. A new function for removing the old function that made the footer red
// and adding our own
function child_remove_theme_actions() {
  // remove old function from the 'wp_footer' hook
  remove_action('wp_footer','make_footer_red');
  // add our own function to the 'wp_footer' hook
  add_action('wp_footer','child_make_footer_blue');
}

// 3. Using the 'init' action hook to apply our new function
add_action('init','child_remove_theme_actions');

Not that much to it really. You declare your new function, with a different name this time, 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).

Again, we changed how the parent theme behaves without altering it. Everything is done from within our child theme’s functions.php.

Of course, there will be situations when you won’t need to remove the original function at all, and you’ll just add another one to that same hook. In that case you won’t use remove_action(). Here’s an example of simply adding a function via hooks.

/* CHILD THEME FUNCTIONS.PHP */

// 1. Our function for saying hello
function child_echo_hello() {
  echo 'Hello world, this is Jimmy saying hello. Hello!'; 
}

// 2. Hooking our function to the wp_head hook
add_action('wp_head','child_echo_hello');

It’s that simple. No more remove_action() cause there are no actions to remove, thus no more ‘init’ hook either.

You’ll find more on WordPress actions in the Codex. For a complete list of all the hooks in WordPress you’ll have to check the Codex as well.

Filters are very similar to actions in WordPress and you can use add_filter() and remove_filter()  in a similar way. You’ll find more detailed info about filters in the WordPress Codex.

Remember, check your parent theme for functions, actions and filters that you want to remove or edit. You don’t have to do anything from scratch. See the function that’s either pluggable or loaded via a hook or a filter, copy – paste it in your child theme, edit it to your needs (changing its name if it’s loaded via a hook or filter), remove the old function from the hook or filter and add your newly created one.

Previous Page   Next Page
Pages: 1 2 3 4 5
More Tutorials This article is part of our WordPress general and theme specific tutorials series. For more useful information check out our tutorials section.

38 Comments

  1. Thank you for helping people start in going deeper, I have several of the Cryout Themes and have been very happy with them. I’m having a little trouble.

    I’ve added the folder and css file. I am able to activate the child them
    When I go to my website I see the website but it is distorted, the Main menu seems to be distorted but the presentation page below this is OK.

    This is the code for the style.css

    Theme Name: My WordPress child theme
    Theme URI: http://domain.com
    Description: This is a child theme for the Parabola theme.
    Author: Bob
    Author URI: http://domain.com/me/
    Template: parabola
    Version: 1.0
    */
    @import url(“../parabola/style.css”);

    I suspect the problem is because I am using Parabola-nolink and it’s a “Child Theme”
    so if you are using a “no-link” theme how does that affect things?

    Should the name in the templete reflect that name and be:

    Template: parabola-nolink

    Thank you

    I would add an image of how the wordpress install is distorted but don’t see an option to add images

  2. Hello! If I’m using the Codex theme, which is already a child theme of Rosetta, do I still need to make a child theme of Codex? Or will my customizations within Codex remain even when an update is made to the Rosetta parent theme?

    Here’s another question/anotherway of asking it…

    Will there be regular updates made to the Codex theme itself that I’ll need to maintain? Or will there only be updates made to the Rosetta theme (so I’m safe)?

    Thanks!

    1. Codex is a child theme, you will be able to update its parent Roseta theme safely. However if we ever release an update for Codex itself that would overwrite any file changes you have applied to the child theme. Unfortunately there is no easy way around this as there is no direct support for grandchild themes in WordPress.

    1. We’ll have to update the child themes tutorial (mostly the enqueues and style loading part) for newer standards and include actual child themes examples for all our themes. Hopefully we’ll find the time to do this soon.

  5. 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?

  6. 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’);

  7. 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);
      }

  10. 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.

  12. 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?

  15. 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!!

  16. 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.

  18. 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.

  19. 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.

  23. 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!

This article is closed to new comments.