4.4 Theme features and customization
WordPress provides a long list of optional features the themes can choose to hook into.
WP Rig hooks into almost all of these features to give you a boilerplate starting point, where you can either customize the features to fit with your particular theme design or disable them if you don’t want them.
These features also serve as a good introduction to how the object orientation and modularity of PHP and WP Rig work. So let’s take a closer look both at the frontend, the backend, and how the code works.
We’ll start in the Customizer. Themes can choose to add support for a custom logo and a header image. The custom logo is found under “Site Identity.” At the top, you can select a logo, select an image, and crop the image to fit the specification of the theme. Then, it appears somewhere within the theme layout.
This functionality, along with all the other PHP modules, are found under the “inc” folder. Here, you have specific modules for each individual function of the themes. You can see below, we’re looking at the custom logo, which is found under “Custom_Logo” and “Component.php”:
Toward the bottom of this file, you’ll find the actual setup with the add_theme_support() function. This is the standard PHP code. Here, we then define the height, width, flex-width, and flex-height settings for that particular feature. You can change this to anything you need. There are also some additional parameters you can add in if you want.
This is how the PHP modules in WP Rig work. We used to place this kind of functionality either in “functions.php,” or maybe in something like “template-tags.php.” In WP Rig, we’ve broken them out into their own modules and they are completely standalone. This way, they are easy to find, and you contain functionality within their own files.
The same thing goes for other functions.
Here, we can add a header image to the sites:
That functionality sits under another component called Custom_Header (inc/Custom_Header/Component.php). Inside that Component.php file, we first add theme support for a custom header, and then we have all the different settings available to us.
So this is where you would make changes to that custom header if you wanted it to display differently or behave in a different way:
Editing the Block Editor (Gutenberg) settings
The block editor, AKA Gutenberg, has also introduced new features themes can hook into. They include things like font sizes and custom colors for a specific element.
Below, we have a paragraph. We can set a custom font size, and we can also set both a background color and a foreground color for the contents within any one of these. All of this can be defined by the theme itself.
This is all found in the “Editor” component. Here off the top, we find theme support for editor styles. That means the theme ships with its own style sheet for the editor to customize the editor experience. That’s what you find under the editor folder (/inc/Editor/Component.php) under style and sources:
There is also theme support for WP block styles, where we include the bundled styles for blocks that come with WordPress. Finally, there’s added theme support for “align-wide,” which allows us to align images “wide” or “full-wide”, outside of the regular content.
Scrolling down, you’ll see support for the editor color palette. These are the colors you see in the sidebar of the Block Editor. Here, there are a handful of different colors defined, and you can see how they work:
Toward the very bottom, we also have theme support for editor font sizes. It’s the same concept: an array of font sizes that you can customize to fit with your particular needs.
Note: When you add custom colors and custom font sizes, you also need to add adjoining CSS to match. That CSS is found inside /assets/css/src/_custom-properties.css.
Below, you can see the custom editor colors. They’re all defined as custom properties (or CSS variables). Same with font sizes. The colors and font sizes are applied in “content.css”:
If you scroll further down inside content.css you’ll see “Custom block colors.” We have the CSS classes .has-theme-primary-color, .has-theme-secondary-color, and so on. And all these colors and sizes are defined.
When you use these features remember: you also have to make changes to your CSS accordingly.
Other functionalities defined in the “/inc” folder
Now that you see how these PHP modules work, you can read through the list of folders inside the “/inc” folder and kind of get an idea of what these different functionalities are.
A few examples: “Image_Sizes” controls image sizes, “Nav_Menus” controls nav menus, and “Post_Thumbnails” activates support for post thumbnails. “Sidebars” is where we define the actual sidebars.
(Note: the Lazyload module has been removed since it is now supported by WordPress core functionality.)
You can see the /inc/Sidebar/Component.php file above. Any time you want to make a change or add additional features, you do it inside these files by just extending what’s already there, copying functions, and then getting everything to work.