Why Adding Custom Styles to WordPress Plugins is a Bad Idea

Why Adding Custom Styles to WordPress Plugins is a Bad Idea

“What? I can’t style my WP plugins? Oh no!”

Depending on how you go about it, adding custom styles to WP plugins can lead to a real clunker of a site. But don’t fret, although it is a bad idea to add styles to the plugins you have installed on your WP site, there is a better way. Let’s take a look at why you shouldn’t, then we’ll see how you can.

Reason #1

The #1 reason why you should never add custom styles to your WP plugins is: plugin updates. Any styles you may have added directly to plugins will very likely need to be added again when you update the plugin. This applies both to styles added to the plugin’s style-sheet (either uploaded via FTP, or in the plugin editor), and styles added via a custom style area that may be included in the plugin settings.

Going back over each and every plugin, each and every time you update them, to rewrite your custom styles, can be a very tedious task. It can get even more tedious if you forgot to write them down in a text file so you can get to them again when you need to. And then there’s that everlasting frustration that can happen if you forget where you actually saved that file on your computer, and/or didn’t think to make backup copies of the plugin style-sheets before overwriting them.

Reason #2

The 2nd reason is: page load time. Most plugins will inject your custom styles into the <head> of your pages. That means that the code will load in its entirety every time your users navigate to a different page on your site. When this happens to be a page where the particular plugin is active, that can actually be a good thing :-) But, most plugins are not active on every page.

Avoiding code injection where it’s not needed is a golden rule of thumb. This applies to both WP plugins and themes too. Every bit of code that is called takes time as the query is routed to and from your database. Granted, we’re talking about a tiny fraction of a second. But tiny fractions quickly add up to bigger fractions, and then whole seconds. Not good.

Reason #3

The 3rd reason is: your site rank. Page load times are a big factor when ranking in search engines. We all know Google definitely takes that into account; see Google Webmaster Tools – Site performance help for more.

If your pages load slower than they could, they don’t get ranked as well as they could. If your pages don’t get ranked well, neither does your site. When your pages and your site don’t rank well in search engine results, you don’t get the traffic you want or need. And there goes your PPC budget. And if you’re still using PPC, it may be time to update your marketing strategy :-) But I digress…

Reason #4

Reason #4 is: user dissatisfaction. When users do get to your site, the first thing they will notice is how long it takes for that first page to load. If the page header is full of scripts that don’t have to be there (i.e.: style rules that have no impact because the applicable plugin isn’t active there), that’s load time added. First time visitors are generally the most critical of this. They usually just leave.

What happens when first time visitors leave your site? Your bounce rate goes up (see the 2nd paragraph of Reason #3). Those who do stay, or who come back for more than one visit, are those who either don’t notice the delay or who judge your content to be worth the slight irritation. But, the bigger the fraction of a second delay due to unnecessary scripts, the more noticeable that delay becomes, the more irritating it can get for your users. They may eventually decide that it’s not worth it, and not come back.

Reason #5

Reason #5 is: theme changes. Imagine this scenario: you added a bunch of custom styles to a bunch of WP plugins and got everything looking pixel-perfect… and then decided to change your theme. “Oh dear Lord, what happened to my site?” (that’s what I said the first time I did that). Everything gets all out of whack, but nothing has really happened to the site. All your plugins would still be styled for the previous theme, which could be quite different from the new one.

Here again, much as when you update your custom-styled WP plugins, you have to go back and style them all over again to fit the look and feel of your new theme. Heaven forbid you decide to change your theme a third time!

So, what can you do?

Happily, there is an alternative to adding custom styles directly to your WP plugins: add them to the style-sheet of your active theme. How does this help? Let’s see…

  • you’re free to update your WP plugins with zero risk of losing your customizations
  • the theme style-sheet is called by default on every page of your site, so there are no additional database queries, and no added lag-time
  • no negative impact in search engine results due to unnecessarily slow page load times
  • faster-loading pages means a lower bounce rate and an increase in user satisfaction (better search engine results)
  • all your custom styles are in one place (your theme style-sheet) which makes adjustments due to theme changes a whole heck of a lot smoother, and quicker

Have fun customizing in a way that’s a lot less tedious, a bit more search engine friendly, and with little to no negative impact on your users.