I’ve had a go at building a child theme for Twenty Sixteen.
I decided to use the build as an opportunity to try out the WP Customizer, which I’d been wanting to do for a while, since seeing Dave T Green’s talk on the Customizer at WordCamp Edinburgh 2015.
Full disclaimer: I got most of the code from other sources, listed in the Code sources section below. I just adapted it to work with Twenty Sixteen.
Twenty Sixteen Child Theme Features
Replace the site title with a logo
Does what it says on the tin.
Show excerpts instead of full posts
Twenty Sixteen shows the full posts by default on the Blog page. If you just want excerpts only, you can change it here.
Hide the border
Remove the border that no-one seems to like. Note that if you select this option and attempt to set a Background Image afterwards, it won’t show up.
Remove the Proudly Powered by WordPress text in the footer
This removes the text and the forward slash after the name of the site.
Read more about the theme creation, or jump straight to the download.
Creating the Twenty Sixteen Child Theme
I used the One Click Child Theme plugin to get started. This plugin by Terry Chay generates the child theme for you.
Once you have downloaded the plugin, make sure Twenty Sixteen is set as your active theme.
Then go to Appearance > Child Theme and complete the form.
The plugin makes the child theme with style.css, functions.php and rtl.css files.
It also adds the screenshot.png file for you from the parent theme by default.
In the course of adding to the theme I had to add a few more folders and files:
header.phpandfooter.phpfiles in the main child theme folder- A
/inc/subfolder withcustomizer.php - A
/template-parts/subfolder withcontent.php
What I learned from using the Customizer
I was surprised at how straightforward it was to get started.
I found I didn’t need to use panels. I did need to use:
- Sections – places in the Customizer menu to add controls e.g. Border Display
- Settings – these store the users’ choices.
- Controls – the are the UI controls to allow the user to change things in the theme (text boxes, colour pickers, checkboxes etc.)
I learned that it was important to sanitize all user input, so I added a function to sanitize the user input from checkboxes.
I used theme_mod for all my modifications. (This wasn’t specified in the code – it’s just the default.) The other choice is option. Tom McFarlin recommends theme_mod for themes and option for plugins.
To change the style, inline CSS has to be added. I ended up creating functions that hooked into the wp_head() action hook to add this.
I didn’t add any JavaScript. This would help to instantaneously update the changes applied.
You will notice if you use the Customize functions in Twenty Sixteen and change a setting, the preview pane instantly updates with your changes.
With my child theme, the page has to refresh to toggle the change. The screen goes dark for a second as it does this. Occasionally I found it didn’t update, and I had to refresh the page and try again.
One thing I couldn’t work out was how to put multiple settings and controls into a section. I wanted to add another setting and control to the Footer section to add the copyright date, but couldn’t get it to work without errors. I need to read up more on this and study more code examples.
Code sources
One Click Child Theme plugin.
Build WordPress Yourself:Customizing Client Options Using the Theme Customizer. The basic options for adding the logo and post excerpts came from here.
Theme Foundation: The WordPress Theme Customizer: a Comprehensive Developer’s Guide. I got the sanitization function for the checkboxes from here. This is an in-depth guide, recommended reading.
Matru Dev: Display post excerpt instead of full post in Twenty Sixteen. This has the code to show the excerpt rather than the full post.
[Theme: Twenty Sixteen] Get rid of black border around theme. CSS code to remove the border.
Other WordPress Customizer Resources
Theme Customization API. The WordPress Codex introduction to the Customizer.
Theme Options – The Customizer API. The official documentation for developers.
Beginner’s guide to WordPress Customizer – Igor Benic (Kindle book)
Download
No warranty is implied – use at your own risk!
I’d be interested in getting feedback. Any suggestions on how I could improve the code or add more features.
Great work, Claire! I anticipate many Twenty Sixteen users will love your theme.
Thanks Claire, excellent resource for reading up on customization of WP themes!
Thanks Arne! Have you done much with the Customizer?
No, I have yet to familiarize myself with the customizer.
Hello Claire,
I liked your Twenty Sixteen review, and though I’ll stick with the child theme I’m building myself, I found some of your hints and code links very helpful, thanks!
Custom logo doesn’t work in child theme.
Thank you, Claire, for providing this fine improvement to 2016. I’ve already created one site for someone with it, and I’ve created a sample church site I hope to use for others.
I’ve added some CSS to the child version to decrease some of the “white space” between elements. I’d like to fool with the header and footer as well, and I’ve just started looking at the PHP (which I know well enough just to be dangerous).
I’m confused about the menu entries in header.php and footer.php. It looks like both primary and social menus are called for, but in my site the primary only shows in the header, and the social only in the footer. I’d like to have the social in the header, but I don’t know how to get it there.
Lane
Hi Lane, thanks for your insightful comment, and glad you have found the child theme useful.
You are correct, the social navigation menu is in the header markup. It’s hidden on desktop, but shows on mobile.
The relevant CSS is:
@media screen and (min-width: 56.875em).dropdown-toggle, .main-navigation ul .dropdown-toggle.toggled-on, .menu-toggle, .site-header .social-navigation, .site-footer .main-navigation {
display: none;
}
The problem with changing this to display: block is it will also show the Menu toggle button on desktop, which you don’t want.
You’ll need to change this to a more specific rule, perhaps something like
nav#social-navigation {display: block;
}
Thanks for the explanation, Claire. Since the social menu displays in the mobile menu, I think I’ll leave well enough alone. 🙂
Back in the olden days before mobile and responsive, I was pretty competent with HTML and CSS. Not so much nowadays.
Lane
Hi Claire,
Great post which has encouraged me to continue to experiment with the Customizer.
I’ve begun to add some basic Customizer options into my custom theme framework such as the option to add a logo but I’d like to make full use of it to give clients an easy way of editing various elements of their site.
Recently I also found a great Customizer package for Sublime Text. Well worth checking out if you use Sublime.
https://ahmadawais.com/wordpress-customizer-package-sublime-text
Love these small changes, but now the logo doesn’t resize when cropped. How to fix?