Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Create a WordPress Child Theme (Video)

Last updated on by
Elegant Themes
How to Create a WordPress Child Theme (Video)

You’ve downloaded the new version of WordPress and were greeted with a new default theme, Twenty Ten. You’ve played with the theme for a while, testing the new features of WordPress 3.0, playing with custom post types, the menus, you name it. But you want more. How about creating a child theme? What is a child theme? Dim the lights, put your dancing shoes on, crank that music, because today we’re creating a WordPress child theme.

Watch the Screencast

First Steps

Stylesheet of a Child Theme

Create a new folder inside of wp-content/themes with the name of your child theme. Now create a new file named style.css and place it inside of your child theme folder. Next we need to add some information so WordPress knows that our theme is a child theme, that it has an author, a homepage link, and a version. Add the following to your style.css:

/*
Theme Name: Magnitude
Theme URI: http://www.wpbeginner.com/
Description: A child theme of Twenty Ten
Author: dronix
Author URI: http://dronix.me
Template: twentyten
Version: 1.0
*/

Most of that stuff is self explanatory. What you really want to pay attention to is the Template: twentyten

This tells WordPress that our theme is a child theme and that our parent theme directory name is twentyten It is important to note how the parent folder is written, this is case sensitive. If we provide WordPress with Template: Twenty Ten it will not work.

If you try to activate your child theme now, it’ll look horrible. There isn’t any styling applied to our theme so we need to reference the parent theme style.css file, in this case Twenty Ten. We do that by adding the following to our child theme style.css:

@import url("../twentyten/style.css");

Sytling your child theme

Header of a Child Theme

For this section you’ll need a bit of css know-how. There are tools such as firebug and web developer that can ease this process. If using firebug, you can simply click on its icon, click inspect, and select the area of interest, such as the menu for example. You’ll then see the styling or css applied to the area you selected. You can then edit the values, copy the changes and paste them onto your styles.css file. (Watch screencast for more info)

Loop of a Child Theme

Footer of a Child Theme

Page Template

Twenty Ten comes with one page template, the One Column page template. Lets create our own page template, this time taking advantage of the whole width of the page. To make things easier, simply copy the onecolumn-page.php from the Twenty Ten theme and paste it into your child theme folder. Open up your new file(onecolumn-page.php) and change the Template Name. Lets also rename the body class of one-column. Here’s what it might look like:

<?php
/**
* Template Name: Full width, no sidebar
*
* A custom page template without sidebar.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/

get_header(); ?>

<div id="container" class="full-width">
<div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->

<?php comments_template( '', true ); ?>

<?php endwhile; ?>

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

<?php get_footer(); ?>
Now save your file and rename it fullwidth-page.php

Then add the following to your style.css file:
/*
LAYOUT: Full Width Page :D 
----------------------------------------*/
#main #container.full-width #content,
#main #container.full-width #content p {
width: auto;
}
#main #container.full-width #content #respond textarea,
#main #container.full-width #content #respond input {
width: 98%;
}
#main #container.full-width #content #respond input#submit {
width: auto;
}
.full-width #respond {
width: auto;
}

Save the changes.

Extending the parent theme

Ok! OK! I know you love your new child theme, but you still want more. Lets add some extra functionality to our theme by using the featured post image, and displaying it on the homepage under each post. Create a functions.php file inside of your child theme folder and add the following:

<?php
add_action( 'after_setup_theme', 'magnitude_setup' );
function magnitude_setup() {
//Sets the dimensions for the thumbnails displayed on the homepage
add_image_size( 'home-post-thumbnail', 570, 200, true );
}
?>

Ok so what have we done here? We used add_action() to tell WordPress to run our function magnitude_setup. We’ve then created this function(magnitude_setup) and used the WordPress function add_image_size() to set the size of our custom thumbnails to 570×200. So when we add a featured image to our post, it’ll crop it to our specified dimensions.

Displaying our custom featured image post

Go to the Twenty Ten theme folder and copy the loop.php file to your child theme's folder. Open it up and add

<?php the_post_thumbnail('home-post-thumbnail'); ?>

Right Before the_content tag in /* How to display all other posts. */ section.

<?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>

Should look like this:

<?php
/**
* The loop that displays posts.
*
* The loop displays the posts and the post content. See
* http://codex.wordpress.org/The_Loop to understand it and
* http://codex.wordpress.org/Template_Tags to understand
* the tags used in it.
*
* This can be overridden in child themes with loop.php or
* loop-template.php, where 'template' is the loop context
* requested by a template. For example, loop-index.php would
* be used if it exists and we ask for the loop with:
* <code>get_template_part( 'loop', 'index' );</code>
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-above">
<div><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-above -->
<?php endif; ?>
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div id="post-0">
<h1><?php _e( 'Not Found', 'twentyten' ); ?></h1>
<div>
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
<?php endif; ?>
<?php
/* Start the Loop.
*
* In Twenty Ten we use the same loop in multiple contexts.
* It is broken into three main parts: when we're displaying
* posts that are in the gallery category, when we're displaying
* posts in the asides category, and finally all other posts.
*
* Additionally, we sometimes check for whether we are on an
* archive page, a search page, etc., allowing for small differences
* in the loop on each template without actually duplicating
* the rest of the loop that is shared.
*
* Without further ado, the loop:
*/ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* How to display posts in the Gallery category. */ ?>
<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div>
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->
<div>
<?php if ( post_password_required() ) : ?>
<?php the_content(); ?>
<?php else : ?>
<div>
<?php
$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
$total_images = count( $images );
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
?>
<a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
</div><!-- .gallery-thumb -->
<p><em><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ),
'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
$total_images
); ?></em></p>
<?php the_excerpt(); ?>
<?php endif; ?>
</div><!-- .entry-content -->
<div>
<a href="<?php echo get_term_link( _x('gallery', 'gallery category slug', 'twentyten'), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>
<span>|</span>
<span><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>|</span> <span>', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php /* How to display posts in the asides category */ ?>
<?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
<div>
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div>
<?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<div>
<?php twentyten_posted_on(); ?>
<span>|</span>
<span><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>|</span> <span>', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php /* How to display all other posts. */ ?>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div>
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<div>
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div>
<?php the_post_thumbnail('home-post-thumbnail'); // Displays the featured image ?>
<?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<div>
<?php if ( count( get_the_category() ) ) : ?>
<span>
<?php printf( __( '<span>Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
</span>
<span>|</span>
<?php endif; ?>
<?php
$tags_list = get_the_tag_list( '', ', ' );
if ( $tags_list ):
?>
<span>
<?php printf( __( '<span>Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
</span>
<span>|</span>
<?php endif; ?>
<span><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>|</span> <span>', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>
<?php endwhile; // End the loop. Whew. ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below">
<div><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->
<?php endif; ?>

Save the file and rename it loop-index.php. Twenty Ten is set to look for this file first, if there isn’t one, it’ll look for its default loop.php file.

Hooks

Twenty Ten allows us to easily change and add our own filters and hooks. Lets try adding a class to the more link while removing Twenty Ten’s filter and adding our own.

Add the following to your functions.php file, inside of magnitude_setup():

//Add a class to the excerpt more-link
function magnitude_custom_excerpt_more( $output) {
// Remove the parent's function tied to excerpt-more
remove_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
return $output . ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) . '</a>';
}
add_filter( 'get_the_excerpt', 'magnitude_custom_excerpt_more' );
function magnitude_auto_excerpt_more( $more) {
// Remove the parent's function tied to excerpt-more
remove_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' );
return ' &hellip;' ;
}
add_filter( 'excerpt_more', 'magnitude_auto_excerpt_more' );

Lastly, after removing those two filters, we’ve re-created them with our own modifications by using add_filter(). Note that we have specified the name of the filter we want to add and the name of our custom function which contains the modifications to the filter.

Last Step

Before heading off and calling it a day, don’t forget that we need to add a nice image for our child theme. This image will be displayed in the backend of WordPress when we are trying to active our theme. This image must be named screenshot.png and have a dimension of 300 x 225 (px).

Things to Note

  • The barebones of a WordPress child theme contains the theme’s folder and a style.css file.
  • WordPress will first look for the content of the child theme before falling back to the parent theme.
  • The child theme files take first priority before the parent theme.

Download Magnitude

Download the end result of our Creating a WordPress Child Theme tutorial, Magnitude (A TwentyTen Child Theme).

View Live Demo of Magnitude Child Theme


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Jon

    confusing as all heck. what’s the minimum requirement for a child theme? this seems more like a tutorial in how to create the mods.

    • http://www.wpbeginner.com/ WPBeginner Support

      Minimum requirement to create a child theme is that your parent theme has all the required templates needed to become a parent theme.

  • C

    What happens if you create the child theme and wordpress recognises it once activated. However even without importing a theme into the stylesheet, it already is style like the parent theme.

  • John

    okay, i know im a total dummy when it comes to wordpress, but im trying to figure this stuff out and have a ridiculously basic question. so, several weeks ago twentyten updated and i lost all of the changes id made to the theme. which is how i came to learn about this concept of child themes. now, every page i go to to try to learn how to create a child theme says something like this:

    Like regular themes, a child theme needs to reside in a directory inside the /wp-content/themes directory. The first step to creating a child theme is to add the directory that will hold it. For this example, create a new twentyten-child directory inside the /wp-content/themes directory.

    what is a directory? every site says, oh, it’s simple, just go to the directory and create a subdirectory. how do i do that? where is the wp/content/themes file everyone is talking about?

    again, sorry for the very basic question, but i cant figure it out….

    • Affan

      Directory is basically like path. For example, your folder in your folder will have its own path, eg My Computer > Local Disk (C:) > Program Files > Yourfolder.

      So basically you’ve to click on your My Computer icon, then Local Disk (C:) icon, then Program FIles folder and so on.

  • http://www.betteryourselfpt.com/ Peter

    I don’t know what I’m doing wrong. I have installed the child theme and activated it. I’m going to Firebug, selecting the CSS I want to change and copy and pasting it into the style.css in the child theme. Back to the site, hit F5, and… a whole lotta nothin’. I see the changes in firefox, but they’re not being implemented on the live site. Anyone have any ideas?

  • jamesc2

    I am a total newb, so if this happens to anyone else dont feel ashamed. The Template title is CASE SENSITIVE- if you capitalize the name when its lower case, like in the video at 1:58 when Twentyten is typed it, it won’t show up in current themes under appearances themes- however at the very bottom of the page it will say that there is a theme that is not being shown because it has an error

  • willage24

    I have tried this to the letter, but the parent theme I am working with has a style.css that only contains the wordpress comment identifying it as theme. The CSS is coming from a main.css inside the css/main.css folder. So how do I configure the child theme with this type of setup?

  • JohnCardell

    Is it possible to add an image to the child theme on Manage Themes Page?

    • http://wpfullservice.com/ peter_wpfullservice

      Hi,

      Yes it is very easy to add an image for your child theme. In the parent theme you will notice a file called screenshot.png. You can copy that over to your child theme directory or modify it or create a brand new one. @JohnCardell

      • johnzena

        @JohnCardell

        Thank You. I figured it out about an hour after I posted the above message.

  • venug

    I got it now. But a problem is that I am getting an error displaying the site if I use my theme’s name instead of magnitude_setup in line 2 and 3 in functions.php .

    Am I missing some thing?

    Thanks !

  • venug

    I created a child theme .It appears on cpanel but not on my site’s themes section .Am I missing some thing?

    I followed everything in your tutorial except the screenshot step .

    Currently there are four files in my theme’s file .
    fullwidth-page.php
    functions.php
    loop.php
    style.css

    Does any body have idea on this issue?

  • http://www.pontbren.com Andy

    Great help. For the full page css you need remove the large right hand margin on the content div #main #container.full-width #content{margin:0 20px;}

  • http://littlepinkhouse.net Gretchen

    Perhaps this is a silly question, but can you create a “grandchild” theme? I use Thematic, and have found a Thematic child theme I like–but if I want to protect that child theme against upgrades, can I create a child theme for a child theme?

    • http://www.wpbeginner.com Editorial Staff

      Don’t think that is possible yet.

      • Affan Ruslan

        It is POSSIBLE. I’ve read a tutorial on granchild theme before. Just search it, I’m pretty sure you’ll find an article about it.

  • http://petsocietyfans.com Gifer

    awee great post.very helpful :-D Waiting for a tutorial for making parent theme :P

    oh can I ask how you made the video player ? However its look cool :D

  • http://www.jarretmorrow.com Jarret

    Great tips guys! You should consider making a child theme for the popular Hybrid framework. I made one that was featured on the user-created theme homepage. It’s a well-coded and open source theme framework.