How to create Twentythirteen child theme for WordPress

Proper way to start with wordpress is by creating your own child theme. I found default Twentythirteen WordPress theme is very handy and easy to setup, so it will be a shame to loose any changes made after every update. Don’t ignore updates, it’s very important to be up to date. The only proper way and secure way is to create child theme.

So navigate to wp-content/themes and create new folder called twentythirteen-child.
Here you will add your custom css style and any file that you want to change from default theme (just copy original file from twentythirteen that you want to edit and change). You can copy any file except functions.php. Dont duplicate this file. Instead if you want to change functions.php create your own file in twentythirteen-child folder and add all your functions there. But first, create your own style.css file in child theme and put this code inside (you can change it to suite your needs):

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.transformnews.com/
Description: Twenty Thirteen Child theme!
Author: M.R.D.A.
Author URI: http://wordpress.transformnews.com/
Template: twentythirteen
Version: 0.1
*/
 
/* This is must */
@import url("../twentythirteen/style.css");  
 
/* Add some custom fonts */
@font-face {
  font-family: CustomFont;
  src: url("fonts/Custom_Font-webfont.eot");
  src: url("fonts/Custom_Font-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Custom_Font-webfont.woff") format("woff"), url("fonts/Custom_Font-webfont.ttf") format("truetype"), url("fonts/Custom_Font-webfont.svg#CustomFont") format("svg");
  font-weight: normal;
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: CustomFont; 
	line-height: 1.3;
} 
.site-title {
	font-size: 50px;
	font-weight: normal;
	font-family: CustomFont; 
}
h1.entry-title  {
	font-size:38px;
}
 
/* Give your site full width instead of default max 1600px */
.site {
	max-width: 100%;
	width: 100%;
}
#masthead.site-header {
	background-color:#F7F5E7;  
}
 
/* Add some more style to default menu style */
.nav-menu li a:hover { 
	background-color: #111;
        -webkit-transition: 0.4s;
        -moz-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: #fff;
	font-style: normal;
	background-color:#111;
}

After you added @import url which is must to include the original css file, you can add your own styles inside css like @font-face for example, or any other css rule you want. In this case folder fonts is located inside child theme with CustomFont inside which are now included thru child theme css and will not be overwriten on next update. Replace CustomFont with your own font. If you want to change default max width (1040px) than after change dont forget to copy everything after line 2576 ( * 8.0 Media Queries ) from original css to your child template because it’s important to load that rules last, so our site will continue to work proper on any resolution or device.

Now it’s time to create functions.php file inside child theme folder.
for example:

<?php
// in your Child Theme's functions.php   
// Use the after_setup_theme hook with a priority of 11 to load after the
// parent theme, which will fire on the default priority of 10
 
// Remove meta generator (WP version) from site and feed
if ( ! function_exists( 'mywp_remove_version' ) ) {
 
function mywp_remove_version() {
		return '';
}
add_filter('the_generator', 'mywp_remove_version');
}
 
// Clean header from unneeded links
if ( ! function_exists( 'mywp_head_cleanup' ) ) {
 
function mywp_head_cleanup() {
		remove_action('wp_head', 'feed_links', 2);  // Remove Post and Comment Feeds
		remove_action('wp_head', 'feed_links_extra', 3);  // Remove category feeds
		remove_action('wp_head', 'rsd_link'); // Disable link to Really Simple Discovery service
		remove_action('wp_head', 'wlwmanifest_link'); // Remove link to the Windows Live Writer manifest file.
		/*remove_action( 'wp_head', 'index_rel_link' ); */ // canonic link
		remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); // prev link
		remove_action( 'wp_head', 'start_post_rel_link', 10, 0 ); // start link
		remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);  // Remove relation links for the posts adjacent to the current post.
		remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
 
global $wp_widget_factory;
		remove_action('wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));
add_filter('use_default_gallery_style', '__return_null');
}
add_action('init', 'mywp_head_cleanup');
}
 
// Add Header and Extra Widget Area 
if ( ! function_exists( 'custom_sidebar' ) ) {
 
// Register Sidebar
function custom_sidebar() {
 
	$args = array(
		'id'            => 'sidebarheader',
		'name'          => __( 'Header Widget', 'twentythirteen' ),
		'description'   => __( 'Header widget area for my child theme.', 'twentythirteen' ),
		'class'         => 'sidebarheader',
		'before_title'  => '<h2 class="widgettitle">',
		'after_title'   => '</h2>',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget'  => '</li>',
	);
	register_sidebar( $args );
 
        $args = array(
		'id'            => 'sidebarextra',
		'name'          => __( 'Extra Widget', 'twentythirteen' ),
		'description'   => __( 'Extra widget area for my child theme.', 'twentythirteen' ),
		'class'         => 'sidebarextra',
		'before_title'  => '<h2 class="widgettitle">',
		'after_title'   => '</h2>',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget'  => '</li>',
	);
	register_sidebar( $args );
 
}
 
// Hook into the 'widgets_init' action
add_action( 'widgets_init', 'custom_sidebar' );
?>

This code will remove some stuff you usually dont need on a simple websites, like feed links, rsd link, meta generator, just read the comments in the code and choose what is the best for you. Comment or delete what you don’t need. This file will also create 2 custom widget areas which can be added to the header.php file or any other template file from default theme. Just copy file to the child theme folder before you add or edit anything. So for example copy header.php from your theme to child theme and add this code on the place you want to show custom Header Widget.

<?php dynamic_sidebar('Header Widget'); ?>

And than if needed you can add Extra widget, to the place you need.

<?php dynamic_sidebar('Extra Widget'); ?>

And that’s it, here are some extra useful functions if needed. Your child theme is now ready, you just need to activate it in WordPress dashboard / Appearance / Themes

Also consider this tutorial on how to create page of posts with two columns, this way you can create custom templates for the pages you want, without of using annoying shortcodes…

7 thoughts on “How to create Twentythirteen child theme for WordPress

  1. can you think of any reason why, i copied your style sheet example from above exactly as you have it; i pasted it into a blank page in the code view of dreamweaver (so i’m sure i didn’t corrupt any of the quotes, apostrophes, etc.); saved it as style.css into my twentythirteen-child folder; ftpd this folder up to the wp-content > themes directory; navigated in my wp-admin to Appearance > Themes and clicked Live Preview but all i see is a completely unformatted web page with my content.

    i even clicked Activate but the page that comes up still has no styles.
    so i reactivated the parent twentythirteen and everything looks good again.

    the relative path for the @import looks to be correct.
    any suggestions on what i may be doing wrong would be much appreciated.

    thanks!

  2. When I try to activate it, it gives me the following error:
    ‘Parse error: syntax error, unexpected $end in /home/www/madjarsko-drzavljanstvo.iz.rs/wordpress/wp-content/themes/twentythirteen-child/functions.php on line 70’
    That’s the last line of the ‘functions.php’…

    help?

    1. I had the same problem, there’s a missing brace near the end of the functions.php file, it seems to work now.

      The last few lines of functions.php should be as follows:

      register_sidebar( $args );
      }
      }

      // Hook into the ‘widgets_init’ action
      add_action( ‘widgets_init’, ‘custom_sidebar’ );
      ?>

      Give that a try 🙂

  3. Hello,

    I will change all colours in one.
    The colour i like is this colour of around this box
    Its #f7f5e7.
    How caqn I fix this

    thanks

    Antoon

  4. The very first step is vague.
    1. Navigate to wp-content themes. WHERE
    2. Create a folder -WHERE
    3. Add Css file TO WHAT. Do you create a document?
    4. Just copy the original file – WHERE do you find this?
    5. You can copy any file except PHP – an example is needed here.
    6. Instead if you want to change functions.php create your own file in twentythirteen-child folder and add all your functions there. WHAT ARE FUNCTIONS

    7. But first, create your own style.css file in child theme and put this code inside (you can change it to suite your needs): how, WHERE .

    You know what you are talking about but I have NO idea – a good tutorial assumes the KISS principals cause I wouldn’t be googling for instructions on how if I knew how to do it.

    1. This tutorial assume that you know some basics…

      1. wp-content/themes folder is located in folder where you installed wordpress…for example if wordpress is installed in root than you can find it in public_html/wp-content/themes. You will need to use ftp manager or cpanel to acpmplish that

      2. create new folder called twentythirteen-child in the folder where you navigated – wp-content/themes

      3. yes create new document – style.css and add the css code above to it… save it and copy to wp-content/themes/twentythirteen-child

      4. original file can be found in wp-content/themes/twentythirteen folder

      5. for example copy header.php from twentythirteen folder to twentythirteen-child folder (than header.php from child theme will be used instead of header.php in original theme )

      6. see original twentythirteen functions.php from wp-content/themes/twentythirteen folder. you dont need to create this file in child folder if you dont want to change original twentythirteen functionality

      7. is the same as the step 3.

      This tutorial is quite simple, but you should learn some wordpress basics first

  5. For those looking to add a read more or continue reading link to their blog posts, using the Twenty Thirteen as their parent page, here is a child theme they can just download, upload, activate and that’s it.

Comments are closed.