How to Create a Child Theme

By Laurie M. Rauch

Use your keyboard's left and right arrow keys to navigate through the slides

about:me

codediva.com
lauriemrauch.com
@lauriemrauch
WordCamp Hamilton 2013

What is a child theme?

A theme that is dependent on a parent theme to work, but allows you to build on that theme's code to customize its design and functionality.

With a child theme, you can change this...

Graph Paper Press's Instamate Theme

To this...

Add a Little Pretty

And from this...

Themify's Elemin Theme

To this...

Jimmy Danko

And from this...

Graph Paper Press's Modularity Theme

To this...

Heidi Baker

JumpingSunshineStudio.com

PrinciplePictures.com

Why use a child theme?

Use another theme's code and functionality to create your own look and feel.
Customize a theme without breaking anything.
Keeps your customizations separate.
Update the parent theme without losing any of your customizations.

How do you use a child theme?

Include only the files you want to change in the theme folder
Ensure the parent theme lives in your wp-content/themes folder
Activate the child theme

Where do you find a parent theme?

WordPress Theme Repository
Premium Theme or Framework
Google "Free WordPress themes"
... not a good idea

What to look for in a parent theme

Well-written, semantic code
Lots of widget areas
Tons of flexibility
Extra functionality
It's not already a child theme - you cannot make a child theme of a child theme

How do you know if it's a good theme?

Test the theme's demo - click all the links, check out how things work.
Read reviews
See what people are saying
Ask for recommendations

How it works

How do I edit my code?

Built-in text editor:
- Notepad (Windows)
- TextEdit (Mac)
HTML Editor:
- Dreamweaver
- Coda
- SublimeText
- Notepad++
- TextWrangler
- ...to name a few

How do I test my theme?

Install WordPress to your computer using MAMP, LAMP, WINLAMP, WAMPSERVER, etc.
Instant WP
Test site on your server
Live site

Getting Started

Step 1

Create a style.css file and save it to your child theme folder.

In your style.css file, add this code to the top of the page:

/*
Theme Name: WordCamp Hamilton Child Theme
Theme URI: http://www.wordcamphamilton.com
Description: Custom child theme for Twenty Twelve
Author: Code Diva
Author URI: http://www.codediva.com
Version: 1.0
*/

Step 2

Add code to reference the parent theme template. Use the same spelling/phrasing as the parent theme's folder name.

/*
Theme Name: WordCamp Hamilton Child Theme
Theme URI: http://www.wordcamphamilton.com
Description: Custom child theme for Twenty Twelve
Author: Code Diva
Author URI: http://www.codediva.com
Version: 1.0
Template: twentytwelve
*/

Step 3

Import the parent theme's style.css file.

/*
Theme Name: WordCamp Hamilton Child Theme
Theme URI: http://www.wordcamphamilton.com
Description: Custom child theme for Twenty Twelve
Author: Code Diva
Author URI: http://www.codediva.com
Version: 1.0
Template: twentytwelve
*/

@import url(../twentytwelve/style.css);

Step 4

Add a screenshot.png file to your child theme folder.

Step 5

Upload your child theme and the parent theme to wp-content/themes

Step 6

Activate your new theme in Appearance > Themes

Congratulations! You just built your first child theme.

Start adding your changes

Add a little pretty...

Start adding new styles to your style.css to start changing the look of your theme.

Get help with learning CSS:

For example...

/* add a new colour to the site's background */
body{background-color:#333;}
	
/* change the link colours */
a{color:#E82B94;}
a:hover{color:#000;}
	
/* move the sidebar to the left side of the page */
.site-content {float:right;}
.widget-area {float:left;}

Functionality changes get made in functions.php

Create a new file: functions.php

Functions written in this file will be added to the theme

Do not duplicate the parent theme's functions.php or you will get errors. This is the only file we create new to instead of duplicating.

Add your new functions to this file.

For example...

Register a new sidebar
Register a new menu
Register a new image size
The sky's the limit...

The exception

If the parent theme set up a function with this conditional:

if ( ! function_exists( 'function_name' ) ):

You can create a new function with the same name that will replace the existing function.

	<?php // change the wording of the Next/Previous navigation links

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
 * Displays navigation to next/previous pages when applicable.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_content_nav( $nav_id ) {
	global $wp_query;

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $nav_id; ?>" class="navigation" role="navigation">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
			<div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Go Back in Time', 'twentytwelve' ) ); ?></div>
			<div class="nav-next alignright"><?php previous_posts_link( __( 'See What&apos;s New <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
		</nav><!-- #<?php echo $nav_id; ?> .navigation -->
	<?php endif;
}
endif; ?>

If you want to change an existing function...

Create a new function that firsts takes away the existing action or filter, and then adds your new action or filter.

function wpham_excerpt_length( $length ) {
	remove_filter( 'excerpt_length', 'parent_excerpt_length', 999 );
	return 25;
}
add_filter( 'excerpt_length', 'wpham_excerpt_length', 999 );

Change the parent theme's page templates to change what appears on the page

Save the parent theme file to your child theme folder.
Maintain the same file name so WordPress knows to read that file instead of the original.
Add your changes.

Add a new page template

You can create as many page templates as you like. These will appear in the list on your Page edit page.

Add the Template Name
```
<?php
/* Template Name: Links */
?>
			
```
Add your header call
```
<?php get_header(); ?>
```
Add your footer call
```
<?php get_footer(); ?>
```
Add your new content

<?php
/*
	Template Name: Links
*/

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main" class="links-page">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php wp_list_bookmarks('title_li=&category_before=&category_after='); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Add more cool stuff

Add new features
Add new template tags to display specific information. Read more about the possible template tags.
Add conditional statements to restrict content to specific pages. Read more about conditional tags

Let's take a look at a child theme

(This theme will be available for download at the end of these slides)

The Essentials

Parent theme
style.css
Parent's template name
@import parent's style.css
screenshot.png
New template files

Stand back and admire your awesomeness

Questions?

Resources

Thank you!

This presentation is available at: http://codediva.com/wcham13. The slides were built using HTML5/CSS3 and may not work as well in older browsers.

Download the child theme here: http://codediva.com/wcham13/wcham.zip.