Pimping Your WordPress Widget Titles

With a few lines added to your WordPress theme’s style sheet you can transform boring widget titles into a smorgasbord of colors, small fonts, big fonts, backgrounds, borders – you name it. This post will show you how.

But please no flashing text (i.e. blinking text).

WordPress themes normally apply the same style to all of the widget titles within your sidebars.

With some additional entries to your theme’s style sheet, you can give each widget title its own unique appearance, transforming the (boring) version above to:

How do you add entries to your theme’s style sheet?

It’s as easy as 1, 2, 3 & 4.

When adding entries to your theme’s style sheet, it is best to add them after the existing content.

The style sheet entries used to achieve the above are:

.widget_recent_entries .widgettitle
{
color: blue !important;
font-size: 1.7em !important;
}
.widget_categories .widgettitle
{
color: white !important;
background-color: blue !important;
font-weight: bold !important;
padding: 10px !important;
}
.widget_pages .widgettitle
{
border-bottom: 2px solid black !important;
}
.widget_calendar .widgettitle
{
font-variant: small-caps !important;
}

So how does this work.

When a widget is rendered to HTML, it is done so using the following format:

<li id="widget-id" class="widget widget-specific-style">
<h2 class="widgettitle">Widget Title Text</h2>
...
</li>

Each widget has its own unique ID and class specific style, as well as the generic ‘widget’ class.

If we look at the recent posts widget, we see:

<li id="recent-posts" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
...
</li>

So we can style any ‘widgettitle’ classed item which follows a ‘widget_recent_entries’ classed item as is our want.

So to achieve our pimped version, we added the following:

.widget_recent_entries .widgettitle
{
color: blue !important;
font-size: 1.7em !important;
}

The period character (.) before the names ‘.widget_recent_entries’ and ‘widgettitle’ is critical since this is used to denote a class name.

You will note the use of “!important” which forces that specific setting to be used. If this was not used, then the entry may be overridden due to the rules used to determine the precedence of style sheet entries.

Now consider the categories widget, we see:

<li id="categories-227973261" class="widget widget_categories">
<h2 class="widgettitle">Categories</h2>
...
</li>

So to pimp the categories title we add the following:

.widget_categories .widgettitle
{
color: white !important;
background-color: blue !important;
font-weight: bold !important;
padding: 10px !important;
}

Now the categories HTML is slightly different to the recent posts widget in that the ID is qualified by a number, 227973261 in this case. The recent posts widget can only be used the once in your sidebars, whereas the categories can be used multiple times, and the ID, which is automatically generated by WordPress, uniquely identifies that instance of the widget.

Using the class name within the style sheet will cause all widgets with the same class to be affected. So if we added another Categories widget to the sidebar, its title will be styled the same.

How can you pimp the category titles differently? I’m glad you asked.

If we look at the page source we will see that the categories widgets are rendered as:

<li id="categories-227973261" class="widget widget_categories">
<h2 class="widgettitle">Categories</h2>
...
</li>

<li id="categories-234397751" class="widget widget_categories">
<h2 class="widgettitle">Another Categories</h2>
...
</li>

We target individual category widget instances by using the widget ID instead of its class, so the style sheet entries become:

#categories-227973261 .widgettitle
{
color: white !important;
background-color: blue !important;
font-weight: bold !important;
padding: 10px !important;
}
#categories-234397751 .widgettitle
{
color: white !important;
background-color: red !important;
font-weight: bold !important;
padding: 10px !important;
}

The hash character (#) is used to denote an ID of an item within the page. So, we are styling any item which has a class of ‘widgettitle’ which follows any item with an ID of ‘categories-227973261 or ‘categories-234397751′.

So now our sidebar looks like this:

Whilst the widget appears within your sidebar, the ID will not change. However, if the widget is deleted and then recreated, the ID will change. So any existing ID based style sheet entries will no longer have any affect.

I would save the original theme’s style sheet and also record any changes you make to this file. This will allow you to easily identify what changes you have made and why, so if your theme is updated, which will replace the contents of the style sheet within the theme, you can easily remake your required changes.

Have fun pimping your widget titles!

This post was inspired by a comment posted on our Simple Image Link Plugin page. The original comment is here and my response here.

13 Responses to “Pimping Your WordPress Widget Titles”

  1. MAD, great post, I am very glad to see you guys taking my advice about creating posts of how to do things, especially HTML stuff. You know I am completely lost when it comes to all that stuff. Great job!!

  2. al says:

    THANK YOU! I was about to scream till I found this!

  3. Cheers!
    I made with photoshop anime myspace pictures.
    take a look at them:
    http://tinyurl.com/5w2eqc
    Thank you for your website ;) xxoxo

  4. Andy says:

    Thanks so much!! I’ve been looking for hours for this answer….!!!

  5. Sandra R says:

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  6. I love your site. :) Love design!!! I just came across your blog and wanted to say that I

  7. eliot says:

    my posts used to appear individually in the sidebar, so i could see each of the titles and click on them to go directly to it. Something happened and now i can only see my 3 categories: blogs, sites, campaigns…and when i go to each i have to scroll down the page to see all the entries… help!

  8. [...] learned how to do this from reading a year old post on blog-well.com: Though it’s not perfect, it’s starting to shape up.  In the future, I’m hoping to try to [...]

  9. pemart says:

    thanks.

  10. поиск по базе билайн, поиск по базе мтс…

    [...]Pimping Your WordPress Widget Titles | BlogWell[...]…

  11. Great tips this will make website look even more beautiful. Also it is easy to separate widgets.

  12. Faiz Ahmed says:

    Thanks bro.. very helpful tutorial.

  13. If you wanht yor website tto bbe always remembered bby the visitor then make sure your website is completely professional.
    Specializedd terms annd professional phrases should be thee ttop priority of
    your keyword research campaign. It’s a fact: 85% of the
    small business owners will be out of business 5 years from now.

Leave a Reply