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.
- Create a new directory under
wp-content/themes
named astwentysixteen-child
. - 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 isTwenty 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. - Create
functions.php
file intwentysixteen-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 directorytwentysixteen-child
.
get_template_directory_uri() – Retrieve template directory URI. As we specified instyle.css
header, the template directory name for this child theme istwentysixteen
.
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.
- 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 inDescription
andTheme 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>
- 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 insidetwentysixteen-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: