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.

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.

Now, 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:

• https://developer.wordpress.org/themes/advanced-topics/child-themes/
• https://wpshout.com/wordpress-child-themes-complete-guide-core-concepts/

Advertisements