WordPress: the fast way to add your own CSS on top of a theme

Background

I’ve worked in IT since the 1980′s but only started using WordPress a year ago. I am a big fan.

However, I am used to writing my own HTML and CSS. Some of the tags I often use such as <b> or <strong> and <u> do not “work” via the WordPress HTML editor on many themes. This is not a criticism of the themes, there are good reasons for “CSS resetting”. Some great themes also have limited admin options e.g. changing post link color to one of your choice may not be possible. You may want to “enhance” your page look e.g. boxing your page index. These are all good reasons to add additional CSS.

The recommended way to modify a theme beyond the available dashboard options is to create a child theme.

In my view, as a WordPress newbie, if you just want to add a bit of CSS then creating a simple plugin is easier and has additional advantages (see pros & cons). I use exactly the same “css plugin” on sites with different themes, and it works for me.

Just show me how to do it.

Disclaimer: I use this solution on version 3.x of WordPress. I do not guarantee that it will work as described for you on this or any other version of WordPress, or that it will not have an adverse impact. By using this solution or the code you assume all risk & responsibility for anything that happens.

Copy the sample plugin code at the bottom of this article, and replace the multi-line html comment with your own style sheet link or your own CSS in a <style> </style> block.

Save using a filename of your choice ending with “.php”.

From your WP admin dashboard: plugins -> add new -> upload -> activate

And you’re done. (ensure your pages display as expected – if not deactivate plugin, delete, re-edit and re-upload etc).

Plugin verses Child theme – pros & cons

If you are completely replacing the themes CSS or want to do more than just changing CSS don’t bother with a plugin.

Creating and Installing: Judge for yourself Plugin: above Child Theme: WordPress Codex.

Changing Theme: Plugin: no changes required, will continue to work. Child Theme: have to edit the info header to identify the new parent theme, switch theme and back to child theme.

Different sites, different themes No modification required to plugin. The child theme’s info header has to identify the parent theme. i.e. you will need a different version for each theme your sites use.

Performance If you use a child theme and wish to continue using CSS of the parent theme you will need to include an import statement in your child CSS. CSS Import has a negative impact on how quickly your page loads see page speed advice from Google et al. Server processing usually has far less impact on page speed than server to browser time. I accept that by itself CSS import may only have minor impact on page speed, but improving performance is an incremental process.

Previewing changes You can preview a child theme. You cannot preview your plugin – click activate and it is live.

Future-proofing There is a slim chance that changes to a future version of WordPress will mean your plugin no longer works. As long as a parent theme is updated to work with a new version of WordPress, a CSS child theme should work as well.

wp_head The plugin uses wp_head, and it works with all 4 themes I tested. However, the WordPress Codex states that this hook is theme dependent i.e. a theme may not provide a wp_head hook. This plugin will not work with such themes.

Although I have many years IT experience I am new to WordPress. If you feel anything I have said is inaccurate, or you can identify other pro’s and cons please post a comment and let me know.

Credits

Although I’m sure many others use this method, I got the idea after installing a simple plugin from perishablepress.com (page no longer available) to bounce some bad queries . This made me realise that with WordPress it is easy to create simple but useful plugins.

End

Author Andy W+

---

Skeleton plugin code

Use at your own risk. Please read the disclaimer above.

<?php
/*
Plugin Name: My added styles
Description: Add or override some styles
Author: Myself
Version: 1.0
*/
function my_added_styles() {
?>
<!-- REMOVE THIS MULTI_LINE COMMENT
 AND INSERT YOUR OWN CSS E.G.

<style type="text/css">
 b, strong{font-weight:bold !important;}
 u{text-decoration:underline !important;}
 .mylinks{color:blue !important;}
 .pageindex{background-color:#dff2f8;border:1px dotted #004d64;padding:12px 0 0 5px;}
<style>
OR YOUR OWN STYLESHEET LINK E.G.
<link rel="stylesheet" href="/pathTo/your.css" />

END OF MULTI-LINE COMMENT -->

<?php
}
add_action('wp_head', 'my_added_styles' );
?>