Creating & Styling Sidebar Widgets in WordPress

wordpress-sidebar-widgets

The first time I saw WordPress widgets I thought “what on earth are these useless pieces of dog’s do?” Now I think that widgets are awesome website building devices that should have pride of place in any website designer’s toolbox.

What are WordPress widgets?

WordPress widgets are self contained bits of website code that can be applied to a widgetized area via an easy-to-use intuitive interface.

wordpress-widgets

A fresh install of WordPress will give you some bog-standard widgets that you can drag-and-drop into your sidebar. For example:

  • Search widget adds a search box
  • Categories widget lists your blog categories
  • Recent Posts widget lists the x most recent blog posts you’ve written (you decide how many)

… and many more. As you are no doubt aware, the Recent Posts widget is one of the most widely used WordPress widgets!

But you can also add other amazing widgets in your sidebar by way of certain plugins. For example:

  • Latest Tweets lists your last x tweets (you decide how many)
  • Facebook Like Box shows how many people like a certain Facebook page (the fan page for the site) and which of your friends like it
  • Newsletter Signup Box enables visitors to join a mailing list

The list is endless. I use Genesis theme framework (affiliate link) which adds a lot of useful widgets. One widget can, for example, show featured or recent posts with thumbnail images.

Why should you use WordPress widgets?

Ease of use is the reason you should be using widgets. Not because it’s easy for you to use; but because it’s easy for your clients to use.

I always try to design websites that the client can edit because constantly updated quality content is the key to a successful website.

Of course, using WordPress as a CMS (Content Management System) is a great way to enable a client to create, edit and delete pages easily. But widgets allow another level of client interaction where they can control other, traditionally static, areas of the website such as the header, sidebar and footer. Here is an article I wrote about adding to a header widget in WordPress.

With widgets, clients can determine how many posts in which category get listed, decide on an article to be featured with thumbnail image and choose the running order in which all these elements appear. And all this is controlled within an intuitive back-end – let’s face it, it doesn’t get much more easy that the widget area!

How do you use WordPress widgets?

Well, as I’ve said, WordPress widgets are almost too easy to use that they don’t bear explaining!

If you go into Appearance > Widgets on the left-hand side of the back-end you will see a large list of Available Widgets in the central area and a selection of widgetized areas on the right (for example Primary Sidebar or Header Right).

And to place a widget in a particular area – you’ve guessed it! – simply drag the widget from the Available Widgets area to the Primary Sidebar (or the desired area). Then you can choose the title of the widget (for example, you may like to title the Latest Posts widget “My recent articles”) and choose the various settings of the widget (for example, you can choose the number of posts or category in the Latest Posts widget).

Note: if you leave the title area in the widget blank; the element appears on the page without a heading.

So, for example, here is a screen shot of me moving a Genesis Featured Posts widget in the first of my three footer widget areas:

featured-posts-to-footer-widget

And here are the easy to use settings. As you can see, I set the heading to be “Latest Articles” and get it to display the 5 most recent posts with a 40 pixel square thumbnail image:

genesis-featured-posts-widget-settings

If you want to get rid of a widget, simply drag it from the widgetized area back to the Available Widgets area. If you want to take it away from the widgetized area but would like to save the settings as you may want to use it again, drag it to the Inactive Widgets area underneath and it’ll sit there until you want to use them again.

In the video above I explain how to add text and Recent Posts widgets and style them with CSS.

If you’re thinking this is all a bit “off the peg” – think again! You have complete control over how widgets look both generally and individually.

How do you style WordPress widgets globally?

I use – my eternal favorites – Chrome Developer Tools and Firebug add-on for Firefox to find out what selector is used for the widgets. For example here are some styles for all the widgets on my site:

#sidebar .widget {
background-color: white;
border: 1px solid #E6E6E6;
margin: 0 0 15px; }

And here is the style for the widget headings:

.widget-area h4 {
background-color: #F8F5EE;
border-bottom: 1px solid #E6E6E6;
font-size: 16px;
padding: 5px 5px 5px 10px;
margin: 0 0 10px;
color: #783D00;}

Obviously the font-family of the h4 is determined elsewhere in the stylesheet.

How do you style individual WordPress widgets?

But, what if you want the heading or background of one of the widgets to be different to the others? No problem! By using the Chrome Developer Tools (View > Developer > Developer Tools) or the Firebug add-on for Firefox, you can identify the div id that the widget is wrapped in.

So, for example, the Recent Posts widget on this blog is wrapped in div id="recent-posts-3". This is a completely unique identifier for this particular website element. (So if, for the sake of argument, you wanted to have a second Recent Posts widget on the same site, WordPress would give that a different id – “recent-posts-4″, for example).

So if you wanted to change the color of the heading (in this case the h4) of this particular widget you would add this to the CSS.

.widget-area #recent-posts-3 h4 {color: red;}

In the CSS code the dot represents a div class (in this case “widget-area”) and the hash represents a div id (in this case “recent-posts-3″). In this case the div class called “widget-area” comes before the div id “recent-posts-3″ because that’s the order they appear in the HTML.

What’s the difference between “class” and “id” in CSS? The id should be applied to an element that is unique whereas class can be applied to multiple elements on the same web page.

So how do you put something else in the sidebar that’s not a widget?

Simple, use Text Widgets! Maybe you want to add a message in the sidebar to alert potential clients that you are taking new projects? Simply drag a text widget over to the Sidebar and type!

Text Widgets can take HTML so you can add images, forms, JavaScript, whatever! I’ve used Text Widgets for my “Connect with me” links box (Twitter, Facebook, YouTube, etc.), sign-up form box, Adsense code, and all sorts of sidebar goodness!

What if you want different widgets appearing on certain pages?

You may think that this system of widgets is inflexible. I would say that the opposite is true – it actually adds flexibility.

You can use the Widget Logic plugin which uses WordPress conditional tags to specify which widgets go where. So you can can control the appearance (or not) of a certain widget on the home page, a single blog post, a blog post from a particular category, a particular page, etc.

Also, you can put a specific message on each page’s sidebar by using the PHP Code Widget plugin.

And, with the Genesis theme framework, you can use Simple Sidebars plugin to create multiple, dynamic widget areas, and assign those widget areas to the sidebar on a per post, per page, or per category basis.

What do you think?

Do you find widgets difficult or easy to use? Is there anything you want to be able to do with widgets that you haven’t found out how to do yet? If so, I want to know.

I think widgets are a great way to add client control over website areas that have traditionally been “no go”!

Comments

  1. says

    Rob, your posts are getting longer! I am beginning to see the usefulness of widgets, which is directly related to my ability to modify them. They are great for clients. How do you find clients adapt to using WordPress by themselves, do you have to give much training?

    • says

      Hello again, Martin, yes the older I get the longer I waffle on :) no, not really, I’ll be doing some short and sweet posts soon!

      Good question about adapting clients to WP. It depends on the individual. I usually do videos for the clients that are having trouble with WordPress, I find that usually helps. Thanks for commenting again, Martin, all the best!

  2. says

    Thank you Rob for your tutorial.
    But I have problem with this. I create new widget area which name is “.New-widget-1″ and i use plugin “Genesis Featured Post” to show the new post in this area. In the bottom of this widget area, it’s have “border-bottom” because it’s take this “border-bottom” from “.post” and “.featuredpage .page, .featuredpost .post” , but i don’t want this “border-bottom” show in “.New-widget-1″. I tried to add “.New-widget-1 #featured-post-2″ but it’s not working.
    Please help me :(
    (sorry for my poor English)

      • says

        Sorry Rob,
        That is just an example. I used Hook to create new widget area which name is “.features-top-left-1″and I use widget “Genesis Featured post” to show lates post. With your tutorial, I changed font color, font size and some margin, padding in this widget area, but i can’t change Font and Border-bottom.

        • says

          No problem, Thien, but without seeing the site I can’t help. You need to keep trying with different selectors and working out with Developer Tools or Firebug why they aren’t working. You can also try putting the !important declaration in.

  3. says

    Hi,

    I must change the background of a widget with a ID, in firebug I see:

    Then I go in style.css and add this code:

    .widget #text-7 {background: red;}

    I also test:
    .widget_text #text-7 {background: red;}
    .widget widget_text #text-7 {background: red;}

    but don’t work, any idea to solve please?

    thenks

    • says

      Hi,

      Did you try:

      #text-7 {background: red;}

      or

      #text-7 {background: red!important;}

      Also, can you paste code into pastebin or somewhere as it gets stripped out in comments here. Thanks.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.