Twenty Sixteen child theme with enhanced customizer options

I started with Twenty Sixteen and embarked on my latest child theme project. Along the way discovered a lot of great things that can be done with a child theme given a bit of research and some creative effort.

Color Controls

At first, I planned on simply adding normal WordPress color controls for all of the different elements of my child theme. Somewhere along the line I read a very thorough article by Ragnar over at Design Bombs in which he describes a number of customization possibilities specifically for Twenty Sixteen, including making an element transparent or semi-transparent on top of a background image. I began searching for a way to add alpha (transparency) control to the WordPress core color control and the search ultimately led me to discover the Kirki toolkit. I wasn’t sure how useful a transparency option would be, but after trying it out on my development site I decided it was worth implementing, at least for some elements. Kirki allows you to enable the alpha layer (opacity) in your color controls by adding ‘alpha’ => true to your field’s choices argument, so I added it to some controls while setting it to false on all others. Since the fields are now set up, if I decide later on that I want to enable or disable the alpha layer on a specific element I can easily toggle it on. Here’s a look at the color controls for one section of the customizer with a view of the page, which uses a background image behind a semi-transparent content area:

Example of the alpha color control
Page color set to about 30% opacity with a background image behind it.

I set up color controls for just about every element – or group of elements – that I could think of and I placed them in one of four sections: Header, Main Content, Footer, and Other Controls. Since I ended up with quite a few controls, breaking them up into sections makes it somewhat less confusing than it would if they were all on one scroll-able page. At least that’s my theory, and I’m sticking to it…for now.

Color controls and page example
A completely different look with just a handful of clicks.

Now, back with my previous child theme I put the main default theme elements (header, content, and footer) in wrapping elements which allowed me to switch between a number of different visual styles, as well as to implement a sticky footer (described later), but each of the element styles in that theme was hard-coded into the stylesheet, so making color changes was cumbersome. I use a similar structure with this child theme and as you may imagine from the following image, the design possibilities are nearly endless, but now the customizer makes it easy to change colors and the live preview allows the user to try any combination of colors before committing them to the site:

Example of color possibilities
Imagine each of these elements as any color you want.

Author: Galen

Combining a lifelong passion for photography with an ever growing fascination with the properties of light, Galen specializes in portrait, fashion, and fine art photography with the goal of producing dynamic, quality images through focused effort and attention to detail.

Leave a Reply

Your email address will not be published.