• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / A Twenty Sixteen Child Theme With Extra WP Customizer Goodness

A Twenty Sixteen Child Theme With Extra WP Customizer Goodness

Posted: March 4, 2016 Updated: January 4, 2018 by Claire Brotherton
12 Comments

Twenty Sixteen post excerpts on blopg

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.

Twenty Sixteen add logo in place of site title

 

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.

Twenty Sixteen post excerpts on blopg

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.

Hide the Twenty Sixteen border

Remove the Proudly Powered by WordPress text in the footer

This removes the text and the forward slash after the name of the site.

Hide Proudly Powered By WordPress

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.

Create a Child Theme

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.php and footer.php files in the main child theme folder
  • A /inc/ subfolder with customizer.php
  • A /template-parts/ subfolder with content.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

Twenty Sixteen Child Theme

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.

Related

Category: WordPress Tags: child theme, customizer, twenty sixteen

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Maria Antonietta says

    March 4, 2016 at 2:29 pm

    Great work, Claire! I anticipate many Twenty Sixteen users will love your theme.

    Reply
  2. Arne Larsson says

    March 21, 2016 at 11:13 am

    Thanks Claire, excellent resource for reading up on customization of WP themes!

    Reply
    • Claire Brotherton says

      March 21, 2016 at 11:15 pm

      Thanks Arne! Have you done much with the Customizer?

      Reply
      • Arne Larsson says

        March 22, 2016 at 8:31 am

        No, I have yet to familiarize myself with the customizer.

        Reply
  3. Alex says

    May 9, 2016 at 5:43 pm

    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!

    Reply
  4. Poojaba says

    May 27, 2016 at 9:46 am

    Custom logo doesn’t work in child theme.

    Reply
  5. Lane Lester says

    August 4, 2016 at 2:05 pm

    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

    Reply
    • Claire Brotherton says

      August 4, 2016 at 2:54 pm

      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;
      }

      Reply
      • Lane Lester says

        August 6, 2016 at 2:12 pm

        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

        Reply
  6. Mark Rowley says

    September 1, 2016 at 8:34 pm

    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

    Reply
  7. raja says

    April 22, 2020 at 10:04 pm

    Love these small changes, but now the logo doesn’t resize when cropped. How to fix?

    Reply

Trackbacks

  1. How to easily add a widget area to WordPress – Bent Corner says:
    December 12, 2018 at 3:10 pm

    […] Go back to your FTP client and navigate to the file where you want to place the new widget. I’m currently using the default Twenty Sixteen WordPress theme as the parent theme, and Claire Brotherton’s most excellent child theme for Twenty Sixteen. […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map