Working with Custom CSS in live preview

We discussed the theme customizer in the previous recipe. Adding custom CSS is part of the new theme customizer. Using this new feature can save us bundles of time compared to saving changes in CSS files and loading the site again to view the changes in styles.

In this recipe, we are going to look at the process of adding theme styles with the customizer and checking the changes instantly with preview features.

Getting ready

Special preparation is not required for this recipe. The necessary features are available on the WordPress dashboard.

How to do it...

We are going to add some simple CSS changes to the headers and the page body to see the custom CSS in action. To do this, follow these steps:

1. Log in to the WordPress Dashboard as an administrator.
2. Click on the Appearance menu.

3. Click the Customize option.
4. Click the Additional CSS tab to see the following screen. The default instructions will be displayed for use. You can click the Close link after reading the instructions:

5. Open the browser inspection tools and find the CSS class for the site title by right-clicking on the site and clicking the inspection tool on your browser. The following screenshot shows the CSS class using the inspection tool of the Chrome browser:

6. Add the following CSS code to the Additional CSS section to style the title of the site:

.site-title{ background: red; padding : 5px;}

This style change will be shown immediately in the header.

7. Click the Publish button to save the changes.

Now, if you visit the home page, you will see the style changes. Similarly, we can visit any page/post and use the customizer to add dynamic CSS for specific posts/pages.

How it works...

The Additional CSS tab is provided by default in the latest WordPress versions so that we can modify the CSS dynamically without using a third-party plugin. First, we add the following line of CSS code:

.site-title{ background: red; padding : 5px;}

This is a built-in CSS class that's used for the header of the site. We have modified it to change the background color to red with a 5px padding. Once the CSS has been added, customizer functionality enqueues the changes instantly and previews the change in real time on the site.

Once we click the Publish button, the CSS we added in this section will be stored in the wp_posts database table with a post type called custom_css. post_titile will contain the name of the theme while post_content will be the CSS we added in this field.

The Additional CSS section is specific to each theme. Once you change the theme, the Additional CSS section will be empty, until you save the custom CSS for that theme. This feature is a theme-specific setting. However, when we switch back to another theme, the styles that were saved for that theme will be retrieved from the database and applied to the site.

We can use this process to define and store dynamic CSS that's needed for each and every theme.

Once you've executed this recipe and tested the output, remove the CSS in the Additional CSS section and save the settings. We're doing this as we want to proceed with the original theme in the upcoming recipes.