Gary Gale

Posts about css

Customising WordPress Without Modifying Core, Theme Or Plugin Files

WP Customizer and that's what this plugin is for. When WordPress does support such a way, this plugin will thankfully be obsolete.

A standard WordPress install is incredibly powerful and flexible. For a lot of people, WordPress out of the box plus one of the stock WordPress themes is enough. But the possibilities for customization are endless; you can add plugins and other themes. Sometimes these do just what you want. Sometimes you need to ... tweak WordPress.

A very high proportion of the customization advice you'll find on the web starts with these lines ... add the following to the end of your theme's functions.php or even worse, advises that you modify the source code of your theme or your plugins. This is bad for many reasons:

  • Editing your theme's functions.php makes theme specific customizations; change your theme and your customizations will no longer get loaded.
  • When your theme and plugins get updated you'll find all your careful hand crafted customizations get overwritten and lost.
  • A lot of theme and plugin authors won't offer support for changes you might have made to the source code.
  • Your customizations might work; but you might also inadvertently make some other changes which will stop things working.

WordPress doesn't yet support a way for site specific customizations to be made and loaded without touching theme, plugin or core files; that's why I wrote WP Customizer and that's what this plugin is for. When WordPress does support such a way, this plugin will thankfully be obsolete.

screenshot-1 There's another, not entirely altruistic, reason behind this plugin. One of the most common support requests I get for WP Biographia is to help with clashes between someone's theme's CSS and the plugin's CSS. Once that's been resolved, the next question is almost always how do I load this custom CSS? The answer is now straightforward. Put your CSS file in a directory in the root of your WordPress installation, install WP Customizer, tell it to load custom CSS files and where to find them and you're done. No editing of functions.php. No learning now to hook into the wp_enqueue_scripts action, no learning how to call wp_register_style and wp_enqueue_style. It should all just work.

But WP Customizer works with more than just custom CSS files. You can also load custom PHP functions and custom Javascript and jQuery files as well. What's more, you can configure these to load just for your site's publicly visible front end, just for your site's admin pages or even both.

WP Customizer uses the file system as a data-store metaphor and allows you to main a library of common customisations that are independent of the theme and plugins you're currently using. Out of the box, the plugin looks for custom files to load in the root of your WordPress installation in a set of named directories which should be relatively self explanatory, functions, admin_functions, common_functions and so on for CSS and for scripts.

But you can just as easily create your own directory structure, put together in a way that makes sense to you, perhaps something along the lines of ... site/front-end/css, site/front-end/functions, site/admin/scripts and so on

... you're limited only by the limitations of your file system and the way of organising things that make sense to you.

screenshot-5 One final word of caution though. In order to use this plugin, you have to know how to write the code that lives in the customisation files themselves. That means knowing how to write PHP functions to exercise the WordPress API. How to write JavaScript and jQuery that works with WordPress. How to write CSS. This plugin can't help you with that. But there's ample tutorials and information out there on the interwebs to help you.

Just remember, when you read something that says just add the following code to your theme's functions.php, ignore this little piece of advice and add it a local customisation file and load that through WP Customizer instead. Your WordPress site will thank you for it someday.

To download or install WP Customizer, either search for WP Customizer from the WordPress Dashboard or go to plugin’s page on the official WordPress plugin repository. If you want to fork the source code of the plugin, you can find it on the plugin’s GitHub page at https://github.com/vicchi/wp-customizer.

Hacking WP Biographia's Appearance With CSS

WP Biographia WordPress plugin produces are easily customisable through the plugin's settings and options. The upcoming new version of the plugin will add to this, allowing almost limitless options for adding to the Biography Box though cunning use of the WordPress filter mechanism. But what if you're happy with the content of the Biography Box, but want to change the way in which the Biography Box looks? This is easily achievable with a little bit of CSS know-how.

The contents of the Biography Box that the WP Biographia WordPress plugin produces are easily customisable through the plugin's settings and options. The upcoming new version of the plugin will add to this, allowing almost limitless options for adding to the Biography Box though cunning use of the WordPress filter mechanism. But what if you're happy with the content of the Biography Box, but want to change the way in which the Biography Box looks? This is easily achievable with a little bit of CSS know-how.

The layout of the Biography Box that WP Biographia produces looks something like this ... `

Biography heading

Biography text

    `

    The main container is styled by wp-biographia-container-xxx, where xxx is one of top, around or none depending on your chosen Biography Box border option.

    The author's photo, if present, is styled by wp-biographia-pic; note that the photo size is not CSS style-able as it's specified by the plugin's settings and the plugin emits the style="height:size-px; width:size-pix;" for you based on that setting.

    The biography text and social media/contact links are styled by wp-biographia-text, the biography text by wp-biographia-text p and the links by wp-biographia-list and wp-biographia-list-xxx, where xxx is one of text or icon dependent on whether you've selected the links to be text or icons (oddly enough).

    The links are also styled by ul.wp-biographia-list-xxx li (again xxx is one of text or icon) and if you're using icons there's also .wp-biographia-list-icon a:link and .wp-biographia-list-icon a:visited. Finally, the icon size is styled by .wp-biographia-item-icon.

    All of this is in the plugin's CSS file which is usually located at /wp-content/plugins/wp-biographia/css/wp-biographia.css.

    Hopefully all of this will give you enough information to go on to add/tweak the CSS to your liking, but ...

    Where does the CSS you've tweaked go? There are several schools of thought on this.

    Firstly, you can just hack the plugin's CSS directly. It's quick. It's easy. But it's also fraught with risk. Not only are you messing with the plugin, which may have strange and unforeseen side effects, but your changes will be over-written when you update the plugin to a new version.

    Secondly, you can just hack your theme's CSS directly. But as with the plugin's CSS, this will get overwritten with an updated version when you upgrade the theme.

    The third way, is to add the CSS to a new file and to use the theme's functions.php file to load the CSS into your pages and posts. Now granted, the theme's functions.php file may still be overwritten during an upgrade but themes tend to be updated less than plugins and you are still able to isolate the CSS in a file which isn't part of the WordPress core, the plugin or the theme.

    So here's how you do this. Put the CSS you want in a file, let's call it custom.css, and place this into the same directory as the root of your theme. If you're using the TwentyTen theme for example, the path would look something like ...

    /wp-content/themes/twentyten/custom.css

    Now you need to get your theme to load the custom CSS. To do this you need to add a function to load the CSS to the wp_enqueue_scripts hook and then within that function, make the CSS get loaded in addition to the other CSS your theme uses. This code goes into your theme's functions.php and looks something like this ...

    add_action ('wp_enqueue_scripts', 'add_custom_css');
function add_custom_css () {
    $uri = get_stylesheet_directory_uri ();
    wp_enqueue_style ('custom-css', $uri . '/custom.css');
}