Create Twenty Sixteen Wordpress Child Theme

Create a Child Theme

If you only want to try creating a child theme of Twenty Sixteen, and done after the theme can be activated through Appearance > Themes menu.

  1. Create a new directory under wp-content/themes named as twentysixteen-child.
  2. Create style.css file in newly created directory, twentysixteen-child. Open the file and paste the following code into the file:
    /*
     Theme Name:   Twenty Sixteen Child
     Template:     twentysixteen
    */
    


    Theme Name value, which is Twenty Sixteen Child is the name of the theme that will be displayed on Appearance > Themes admin page. Template
    value indicates the directory name of the parent theme.Just until this second step, after you save the file, you can already see that your child theme is added into Appearance > Themes in admin page. You can activate it. But the result on the homepage is not as what we desire. At least we need to do another step.

  3. Create functions.php file in twentysixteen-child directory. In this step we will add the code to load stylesheet files from the parent theme and this child theme. Copy paste the following code into the file, then save it.
    <?php
    function mi_san_theme_enqueue_styles() {
      wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    
      // In other cases when creating a child theme, you might also need to load child stylesheet manually
      // In twentysixteen-child you could ommit the following line. Just load 'parent-style' it works already.
      wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
    }
    add_action('wp_enqueue_scripts', 'mi_san_theme_enqueue_styles');
    ?>
    

    To get the location of stylesheet file dynamically according to the site url, we need to use the following functions:
    get_stylesheet_directory_uri() – Retrieve active theme directory URI. In this case if we activated our child theme so the URI correspond to our theme directory twentysixteen-child.
    get_template_directory_uri() – Retrieve template directory URI. As we specified in style.css header, the template directory name for this child theme is twentysixteen.

mikhsan-twenty-sixteen-child-theme

It’s done. Now you can activate the child theme from Appearance > Themes admin page and see that your child theme is working.


Add Theme Details

Basically, we have done our main objective. But of course, we won’t be satisfied just by doing that. If you click on the theme name, Twenty Sixteen Child, and compare it with other theme’s details, our child theme’s details almost contains nothing.

  1. Add some details in css header in style.css file. You can modify the css header into the following format:
    /*
     Theme Name:   <strong>Twenty Sixteen</strong> Child
     Theme URI:    https://mikhsanblog.wordpress.com/2016/04/12/creating-twenty-sixteen-wordpress-child-theme/
     Description:  Twenty Sixtheen child theme. This is only for practice. You can insert some html text formatting tags and add new line here. <strong>For example</strong>, here is an anchor element <a href="https://mikhsanblog.wordpress.com">Muhammad Ikhsan Blog</a>
     Author:       Muhammad Ikhsan
     Author URI:   https://mikhsanblog.wordpress.com
     Template:     twentysixteen
     Version:      1.0.0
     License:      GNU General Public License v2
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
     Tags:         black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
     Text Domain:  twenty-sixteen-child
    */
    

    You can write the description of your child theme in Description as long as you want, but make it in one line. It applies for other field as well. You can use several html tags in Description and Theme Name . But it’s very limited. To make it easier for you, here is the list of tags and tag attributes that can be used in theme name and description:

    <abbr title=""></abbr>
    <acronym title=""></acronym>
    <code></code>
    <em></em>
    <strong></strong>
    
    <a href="" title=""></a>
    <abbr title=""></abbr>
    <acronym title=""></acronym>
    <code></code>
    <em></em>
    <strong></strong>
    
  2. Add theme screenshot image. You can add screenshot of your child theme to be displayed in Appearance > Themes page by simply putting image file named screenshot.png inside your child theme directory. In our case, it is inside twentysixteen-child directory. Other than using *.png image file extension, you can also use image with extension *.gif, *.jpg, or *.jpeg. Regarding the size of the image, you can use image with scale width:height = 4:3. Based on the default exiting WordPress theme; Twenty Sixteen uses 1200×900 pixels while Twenty Fifteen and Twenty Fourteen use 880×660 pixels.

mikhsan-twenty-sixteen-child-theme-2Now, when you open Twenty Sixteen Child theme details, you will see the theme details as what we have set.

Through this post, you have learned how to create a child theme, in this case it is Twenty Sixteen child theme. But we still haven’t done anything that a child theme supposed to do, which is to do indirect customization of the parent theme, such as to customize the theme color scheme, customize header and footer, etc. For those part, I plan to create it in separate posts that I hope I would be able to write them soon. Sorry, couldn’t do that. Instead, here is a list of links which I hope will be useful:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s