Loading ...
Style WordPress Widgets With CSS
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
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.
Stefan,
Great Article, there are some great tips in there, I have subscribed to your RSS to get some more great stuff.
Cheers
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!!!
@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.
hey where to paste the HTML link in wordpress
CSS + WP =
WP really does have a certain elegant simplicity to it.
@ A graphic designer – I agree, I agree. We all love WordPress
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!
[...] Style wordpress widgets with CSS DivitoDesign – Webdesign BlogStyle WordPress Widgets. In this tutorial you will learn how to style wordpress widgets. A detailed article about how to style WordPress widgets. [...]
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.
[...] lot more sidebars can be created and all the creativity that follows next, that’s up to you. Do you want to style your widgets now? Liked this post? Subscribe, or Share and [...]
Great…thanx 4 share…
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…
That’s one thing I’ve been dealing with too. It’s possible, but I am not sure how.
thanks for the tips
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.
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.
I have just recently started learning PHP. I have a good freiend who does almost all my programming for me for a percentage, but I do think learning it will help my development.
Thanks for your comments “widgets” hehe. You are both right, learning XHTML/CSS is a must if you want to do something on the web. PHP however is not needed in my opinion, at least I don’t like it.
WordPress is quickly becoming one of the best platforms to create any website, not just blogs. I just found out about the widgets, and couldn’t figure it out. Thanks for giving me just what i needed.
Hi, bit late to this… I’ve tried clicking on the “content inside this .txt” link and it doesn’t seem to work. I’d really like to know how you styled your widgets so I can work around that for my site. Any help very much appreciated…
My problem is that the text widget will inherit the formatting of the themes css. How can I prevent that?
Keep it up and in a new year .
Thank you my lady. Trying to make it an interesting 2011.
Hello and thank you very much
WordPress Video Tutorials-39 Step by Step Videos http://www.filesonic.com/file/199042372
oh its workig thanks for the share
Hello,
Thanks for this tutorial but its still not so useful as all links are broken.. no images even no widget-content.txt film available to download..
That’s not good indeed indeed. Will be fixed very soon. Thanks for the heads up.
Any word on when this will be resolved?
Hi.
I have problem with search widget if you can take a look at my sidebar you can see how the search widget looks!
Can you please tell me what i have to change to make it looks normally?
Thanks
Hussam
/* == WordPress CSS – Default WordPress Widgets == */
.widget {}
/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}
/* text widget */
.textwidget {}
.widget_text {}
.textwidget p {}
and more wordpress default css is here…..
http://digwp.com/2010/05/default-wordpress-css-styles-hooks/