WordPress Child Themes

What is a child theme?

The WordPress codex defines a child theme really well.

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

For developers

If you develop on WordPress from the ground up then you probably have a lot of code you use in every site you develop. Take all of those styles, function, shortcodes, etc and bundle them up into a theme. Then just use a child theme for your next project and all of your default code is already there.

For premium theme users

Much like editing the WordPress core is bad practice, editing premium theme’s can also be bad practice. If you decide to make changes to a premium theme outside of what options may be available in the backend of WordPress (changing link color in the stylesheet for example) these may be overwritten if you update the theme. Some people will choose to just not update the theme, but this can be a security risk. Instead create a child theme and apply your changes there.

Creating a child theme

For the purpose of this post I will use the RealEstate Theme from templatic.com as an example parent theme. This example also assumes you are comfortable creating and editing WordPress files. Setup a new base WordPress install and copy the RealEstate Theme to the themes directory (usually wp-content/themes/).

To create a child theme make a new folder in the themes directory and name it RE_Child.

The only requirement for a child theme is a stylesheet (style.css). Enter your newly created directory and make a style.css stylesheet file and open it in your favorite editor/IDE.

At the top of your style.css file you need to create a comment naming your child theme. You will want to update the dummy fields below with your information.

[code language=”php”]
/*
Theme Name: RealEstate Child Theme
Theme URI: http://www.domain.com
Description: My first child theme!
Author: John Doe
Author URI: http://www.domain.com
Template: RealEstate
Version: 1.0

Comments/License
*/
[/code]

By default any files you create (with the exception of functions.php) will overwrite the parent themes equivalent. With that in mind the next line in your style.css file should be:

[code language=”php”]
@import url(../RealEstate/style.css);
[/code]

This will import the RealEstate stylesheet. Anything you put in your stylesheet will overwrite the parent theme’s styles. Want to change the menu font, link color, etc? No problem. You can now do it easily in your child theme without worry of being overwritten by an update to the parent theme.

At this point you have a working child theme which can be enabled in the WordPress admin menu. If you would like a screenshot to show up you can either copy the RealEstate screenshot to your child theme directory (wp-content/themes/RE_Child/) or create your own. The only requirement is that the image file be named screenshot and should be 300px by 250px.

If you want to modify any other part of the parent theme simply copy a file and paste the file into your child theme and then edit away. The only exception (as mentioned above) is functions.php. WordPress will load the parent theme’s functions.php file first, and the child theme’s functions.php second.

Getting your hands dirty

Customizing the child theme

See my post on Fearless Flyer to find out how to add a lightbox effect to the WordPress gallery via child theme.

I installed the default dummy content that came with the RealEstate theme. This theme is really rock-solid and I had a hard time finding something to want to change. When I viewed an agent’s profile on the site there is a phone number listed but no place to change it in the WordPress backend.

This is the perfect chance to customize our child theme. Having a peek at author.php file in the parent theme you can see that the phone number is displayed from the option “user_phone”. We won’t be editing this file but remember if you want to edit any template files make a copy and place it in the child theme directory before editing.

 

Functions.php

To add functions to a child theme you must create a functions.php file in the child theme directory. Remember that functions.php is the only file you create that will NOT override the parent theme’s copy of the file. WordPress will load the child theme’s functions.php first and the parent theme’s functions.php second.

Adding phone to user screen in the backend

Open your child theme’s functions.php file and place this code inside of it.

[code language=”php”]
<?php
function user_phone( $userFields ) {
// define the user_phone field with a label of Phone
$userFields[‘user_phone’] = ‘Phone’;
// return the updated userFields variable
return $userFields;
} //end user_phone function

// hook the user_phone function into user_contactmethods with a filter
add_filter(‘user_contactmethods’,’user_phone’,10,1);
?>
[/code]

Now if you view the profile screen for a user you will see a field for phone under contact info.

 

If you want to call the user_phone field in the loop you do so like this

[code language=”php”]
<?php echo get_the_author_meta( ‘user_phone’ ); ?>
[/code]

If outside the loop you must specify the ID of the user

[code language=”php”]
<?php echo get_user_meta($userID,’user_phone’ ,true); ?>
[/code]

Conclusion

Creating a child theme can have many applications and allows you to keep changes to a premium theme or self-made framework separated allowing for updates to the parent theme without losing any changes you have made. Child themes can also allow for experimenting with different changes and not risk permanently damaging the parent theme.