![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/how-to-style-wordpress-widgets.jpg\" "\\"WordPress")
<\/p>\n<\/p>\n
The functionality and flexibility that WordPress widgets can add to our blogs and sites is unmatched (imho) by other platforms. Just do a quick search of the WordPress repository for widget<\/em><\/a>, and you’ll find over 1000 plugins that can include a new widget for your blog!<\/p>\n But, regardless of the quantity and quality of WordPress widgets available, every once in a while, we install a WordPress plugin with a widget that doesn’t quite fit the look and feel of our site. Sometimes, (sorry designers), the built-in styling looks just awful.<\/p>\n Then again, there are times when we’d simply like a specific widget to stand out from the rest in our sidebar. This little tutorial will give you a few basic tips on how to<\/p>\n Note that for that last point, we won’t be touching any plugin files or editing any php code. All our customizations will be done via CSS in the style-sheet of our theme or child-theme. That means that the order in which the various elements are called by the widget code won’t change. We can, however, do a bit of pretty nifty stuff with CSS alone.<\/p>\n For the purposes of this tutorial, we’ll be using a simple text widget so you can get the hang of things. Once you’re familiar with how easy is actually is to get your WordPress widgets looking the way you <\/strong>want, you’ll have a ball creating custom styles for almost any widget on your site.<\/p>\n Go to “Appearance” > “Widgets” in your WordPress back-end and drag a text widget to your sidebar, or any other widget area where you’d like to play around a bit. Give your widget any title you like, add the following to your widget and Save<\/strong>.<\/p>\n The above code will generate a widget on your site similar to the image below:<\/p>\n This is a very basic display that inherits the base sidebar styles in the theme style-sheet. While we do have full control over the content in this widget (we just entered it manually), let’s pretend for now that it’s generated by some plugin. That’s also why we added div containers around the image and the content, ‘cuz most plugins will enclose elements in some kind of container for styling purposes (we may not need to use them, but they’re there for our exercise). Now let’s make our test widget stand out from all the others on our site.<\/p>\n\n In the window in which you are viewing your site, launch your browser’s developer tools. For tips and links to documentation of popular browser developer tools, see “Tip #1” of this article: 5 Tips to Organize Your WordPress Theme Stylesheet and Make it Easier to Navigate<\/a>. (For the rest of this article, I’ll be referring to tool names found in Firebug for Firefox.)<\/p>\n Using the “Inspect Element” tool, highlight the text widget you just created. You should see something like the image below:<\/p>\n See where it says “id=”text-5<\/strong>” in the html window on the left? That’s the ID of the text widget we just created. That ID is what is going to help us create styles that will be specific to that particular widget. So, in all the custom styles we will be adding to our style-sheet, they will be preceded by that ID, ensuring that the styles will be applied only <\/strong>to that widget.<\/p>\n For the rest of this exercise, we’ll be adding some custom styles to our site. There are 3 ways we can do this:<\/p>\n Got the style-sheet open? Good, let’s start by making our test widget really stand out from the others in the sidebar by giving it different border and background colors. Add the following to your style-sheet:<\/p>\n You should see something like the image below. Go ahead and play around with the border thickness, border color and background color until you get it looking the way you want.<\/p>\n We can also see that the image we added from Flickr.com isn’t quite right for our sidebar (it’s preset in the embed code at 240×161 pixels). We could cheat <\/em>and modify the dimensions directly in the embed code but, as we’re pretending this widget is generated by a plugin, we won’t do that here. So, here’s an easy way to ensure that any images that appear in our customized widget fit just right:<\/p>\n The width:100%;<\/em> declaration ensures that larger images will be resized to fit exactly the space available in their parent container. The height:auto;<\/em> ensures that the height will remain proportionate to the original. Now you should see something like this:<\/p>\n The color of the headings isn’t right either for the background color we added earlier, so let’s make them easier to read by adding the following to our style-sheet:<\/p>\n That would give you something like this:<\/p>\n You can see in the examples above how easy it can be to add custom styles to your WordPress widgets simply by targeting the ID of the widget (#text-5 in our examples), then appending the appropriate elements to the selector. Up til now, we’ve been customizing the look of the widget content. Now, let’s shift things into another gear and change how <\/strong>the content is displayed; the layout.<\/p>\n\n For this part of our exercise, we’ll be using some display<\/em> and\/or float <\/em>properties. (For more on display, float<\/em> and other style rules, see the helpful links at the end of this article.) Let’s first add a bit more content to our test widget so we can really see the impact of our changes. To simulate multiple entries generated by a plugin, we’ll copy what we already have, and add it in again with a horizontal rule between the 2 entries. Change the content in your test widget to the following and Save<\/strong>.<\/p>\n You should now see something like this on your site:<\/p>\n Let’s try simply making the images half the width of the widget, and get the content to wrap around them. To do so, we’ll style the parent containers of the images. As we have already added a width of 100% to our images, they will automatically resize to fit their container. Most widget content generated by plugins will have images wrapped in some kind of container. In our test widget, the image container is div class=”my-image”<\/em>. So to style that container, we can add the following to our style-sheet:<\/p>\n Now you should see something like this on your site:<\/p>\n If you’d prefer a layout with images to the right, change the code you just added to the following and you’ll see something much like the image below:<\/p>\n In some instances, we may want the content of our WordPress widgets to display in distinct columns. The display <\/em>property allows us to do that by mimicking good ol’ tables and table cells. First, we should tell our widget that we want its content to behave like a table by adding display:table;<\/em> to it. The style rule for your test widget should now look like this:<\/p>\n Next, we’ll add a style rule to the my-image<\/em> container, and create a rule for the my-content<\/em> container so they behave like table cells:<\/p>\n Viewing your site, your test widget should now look much like this:<\/p>\n Evidently, this technique may not be ideally suited to WordPress widgets in narrow sidebars where there’s a lot of text beside a single image in each entry. However, it can be useful to re-arrange text, links or images in wider widget areas such as full-width footer widgets.<\/p>\n\n There are times when a widget displays a bunch of information in each entry, some of which we don’t necessarily need or want. Depending on the plugin used, there may not be a built-in setting or option available to hide or display certain elements. There’s an easy solution to that with the display <\/em>property.<\/p>\n Let’s say we want to remove the text from each entry in our test widget and show only the images. We would simply apply display:none;<\/em> to the appropriate container. The container for our test widget text is my-content<\/em>, so the style rule would look like the following (you’ll need to remove the style rules for the my-image<\/em> container to get the images back to full-width for this exercise):<\/p>\n To hide the images and display only the text, we would apply the display rule to the image container instead like so:<\/p>\n Depending on what we’ve hidden, our test widget would now look like one of the images below:<\/p>\n Let’s say we want all the widgets in our sidebar to inherit the same custom styling. Rather than preceding style rules with the ID of a specific widget (such as #text-5<\/em> from our test widget), we would precede them with the ID of the sidebar and target the widgets like so:<\/p>\n If we want to apply the same rules to all our sidebar widget images, our CSS would then look like this:<\/p>\n To apply custom CSS to all the widgets in our site’s footer instead, we would target the footer ID like so:<\/p>\n To apply custom rules to ALL the widgets on our site, we would simply target the widget class like so:<\/p>\n Depending on the complexity of your chosen theme’s style-sheet, custom styles for your WordPress widgets may not “take”<\/em> immediately. In other words, some built-in theme styles may take precedence and override your custom stuff. If this happens, there are 2 ways to ensure that your custom styles override whatever may be present in your theme’s style-sheet.<\/p>\n As always, I hope you find use for the tips in this article. If you’ve created a really cool style for your WordPress widgets and want to show it off, go ahead and leave a comment below with a link. I’d love to see your stuff! If you need a hand with a puzzle, ask away in the comments too. Thanks for reading!<\/p>\n\n
Create a test widget<\/h3>\n
\r\n<div class=\"my-entry\">\r\n<div class=\"my-title\">\r\n<h4>This is the title<\/h4>\r\n<\/div>\r\n<div class=\"my-image\">\r\n<a href=\"http:\/\/www.flickr.com\/photos\/kevinmcmanus\/3956021578\/\" title=\"Thatched roof cottage by K Mick, on Flickr\"><img src=\"https:\/\/farm3.staticflickr.com\/2431\/3956021578_8579b5943c_m.jpg\" width=\"240\" height=\"161\" alt=\"Thatched roof cottage\"><\/a>\r\n<\/div>\r\n<div class=\"my-content\">\r\nHere is a bit of content to describe what's going on here. This could be some automatically generated text like a post excerpt, rss feed, or text you enter yourself in a widget like this one.\r\n<\/div>\r\n<\/div>\r\n<\/pre>\n
![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget1.png\" "\\"WordPress")
<\/p>\nStyling a single widget<\/h3>\n
![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-html.png\" "\\"WordPress")
<\/p>\n\n
\r\n#text-5 {\r\n border: 1px solid #000000;\r\n background: #999900;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-bg.png\" "\\"WordPress")
<\/p>\n\r\n#text-5 img {\r\n width:100%;\r\n height:auto;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-bg2.png\" "\\"WordPress")
<\/p>\n\r\n#text-5 h3, #text-5 h4 {\r\n color:#ffffff;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-bg3.png\" "\\"WordPress")
<\/p>\nChanging the widget content layout<\/h3>\n
\r\n<div class=\"my-entry\">\r\n<div class=\"my-title\">\r\n<h4>This is the title<\/h4>\r\n<\/div>\r\n<div class=\"my-image\">\r\n<a href=\"http:\/\/www.flickr.com\/photos\/kevinmcmanus\/3956021578\/\" title=\"Thatched roof cottage by K Mick, on Flickr\"><img src=\"https:\/\/farm3.staticflickr.com\/2431\/3956021578_8579b5943c_m.jpg\" width=\"240\" height=\"161\" alt=\"Thatched roof cottage\"><\/a>\r\n<\/div>\r\n<div class=\"my-content\">\r\nHere is a bit of content to describe what's going on here. This could be some automatically generated text like a post excerpt, rss feed, or text you enter yourself in a widget like this one.\r\n<\/div>\r\n<\/div>\r\n<hr\/>\r\n<div class=\"my-entry\">\r\n<div class=\"my-title\">\r\n<h4>This is the title<\/h4>\r\n<\/div>\r\n<div class=\"my-image\">\r\n<a href=\"http:\/\/www.flickr.com\/photos\/kevinmcmanus\/3956021578\/\" title=\"Thatched roof cottage by K Mick, on Flickr\"><img src=\"https:\/\/farm3.staticflickr.com\/2431\/3956021578_8579b5943c_m.jpg\" width=\"240\" height=\"161\" alt=\"Thatched roof cottage\"><\/a>\r\n<\/div>\r\n<div class=\"my-content\">\r\nHere is a bit of content to describe what's going on here. This could be some automatically generated text like a post excerpt, rss feed, or text you enter yourself in a widget like this one.\r\n<\/div>\r\n<\/div>\r\n<\/pre>\n
![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-bg4-113x300.png\" "\\"WordPress")
<\/a><\/p>\n\r\n#text-5 .my-image {\r\n float:left;\r\n margin:0 1em 0 0;\r\n width:50%;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-bg5-157x300.png\" "\\"WordPress")
<\/a><\/p>\n\r\n#text-5 .my-image {\r\n float:right;\r\n margin:0 0 0 1em;\r\n width:50%;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/08\/text-widget-bg6-155x300.png\" "\\"WordPress")
<\/a><\/p>\n\r\n#text-5 {\r\n border: 1px solid #000000;\r\n background: #999900;\r\n display:table;\r\n}\r\n<\/pre>\n\r\n#text-5 .my-image {\r\n display:table-cell;\r\n float:left;\r\n margin:0 1em 0 0;\r\n width:50%;\r\n}\r\n#text-5 .my-content {\r\n display:table-cell;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/text-widget-bg7-115x300.png\" "\\"WordPress")
<\/a><\/p>\nHiding some of the widget content<\/h3>\n
\r\n#text-5 .my-content {\r\n display:none;\r\n}\r\n<\/pre>\n\r\n#text-5 .my-image {\r\n display:none;\r\n}\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/text-widget-bg8.png\" "\\"WordPress")
<\/p>\nApplying custom styles to groups of widgets<\/h3>\n
\r\n#sidebar .widget {\r\n style rules here... <\/em>\r\n}\r\n<\/pre>\n\r\n#sidebar .widget img {\r\n style rules here... <\/em>\r\n}\r\n<\/pre>\n\r\n#footer .widget {\r\n style rules here... <\/em>\r\n}\r\n<\/pre>\n\r\n.widget {\r\n style rules here... <\/em>\r\n}\r\n<\/pre>\nTips to override stubborn theme styles<\/h3>\n
\n
Other helpful links<\/h3>\n
\n