Style wordpress widgets with CSS
Author: Stefan Vervoort | Please Comment!Wordpress is a beautiful piece of software, we all know that. Especially when you have just updated to version 2.5 and discovered some stuff in the wp-admin panel you have never seen before. A couple days ago, I’ve found Wordpress Widgets.
Wordpress Widgets were original designed as a plugin for Wordpress by Automattic. Matt Mullenweg included Widgets as a standard in Wordpress version 2.5.
I had never worked with them, but all the wordpress themes I designed and coded, included the Widget codes. For some silly reason, I never took the time to download the plugin. By seeing the things now, it was a shame I never did, It just made the sidebar many times easier to customize and clean up!
But it is really that easy to use them? Yes, it is. Is it that easy to style them? No, it needs a little explanation, which is provided today, in this article. We are styling wordpress widgets.
How to start
As we are talking widgets, it come in handy if you have your theme ‘widgetized’. Meaning: Ready to use widgets. I will not talk about installing widgets as you can learn it from the original developers. It is a piece of cake!
Also, make sure you have Wordpress 2.5 installed and ready to go. A good start is to open up the widgets page in your wp-admin, which can be found at Dashboard > Design > Widgets. Open your homepage as well, to see what you are doing.
Add the widgets to your sidebar
It doesn’t really matter what widgets you use, because the method of styling remains the same on most widgets. In my example, I will use a text widget to explain. To style the same text inside the widget as me, download the content inside this .txt and add it inside a ‘text’ widget.
Styling widgets
Let’s start, right? Open up your theme’s stylesheet, and your weblog’s homepage.
Right. First, we need to see how widgets are converted from PHP to HTML. As most of you know, widgets are built in PHP and rendered in HTML. How this happens, we need to see the source for information. To do this, visit your blog’s homepage, and right click > View source. Information as how lists are rendered and what headings, classes and id’s widgets use should be understand to style a widget.
What to look for?
The following screenshot is a picture I have took from Divitodesign homepage, focused on a ‘text’ widget with an unordered list. I’ve marked the points to look for, so make sure you see the screenshot in full size.
Styling the points mentioned
I guess you have a little experience in CSS, so I don’t think I have to explain how to build a class or ID. Well, I will provide you with all the standard ‘text’-widget classes anyway. Take a look below.
div.sidebar{} /* only style this if you haven't style your sidebar already. */ ul{} /* Unordered list. Your 'text' widget is built on an unordered list */ ul li.widget{} /* In this list item all further content is displayed. */ h2.widgettitle{} /* The h2 heading the widget use to display the title of your widget */ div.textwidget{} /* The div all of our widget content is displayed */ ul.popular{} /* In this 'text' widget, I have used a unordered list with class Popular to display our content */ ul.popular li{} /* List item inside the content */ ul.popular li a {} /* How a link gets displayed inside a content-list item. */
If you make sure you style these classes, you have all control about the look of your widget. Finally.
We are done
I guess we are done styling widgets. We have the full control back and we are ready to style widgets as easy as the normal sidebar would be.
All I have to say, keep learning and thanks Automattic for developing such plugin, and thanks Wordpress to included widgets in their new software.
Loading ...
Loading...
10:36 am on May 19th, 2008
Stefan,
Great Article, there are some great tips in there, I have subscribed to your RSS to get some more great stuff.
Cheers
1:14 pm on June 15th, 2008
I’m having a tough time styling the text widget so there are no bullets. The URL is http://bodyjoy.org/blog
I have edited the stylesheet with
.textwidget li {
list-style-type: none;
list-style: none;
}
and many variations of it including
.widget widget_text li {
list-style-type: none;
list-style: none;
}
#text-113273631 .widget .widget_text li {
list-style-type: none;
list-style: none;
}
Can you please guide me on what I should do differently? I’d also like the spacing to match the spacing of the submenus lower on the left nav.
TIA!!!
2:33 pm on June 15th, 2008
@Daniel - Hey Daniel. Thanks for your content and I have subscribed to your blog as well!
@Karen - I think you have done it right. I don’t see the bullets, they are already removed. Did you fix it?
Your other question: You should delete the spaces/dots and add padding-left:12px; to your ‘widget-text’ class. That should help you.
If you have another question, let me know.
8:14 pm on June 15th, 2008
hey where to paste the HTML link in wordpress
3:05 am on July 14th, 2008
CSS + WP =
WP really does have a certain elegant simplicity to it.
7:57 am on July 18th, 2008
@ A graphic designer - I agree, I agree. We all love Wordpress
12:09 pm on August 23rd, 2008
Your post is so far the most helpful one I have found on styling widgets, so thank you! However, I must be doing something wrong- I keep trying but I just can’t get my widgets to look properly. In fact, my changes have made them both pile up high at the top of the sidebar. The theme I am using is somewhat older and the widgets are completely unstyled, so I am adding style to them from scratch. I want them to look like the original sidebar looks (on my home page, it has been pushed down below the widgets, and they have been put side-by-side; I want to take out the old sidebar completely, but I am leaving it since I am asking for help.
Do you have any suggestions for styling these widgets? I have tried simply pasting the sidebar style and then replacing “#sidebar” with permutations such as .widget, or with the name of the individual widgets, and all that happens is that they get crammed up by the top of the sidebar. Please help me if you can, and thank you!
6:13 am on August 30th, 2008
You are so right wigets rock ! I am just coming to terms with them and this article as priscilla ( above ) said is very helpful. thankyou for giving back to the community.
5:22 pm on September 15th, 2008
Excellent, Thank you
7:12 am on September 19th, 2008
Great…thanx 4 share…
5:17 am on October 3rd, 2008
How can you have different styles per widget? For example, I want a specific style for my categories widget and another style for my recent posts widget…
5:36 pm on October 30th, 2008
thanks for the tips
8:55 am on November 15th, 2008
I don’t think I could stress enough how important it is for WP users to learn some PHP and XHTML. Yes, you can indeed pull off a bunch of cool things (such as styling the widgets) in WP. But, without a foundation of these two languages, you’re facing some serious problems. To the poster who asked how he/she could style individual widgets differently, I would recommend using the CCS “Class” tag. There are a bunch of sites online that elaborate on this topic, so you hopefully shouldn’t find much trouble in implemening it.
7:36 pm on November 18th, 2008
LOL @ Dirty Blue Widgets, I’ll be your arch nemesis, the clean red widget…haha.
I agree on learning PHP and HTML, especially HTML. It really isnt very hard to pick up and will make editing themes incredibly easier. PHP is a more difficult animal but still definitely worth learning once youve mastered HTML.