Styling WordPress Plugins: Theme Designer Tip

computer screen showing lines of code

One of the great features of WordPress is that there are literally thousands of plugins that have been designed and coded to work in conjunction with WordPress Themes. You can find a plugin to do almost anything, at least to some degree.

Finding plugins is straightforward. Getting plugins to work, in contrast, can range from drop-dead easy to hair-pullingly challenging. This is partly because the plugins themselves may perform very simple functions, or very complex functions, and partly because the plugin developer may provide clear, simple instructions, or less-clear instructions, or no instructions.

Developers also operate from very different vantage points in terms of their assumptions re: what you bring to the table. Most assume you’re well-versed in HTML and CSS at minimum; many assume you know PHP and still others assume you’re a whiz at all things AJAX, etc.

But, assuming for the sake of this post, that you’ve gotten the plugin to work, the next hurdle that sometimes manifests is how to style the plugin. Once again, sometimes it’s quite simple—the developer provides a user-friendly interface that offers everything you need—I’ve experienced that on at least 30% of the plugins I’ve used! Unfortunately, more often, figuring out where and how to make style changes turns into it’s own little project. Follows are some things to try when things aren’t easy or intuitive.

First, Check the Obvious

After plugins are activated they may generate an entire new section in your Dashboard Menu, or they may show up as a link buried in your Settings or Tools sections. You have to find the links and see what they have to offer. Unfortunately I’ve come across several plugins that provide plenty of options that you can set, none of which affect how the thing looks. In those cases you have to dig deeper.

Try the Readme.txt

Go to the Plugins Editor page, select the specific plugin, and take a look at all the associated files. You’re looking for the readme.txt file. Most of the time the readme.txt simply repeats the descriptions and instructions you already saw when you found the plugin, but sometimes there’s additional helpful information. Once in awhile the readme.txt will directly address the question of styling.

Some will say that you can duplicate the css file that comes with the plugin, place it in your theme directory and change the styles from there. (Keep the same name for the file. The copy in the Theme Directory will override the copy in the plugin’s directory.)

Some will indicate that you can make changes directly to the plugin’s css file. I always comment out the original style so that I can easily locate places I’ve made changes and see what the original styles were. Then I make a copy and save it to my computer so that if/when the plugin updates, I can reconfigure the new CSS file quickly.

Some will say that no styling has been provided and you can write your own! That means you have to look at the source code in your browser and figure out the relevant divs, ID’s and classes to create styles for. (Don’t be surprised to see long and compound names for ID’s and classes.)

Some, alas, will have nothing at all. At that point you can go directly to the CSS file that came with the plugin and see what you think. You might be able to go ahead and make a copy of it or make changes in it, as noted above. (Always add a comment containing the original style, and make a copy of the original file to your computer, just in case. That way if you screw something up you can fix it quickly.)

Create some CSS Around the Plugin

Sometimes the CSS file is so baffling that you can’t figure out what to style. Sometimes styles have been applied to groups, only one item of which you want to change. Once in awhile there’s no css file at all. In these cases you can often create a new div to place the plugin within, and then create styles for that div’s headers or paragraphs or margins or lists, etc.

Check the Developer’s Website For Help

Most plugin developers provide links to their websites. Support ranges from non-existent to “send me an email” to support forums. (I have run into 2 plugins recently that I liked but ultimately didn’t use because there was no contact mechanism to the developer at all. I don’t want to use something to solve a particular problem or create a particular effect, then have it stop working when WordPress upgrades. I fear that if the developer can’t be contacted, he or she may no longer be supporting the plugin.) Most developers offer some degree of support and will answer questions if they can, either directly or through a forum. Like everything else, their ability to help depends a lot on how close or far-removed their skill set is from yours. But it’s worth a try and I’ve had some great experiences with helpful developers.

Little Things Can Make Big Differences

Sometimes small style adjustments can make all the difference in blending a plugin into the feel and style of your theme. Plugins don’t always make that easy to do, but it’s always worth trying. You’ll find it gets easier after you’ve done it a few times!