custom-style

A simple Wordpress plugin allowing you to add some CSS rules to customize your current theme to your liking.

Download

Download latest version custom-style-1.0.zip or browse for older versions or other compression formats.

Introduction

You are using a theme in Wordpress and it looks marvelous good. Well, almost! If you could just change the main color to match your liking, company style whatever ….

It’s actually easy in Wordpress, cause you have direct access to your theme’s style files. Just use Appearance -> Editor inside the Dashboard and there you go. That’s great until you update the other day your theme cause a new and improved version has been released. Then all your custom changes are gone and you have to start from scratch again.

A much better way is to save additional CSS rules in the blog’s database and include them inside a < style/> element. Of course there must also be a way to enter those rules via the Dahsboard. And this is exactly what this plugin is all about!

Requirements

  1. Tested against version 2.8.4 while older versions should do as well.
  2. You need to have permissions to upload something into your blog’s plugins folder.
  3. You need to have Administrator rights in your blog
  4. Installation

    1. Upload custom-style into folder /wp-content/plugins/ as usual
    2. Activate plugin through the Plugins’ menu in your blog’s Dashboard

    Usage

    When activated in your Dashboard, a new submenu of menu Appearance will show up as shown in the screenshot. This submenu will nevertheless only show up if are administrator rights (being more precise: if you have the right to change the theme of your blog).

    Click on submenu Custom Style to get confronted with a dialog window allowing you to essentially enter and save text. The text you typed in will be included by every page containing the wordpress trigger wp_head. That’s usually every page although it depends on your theme’s implementation — a theme designer may have deliberatly ommited that trigger.

    Your text will be interpreted as CSS styling rules. To enforce this is your text wrapped inside a <style type="text/css" /> container tag.

    When satisfied with your changes click button save to make your CSS rules permanent in your blog’s database. Then visit your blog again and checkout the HTML code generated (make sure to avoid any caching issues). The generated code should now look similar as shown in the scratch pad example below.

     <html>
       <head>
          ...
          <style type="text/css">
            your CSS rules
          </style>
        </head>
     ...
     </html>
    

    What text can I enter in the dialog field?

    You can enter any text you like in the plugin’s text dialog field. There is no need to escape characters. There is especially no need to escape character < if there is a need to use this character.

    There might be a need to refer to your blog’s meta information. For example, you may want to refer to some of your theme’s folders or files. To support this desire, the following syntax is being used.

    1. Every occurance of {bloginfo:word} is replaced with the string produced by calling bloginfo("word").
      1. To support readability, any amount of whitespace characters between ‘{’ and ‘bloginfo:’ and before ‘}’ is allowed. word can be empty in which case the blog’s title will be replaced. If an unsupported word is being used, the empty string will be subsituted for the whole expression.

        Why not using existing plugins?

        A lot of plugins have meanwhile been developed for Wordpress and so there are plugins dealing with this problem. None of the plugins I have checked were usable for me though. Here’s the main problem I was faced with and which eventually lead to the development of this plugin:

        In my specific case, I’m not using <img /> tags in HTML. Rather I’m using <div /> and style the background with an image. Here is an example:

        #header {
           background-image: url( ../images/bg.jpg );
        }
        

        Notice the usage of the relative URL. My CSS files are within a sibling folder of my theme’s image folder. The CSS code above works well cause the URL is relative to the CSS files which is always taken from the same URL location.

        This is not any longer the case when rendering additional CSS rules directly in HTML. There must be a way to use an absolute path. One possible way is to move images out of the theme and inside a static folder of my web server. The downside of this approach is that you need to have enough permissions to change your web server…

        A much better way is to let the plugin generate the URL to your theme. The CSS rule above woud be written as

        #header {
           background-image: url( {bloginfo:template_url}/images/bg.jpg );
        }
        

        where {bloginfo:keyword} gets replaced with the result of bloginfo("keyword") on the fly. Function bloginfo() is a PHP function provided by Wordpress to query some meta information about the blog. In particular it allows to query the URL of the current theme via bloginfo("template_url").