Create Better Themes using WordPress Theme Customizer

Summary

0. Time needed to finish reading: 5-8 minutes

1. Introduction: About WordPress & WordPress Theme Customizer

2. Advantages of Using the Customizer

3. Starter Themes for Easy Development

— 3.1. Sections, Settings & Controls

— 3.2. Grouping Multiple Sections under Panels

4. Using Kirki for Faster Development

5. Methodology: Organize your Controls & Sections

6. Conclusions

#1. Introduction: About WordPress & WordPress Theme Customizer

WordPress is probably the most popular open-source CMS in the world right now, with 29% of the web using it to create from general blogs to huge news sites. WordPress is easy to install and configure, offering customizable design up to a certain point (the flexibility of the layout usually depends on the theme you’re using) and a huge plugin gallery (over 45,000 plugins – according to the official website). Being such a popular CMS, it’s also backed by a strong community (site owners gather at monthly meetups in 436 cities worldwide), comes with high security and it’s Search Engine Friendly.

WordPress Theme Customizer was first introduced with WordPress 3.4 and it’s a very useful tool that allows you to live preview changes done to the site. This, combined to the set of changes introduced as of 4.7, like user-specific backend language, custom CSS editing area, PDF Previews, REST API Content Endpoints & Post Type Templates – makes WordPress a very flexible CMS. It’s surely no longer just a blogging platform and I am confident in stating that WordPress is heading courageously towards the “Web Application Framework” title. There still is a strong debate on the topic, but considering topics like database access and mapping, caching, security, URL mapping (routing) – WP does qualify to be an Application Framework. Could you build mobile apps using it’s API endpoints? With some plugins that handle JWT or OAuth * and some spare time, yes, you could.

*one quick mention on that last phrase – I’ve mentioned JWT / OAuth under the presumption that your mobile app would require security features/user login areas

To get back to the main topic of this article, WordPress Theme Customizer is an awesome feature and a really great reason for which you’d want to choose WordPress for developing small and mid-sized web sites. If you’re using a premium theme with your WordPress install, you probably already have a lot of options available under Appearance > Customize, in your admin panel. But if you’d like to implement your own – custom design and functionality, but still want to have a very flexible editor from where you can adjust the logo, menus positioning, typography, styles, layouts or different other reusable blocks of content, then developing the theme using WordPress Theme Customizer is the right way to go.

#2. Advantages of Using the Customizer

You can get most of the information you need for creating your WordPress theme using the Customize API directly from the Theme Handbook, including some code examples and discussion of best practices. The summary would be something like: you create controls that implement the settings in the theme and, optionally, you can live preview how those change your design. Having the possibility of reviewing changes done in the admin panel without affecting the live version of the site is extremely useful for small and mid-sized websites that need quick design updates. If your company is structured in such a way that you’d have a person who acts as web editor – in charge of managing the content, then developing the theme using WordPress Theme Customizer would simply allow that web editor to do more in terms of layout, colors, styles, etc. Such a solution brings more power to the user and that translates in freedom to build anything you want, really easy and really fast – exactly how WordPress official website promotes it’s CMS.

Of course, in order for you to create your custom theme using WordPress Theme Customizer you’d need a strong technical background and a proper understanding of how WordPress works. If the things I’ve mentioned before sound like a lot of hassle and you’ll need to do a lot of reading and learning to get to the finish line, then maybe it’s easier to just use a software development company for WordPress development services – and then you’ll only have to worry about managing the site using the Customizer – because that is easy and fun, right?

#3. Starter Themes for Easy Development

If, on the other hand, you’ve decided you want to try out building your own theme using WordPress Theme Customizer, then the first thing I recommend you to do is grab a copy of a popular starter theme to initiate your project. It’s easier to work on a boilerplate theme because this saves you all the time needed to generate the files and the folder structure. That, plus the fact that sometimes it’s easier to have some “guidance”, even in the form of a working model. Some good WordPress starter themes:

_s (Underscores) – you can just use the site to generate your _s based theme and start developing further right away
Sage – by Roots – comes with advanced workflow, minimal HTML5 templates and template inheritance with the theme wrapper
HTML5Blank – An open-source boilerplate theme for WordPress
UnderStrap – combines the Underscores starter theme with Bootstrap 4 into an open-source foundation for your WordPress project

Another quick mention here, if you’ll end up using Sage, then I strongly recommend you to have a look over Bedrock, which is a WordPress boilerplate with an interesting folder structure. If in the past, you’ve worked with Laravel – for example – then you’ll immediately recognize the directory naming. With Bedrock, you get dependency management with Composer, more secure passwords through wp-password-bcrypt, and maybe a workflow + environment that’s a bit more familiar.

OK, back to our project, where we have to decide upon a starter theme. Since it’s based on Bootstrap 4, I prefer to use UnderStrap for this short guide on the Theme Customizer, but you can just choose whichever option sounds better for you. Another mention, though, in UnderStrap you have a customizer file you can use as a model for future development, it can be found in understrap/inc/customizer.php and you can have a look at its code in GitHub. Customizer.php is required in functions.php (that can be found in the root folder, but I guess you already knew that, right?)

/**
* Customizer additions.
*/
require get_template_directory() . '/inc/customizer.php';

#3.1. Sections, Settings & Controls

Since you have the “foundation” layed out (function naming + add_action hook), you can just start adding new Settings and Controls to your file. One thing you will have to understand is that these Controls need to be visually grouped under Sections. In the Appearance > Customize menu you should already see Sections with some Controls.

We will now use the Theme Handbook information and generate our own Section with some color Control. First off, let’s work on the Section:

$wp_customize->add_section( 'theme_color_options' , array(
    'title' => __( 'Colors', 'theme' ),
    'description' => __('Includes changes for base text'),
    'priority' => 5,
    'capability' => 'edit_theme_options',
) );

And inside the Section, we’d like to add a Control for the base text color – which will probably be used in all the content paragraphs, for example. But along with the Control, we also need to add the Setting (represent the data that we want our theme to accept and use).

$wp_customize->add_setting( 'theme_general_text_color' , array(
    'default' => '#000000',
    'transport' => 'refresh',
) );

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
            'theme_general_text_color_control', array(
            'label' => __( 'Base text color', 'theme' ),
            'description' => __( 'Used for all texts.', 'theme' ),
            'section' => 'theme_color_options',
            'settings' => 'theme_general_text_color',
            'priority' => 5,
         )
) );

Now the Appearance > Customize admin panel will contain the new Section + the new Controler and should contain editing areas similar to the ones below:

#3.2. Grouping Multiple Sections under Panels

If you plan on having a lot of Sections and Controls, you can clean up the admin panel by grouping the Sections under Panels. You can read more about Panels here. To complete the example, if we were to have multiple color Controls under a color Section, multiple layout Controls under a layout Section and typography Controls under a typography Section, we could have just grouped all those Sections under a Global Panel, thus allowing the administrator easily navigate around the Customizer to make changes. Registering a panel is really easy, but once you’ve done that, you’ll also need to adjust the Sections too. Please see the example below:

$wp_customize->add_panel( 'theme_global_panel', array(
    'title' => 'Global Settings',
    'description' => 'Theme default panel',
    'priority' => 5,
) );



$wp_customize-&gt;add_section( 'theme_color_options' , array(
    'title' => __( 'Colors', 'theme' ),
    'description' => __('Includes changes for base text'),
    'priority' => 5,
    'capability' => 'edit_theme_options',
    'panel' => 'theme_global_panel',
) );

You can group your Sections under Panels as you consider fit, as far as I am aware there are no limitations on how to organize your Controls. But since we want a theme that’s easy to update & maintain, we want to keep our code clean, as well. So in terms of file/directory structure, you can just use something like this:

function theme_customize_register( $wp_customize ) {
//All our panels, sections, settings, and controls will be added here
    include_once(dirname( __FILE__ ).'/options/options-global.php');
    include_once(dirname( __FILE__ ).'/options/options-layout.php');
    include_once(dirname( __FILE__ ).'/options/options-header.php');
}

add_action( 'customize_register', 'theme_customize_register' );

Things do tend to complicate, especially if you’d like the Controls to look in a certain way or if you have a lot of them. Outputting the CSS, for example, will require a lot of work and attention to detail. In such cases, I’ve found it very useful using Kirki – and I’ll tell you more about it right away.

#4. Using Kirki for Faster Development

Kirki is a 100% Open-Source plugin for WordPress that’s helping improve WordPress Theme Customizer. You can go through the documentation, and read about integration. Background, checkbox, code, multi check, slider or sorter are some of the Controls types Kirki provides that really improve the user’s experience while using the Customizer. If you’d like to deliver the project fast, but you do care about the UX, then Kirki is the right collection of tools for you.

#5. Methodology: Organize your Controls & Sections

While creating – for example – HTML + CSS documents, you tend to follow a specific methodology. Even if sometimes you adapt that methodology to your needs or to the project’s need, you would still need to follow some ground rules. Since I think BEM is awesome for frontend development, I quite often use the same methodology when organizing Controls, Sections & Panels in WordPress Customizer. So for a complex WordPress theme, you would probably end up with Panels like:

Global
Styles
Header
Layout
Main Page
Blog
Footer
Additional Features (this can include Woocommerce theme settings or Custom Post Types theme settings, for example

#6. Conclusions

So this is it, a short guide on how to create better WordPress themes using the Theme Customizer. You’ve quickly gone through some examples of using Sections, Controls and Settings, learned about Panel usage, found out about Kirki Toolkit, and got a suggestion on element organization while developing with WordPress Theme Customizer. If this way of creating WP themes seems interesting and you want to read more on the topic, you can still learn about showing or hiding sections depending on the page you’re previewing or about registering a new control type.

Due to its huge community, fast-paced accommodation to new standards and practices, it’s API endpoints and it’s powerful features, WordPress will probably remain the biggest player in the open-source CMS market. In many cases, custom software development is a better solution, but there are also a lot of scenarios where WordPress does its job perfectly, providing added value, flexibility, and speed. So why not use all that, if your project is suitable?

If you have any suggestions or improvements to this article, please feel free to use the comments form below. We’re happy to hear your thoughts!

Blog