How To Customize Your WordPress Theme With The Styles Plugin

More often than not changing fonts, colors and images to your WordPress theme is all it takes to make it look unique and reflect your own brand.

If you’re familiar with coding, it’s fun to do it yourself, I quite love it. However, for those who have no sympathy for any coding whatsoever, or have other pursuits that take precedence in life, here’s a great plugin that comes to the rescue, the Styles plugin, by Paul Clark, Cindy, and 10up, freely downloadable from the WordPress.org plugins repository.

Here’s what it does, how to install it, and how to add support for it in your own theme.

Quick and Easy Theme Customization With Styles

The Styles plugin takes advantage of the WordPress Theme Customization API, introduced since WordPress 3.4. The Codex article on the WP Customizer, tells us that this tool:

… allows developers to customize WordPress’s Theme Customization admin screen. The Theme Customization screen (i.e. “Theme Customizer”) allows site admins to tweak a theme’s settings and see a preview of those changes in real time.

In other words, the Theme Customizer empowers end users to take control of their theme’s appearance. Setting styles using a simple-to-use interface and being able to envision those changes live as their are being made before saving them, can be very handy for theme users. At the very least, they can be spared the toing and froing between the admin panel and the browser window.

How Do I Find The Theme Customizer?

Finding the Theme Customizer is easy: in the Admin panel select Appearance -> Customize, and you’ll be landing on a two-panelled page. On the left, you find a list of customization settings, and on the right your WordPress site’s page. Each time you adjust a setting, the changes can be immediately previewed on the page to your right. When you’re happy with the result, save the changes and enjoy!

The Theme Customizer is enabled by default, allowing you to change site title and tagline, background image, choose between a static or a blog page as home page, and, since the recent 3.9 release, also customize the widgets area.

Themes can also ship with their own customization settings. In fact, the WordPress Theme Customization API is very developer-friendly, and it’s amazing how quickly theme designers learn to master it to make their WordPress themes more appealing to end users by offering them endless possibilities of customization.

WordPress Theme Customizer
WordPress Theme Customizer

Why Styles?

If it’s easy to add Theme Customizer features to a theme, why coming up with the Styles plugin to do the job? Well, one answer is that, although mastering the WordPress Theme Customization API involves a light learning curve, it also requires one to code some chunks of code numerous times. A plugin like Styles automates this job, at least when dealing with the most common customization tasks, which is great both for developers and users.

Here’s what Styles can do, according to what’s written on the Styles Home Page:

Anyone can customize every detail of their site using Styles. Every font, color, article, and headline are put under your control. Each attribute of your site can be uniquely customized with your style. Using Styles is like being an artist and your site is your canvas. Rather than trying to figure out how everything is going to come together while sifting through code, Styles lets you experiment and play with your design. Every change gives you instant feedback. This way, you can see what the changes will look like before you commit them to the live version of your site.

Not bad!

How Do I Install Styles?

The Styles plugin can be installed and activated like any other WordPress plugin. From the Admin panel, go to Plugins -> Add New. Type Styles in the search box, select it from the WordPress.org repository list, and install it. After it’s been installed, select it on your Admin screen, and activate it.

WordPress Plugins Screen in the Admin Panel
WordPress plugins screen in the Admin panel

I Installed Styles, But Nothing Has Changed In My Theme Customization Page. Why?

Styles is not immediately operative out of the box, however. There’s a simple explanation for this.

In fact, this plugin dynamically adds CSS style rules to your WordPress theme. CSS styles are applied by selecting the elements that need styling on the HTML page. Although the HTML in most WordPress themes uses standard class names and some common structural elements, it’s a obviously far-fetched to presuppose that all themes are coded the same way and all elements use the same class or ID names.

As an example, if one theme uses a class of wrapper and another theme uses the class of container on a HTML element, the CSS style that targets that same element in the former theme will reference the .wrapper class, but to apply the style to the latter theme, the CSS rule should target the .container class.

Styles solves this problem by including an additional plugin to add specific theme support.

Theme Support For The Styles Plugin

The team of developers behind Styles freely support the WordPress default themes. In fact, you can find the plugin that adds Styles support to the Twenty Ten, Twenty Eleven, Twenty Twelve, Twenty Thirteen, and Twenty Fourteen WordPress themes.

To add the Styles support plugin to the Twenty Fourteen theme, for instance, simply head over to the plugin’s page on the WordPress.org plugins depository, download it and install it in your plugins folder. Or, type styles twenty fourteen on the Add New plugins search box in the Admin panel and go from there.

Once the Twenty Fourteen theme, Styles and the Styles support plugin for the Twenty Fourteen theme are activated, head over to the Theme Customization page. You should now see how your power to implement instant changes to your theme at the click of a button and previewing them in real time has exponentially and immediately increased.

On top of those provided by Twenty Fourteen by default, now there are Theme Customizer sections for global styles (e.g., inner area background color, default text color and size, default link colors, etc.), header styles, menus, posts, comments, etc.

What If I’m Not Using A WordPress Default Theme?

If you’re not using one of WordPress default themes, then you need to add support for Styles yourself, or hire someone to do it for you. The Styles team has a great series of video tutorials to teach you just this. Here’s how to proceed using my Tonal Child theme.

Step #1: Duplicate The Styles Support Plugin

Go to the plugins folder of your WordPress installation and find the styles-twentyfourteen folder (if you followed along and added the Styles support plugin for Twenty Fourteen earlier, this folder and its contents must be in the plugins’ directory of your WordPress installation. If the support plugin has not been installed, download it from the WordPress.org repository). Duplicate it and rename it styles-yourthemename, where yourthemename needs to be replaced with … your theme’s name. I called my copy styles-tonal-child, because I’ve added Styles support for my Tonal Child theme in my local installation of WordPress.

Step #2: Replace Theme Name

Open the readme.txt file inside the new copy of the plugin’s directory in a text editor and replace all instances of Twenty Fourteen with Tonal Child (or the name of your theme), and all instances of twentyfourteen with tonal-child. Save your changes.

Rename the styles-twentyfourteen.php file inside the new copy of the plugin’s directory as styles-tonal-child.php, open it in a text editor and perform the same operation as above. Save your changes.

At this point, if you head over to your plugins admin screen, you should see the Styles: Tonal Child plugin. Go ahead and activate it.

Step #3: Replace CSS Selectors

Next, go to Appearance -> Customize and lo and behold … an enormous bunch of customization panels are just there at your finger tips.

However, it’s not over yet. In fact, there could be some differences between the CSS selectors used for the Twenty Fourteen theme and those used in the Tonal Child (and parent) theme. Because of this, it’s possible that when you select a style in the Customizer this doesn’t get applied.

To remedy the situation, find customize.json in the styles-tonal-child folder and open it in your text editor. It contains a bunch of JSON objects, each corresponding to the sections in the Theme Customizer panel. Inside each section, you find the selectors used for the CSS to style the page elements included in the relevant section.

For instance, let’s say I’d like to change the color of the search box in the header area. The styles for this element are in the Global Styles section in the Theme Customizer. If I set the style for this element using the color picker control in the Customizer, I realize that the element’s style remains unchanged.

WordPress Theme Customizer in the Tonal Child theme
WordPress Theme Customizer in the Tonal Child theme

It’s time for me to tackle customize.json and fix this. I locate the Global Styles JSON object first and find out that the selector for the search box in the header area in this file doesn’t match that used in the Tonal Child HTML document. I use Firebug for Firefox to do this, but any good web developer tool would be just fine.

"Global Styles": [
/* Global */
{ "selector": "#page", "type": "background-color", "label": "Inner area" },
{ "selector": ".search-toggle,.search-box, .search-toggle.active", "type": "background-color", "label": "Header Search" },
{ "selector": ".search-toggle:hover", "type": "background-color", "label": "Search Toggle Hover" },
{ "selector": ".search-toggle:before", "type": "color", "label": "Toggle Before (Icon)" },
{ "selector": "#page", "type": "text", "label": "Default" },
{ "selector": "#page", "type": "color", "label": "Default" },
/* Link */
{ "selector": "#page a", "type": "text", "label": "Default link" },
{ "selector": "#page a", "type": "color", "label": "Default link" },
{ "selector": "#page a:hover", "type": "color", "label": "Default link" },
{}
],

The JSON file uses .search-toggle, .search-box, and .search-toggle.active as selectors, and the Tonal Child theme uses .search-field instead.

What I then need to do is to replace the existing selectors with the Tonal Child search-field class selector.

{ "selector": ".search-field", "type": "background-color", "label": "Header Search" },

After saving the JSON file and refreshing the browser, I try changing the background color of the search box, and guess what? It works!

WordPress Theme Customizer in Tonal Child Theme After Adding Styles Plugin Support
WordPress Theme Customizer in Tonal Child Theme after adding Styles plugin support

To conclude, it’s a matter of checking which styles don’t get applied using the Theme Customizer, finding the relevant selectors in the Tonal Child theme, and adding them to the customize.json file in the relevant section thereby replacing (or adding to, as the case may be) the existing selectors.

What If I Want Things To Go Back To The Way They Were?

Of course, it can happen that you’ve made a bazillion number of changes to your theme using Styles and the Theme Customizer and you’re happy with them for a while. But then, your best friend, in a fit of total honesty, informs you that the yellow you chose as background color and the purple you chose for the text color don’t exactly go together that well, and the same goes for a bunch of other modifications you made to your theme.

As annoying as this negative feedback is, it cannot be ignored. You’d like to go back, but as it often happens in life, it’s hard to remember the way things used to be and impossible to erase what’s been done.

Luckily for us, we’re not dealing with brute reality, but with the poetry of WordPress code. Going back with the Styles plugin is a breeze. Here’s how you do it.

  • From the Admin panel go to Settings -> Styles
  • In the Reset Customizer Settings box type RESET and press Save

    WordPress Styles Plugin Reset Screen in The Settings Admin Panel
    WordPress Styles plugin Reset Screen in the Settings Admin panel
  • If all goes well, you receive a reassuring message informing you that the Customizer settings have been reset to defaults.
  • Check for yourself by viewing your theme in a browser and let yourself go to a sigh of relief.

To Sum Up

Modifying a WordPress theme to your liking can be done in many ways. If you don’t feel that coding your way in is your thing, using a handy plugin like Styles puts a ton of styling options at your fingertips in a matter of seconds.

From the Styles’ web page, here’s a list of the plugin’s features:

  • Instant previews
  • Text size
  • Google Fonts with previews and search
  • Text colors
  • Border colors
  • Background colors
  • Hundreds of options
  • Consistent interface and names in every theme
  • Built on WordPress customizer, so Styles grows as WordPress grows

I’m passionate about coding and styling themes, but WordPress is a content management system (among other things), and automating as many processes as possible to make it easier and easier for end users to tweak and personalize themes is certainly a central part of WordPress’ enormous success worldwide.

And you, have you used the WordPress Theme Customizer? Have you tried expanding its options using Styles? I’d love to hear from you in the comments below.
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s