Getting Started With the Customizing WordPress Theme

Let’s say you have a client whose company is so large that it has multiple divisions. Now let’s imagine that this client wants each division to have its own website on a dedicated domain. Each site should have the same format, but a different colour scheme. In this case, it is better to use the customizing WordPress theme (also known as Theme Customization API ) and I would like to give you a simple example of how to embed it in a theme. This is the complete guide to customizing WordPress themes.

By the end of this article, we will have a customizing WordPress theme that contains several modifications with clear templates in the code, allowing us to develop it further.

 

Create a test site

Make sure your test site is running the latest version of WordPress – WordPress 4.3.2 at the time of writing. In fact, for this example, we only need the latest WordPress and the above theme installed and activated: After you install the customizing WordPress theme, log in to the admin panel: you will see that in the “Design” section there is a ” Customize ” link. This item exists by default; I don’t need to register it or declare support for it. Even if no mod is registered in our customizing WordPress theme, this link will still be useful, because the customizing WordPress theme core automatically adds some settings for the site, site description, etc. to this item. ” Customize ” is the section we’ll be working on, so click on that link.

Customizer Panel

We get directly into the customizer. Its hierarchical structure has three levels: panels contain sections, sections contain options, and options are data that are managed through controls in the interface. If this is not entirely clear to you, take some time to study the documentation related to panels, as well as sections, as well as settings and controls. You can register the panel first and then go to /wp-admin/customizer.php to see if the panel works. If you do not find this panel, do not worry: the panel will not be displayed if it does not already have any parameter and control registered in it.

Panels

Entering the customizer panel, we immediately see two sections of the menu on the left: ” Site Properties ” and ” Body “:

Sections

If we click on the ” Body ” item, we will see that it contains several sections: ” Colors ” and ” Layout Options “. As a reminder, my theme for the ( customizing WordPress theme ) contains code that adds a ” Body ” item, ” Colors ” and ” Layout Options ” sections :

Parameters

If we go to the “Colors ” section, we will see that I have registered several parameters and controls that can be used to change the colours of the customizing WordPress theme. By default, I set the values ​​to “Orange ” and ” Black “, which are entered initially in the corresponding fields:

Controls

Panels, sections and options have a hierarchical relationship. Controls are also part of this hierarchy.
They are displayed in the customizer interface for each parameter. To do anything with a customizing WordPress theme mod, we must register both a parameter and a control for it.

WordPress Default Elements and How to Remove Them

Let’s go back to the very top of the panel and then go to the ” Site Properties ” section. Customizing WordPress theme adds this panel by default, skips the section level and displays several options at once, such as ” Site Title ” and ” Site Icon “: In fact, I removed a bunch of panels, sections, and options that WordPress adds by default. I will just give an example of how to unregister them. Our sample theme contains a class called CSST_TMD_Customizer, which is where I tell the customizer to change this customizing WordPress theme mod.

I chose to remove these elements because they illustrate well the hierarchical structure I was talking about. I determined which elements to remove by examining the markup code for this area of ​​the customizer. I used the data-customize-setting-link attribute of this control ( you can see it in the screenshot above ).

For one thing, forgive me: removing nav_menus will display a warning in debug mode. 

Defining New Panels, Sections, and Options

I will define new panels, sections and options only once in a huge array so that the rest of the theme mods can use them. This will allow us to add these options to the customizer and output them with CSS.

Our customizing WordPress theme contains a class called CSST_TMD_Theme_Mods, in which I create an array of panels, sections, and options to add to the customizer. Let’s walk through an example where we add a Body panel, a Colors section to that panel, and then add a Background Color option to that section. In other words:

This is done to allow for many nested nodes and a long array definition. In projects with a lot of customization, I often use transition elements to avoid performance issues with a large number of loops. I also split the array into multiple functions for each panel to make it easier to read and debug.

But you don’t have to do it that way. You can make it possible for a rule to apply only if certain classes are present in the body section. You can opt-out of using a multidimensional array and declare your parameters one at a time.

If all my looping makes you dizzy, check out the excellent Twenty Sixteen customizing WordPress theme, which logs Settings options with no loops at all. I don’t use this technique because I don’t think it’s too compact. For example, the line color_scheme is present in this file in 83 places.

Passing Theme Mods to the Customizer

Adding our settings is very similar to removing the main settings from the customizer. We have to hook into the customizer_register, only this time we’re adding elements instead of removing them. And the whole process of customizing WordPress theme is done.