Since my post on How to Customize the Blogger Label Gadget was so enthusiastically received, I decided to do a similar tutorial for my WordPress peeps.
Category widgets are a great way to encourage your readers to stick around and discover more of your content. I like category widgets better than archive widgets because, really, are your readers going to be searching your posts from 2013 very often?
They’re much more likely to read a post about Blogging Tips and, loving that post, look for more related posts by clicking on the Blogging Tips link in your sidebar.
I often find bloggers skipping the Category widget because their Categories have gotten totally out of control and take over the entire sidebar.
If you have more than 20 Categories on your blog, please, please, read my article, The Right Way to Organize Your Blog with Categories and Labels. I promise you’ll find it helpful. It even includes a super handy printable worksheet to help you tame your Categories.
The purpose of Categories is to help your readers navigate around your blog and discover more content that they like. Properly used categories are a great tool for your blog. Out-of-control Categories are a total waste.
OK, so, let’s break down a few ways to customize your WordPress widget so that it has some style.
What We’re Working With
WordPress comes packed with 2 native widgets that can help you display your Categories and Tags in the sidebar:
- Category Widget
- Tag Cloud
Unless your theme developer has added some special styles to these widgets, their pretty blah and well, ugly. Especially if the tag cloud is just a big blobby mess of different sized words.
The Category Widget offers 2 styles including a drop down and a list style. The Tag Cloud is, of course, a cloud of tags without much style.
We’re going to be styling the Categories widget because it’s easier to work with for a few code specific reasons. Make sure you set it to the default (not drop down) style.
I’ll be working with our Phoebe WordPress theme today but since this is a native widget, this code should work for anyone. The easiest way to add additional CSS is to use the “Additional CSS” field that in the Customizer panel when using the JetPack CSS module or by adding the code via a child theme.
* As always, we never recommend editing the theme code of a WordPress parent theme directly. Use a child theme or the JetPack CSS module or similar to add styles to your site.
Style 1 – Minimal
Style 1 is a simple category list. This minimal style will look good on pretty much any blog.
I have added some basic styles that will clear any theme styles. The code is annotated so you can customize to your tastes.
Options include font color, family, size, transform, weight and hover colors.
Copy and paste the code below into your custom CSS field or child theme stylesheet.
* Please note when editing code, make sure you edit the code in a plain text editor program like Text Edit or Note Pad.
STYLE 1 CODE:
Style 2 – Give Me Some Color
This style adds some colored backgrounds and hover styles to the categories for a little more spice for your blog.
Edit the options to suit your taste.
Options include spacing as well as font and color options. Note their are also hover options for the text and background so you can really customize your widget.
STYLE 2 CODE:
Style 3 – Take it Up a Notch, Color Gradients
Style 3 allows you to add multiple background colors to your Category widget.
This style works best when you have a limited number of Categories.
The code allows you to use up to 6 different colors. The colors will “rotate” through if you have more than 6 Labels.
You can use more more or less colors as well. See how below.
STYLE 3 CODE:
Use Less Colors
Just remove the code for the 4th, 5th, 6th, colors, etc. Easy as pie.
Add More Colors
These 6 colors above will repeat every 6 labels.
To add more colors, first, in the code above, change the 6n in each element to match the number of colors you’ll be using. If using 7 colors, change it to 7n.
To add your additional color, add 2 more lines like this at the bottom of the code above:
*If you use 8 colors, make sure to change the 6n to 8n, etc.
Style 4 – Time to Get Fancy
The last style I’m sharing adds creates a 2-column grid of categories with icons above each category name.
To add this style, you must have the Font Awesome font icons installed on your site. All of our themes already have this, so, if using a Georgia Lou Studios theme, skip this step.
Step 1: Install Font Awesome
There is a super handy plugin called Better Font Awesome that we recommend for adding the icons to your site.
If you’re a hardcore DIYer who likes to avoid plugins like the plague, you can check out this tutorial from Elegant Themes. Again, please, please use a child theme when modifying your site in this manner.
Step 2: The Code
This code is a bit more complicated. It accommodates up 6 different icons but you can add more following the directions below the code.
* You can also skip the icons. Just deleted the icon setting (will be labeled in code) on each link.
STYLE 4 CODE:
To Find More Icon Codes
- Visit the FontAwesome site: http://fontawesome.io/icons/
- Use the search box to find an icon that fits your needs.
- Under the search results, click on the icon you want to use to open the icon details.
- Under the big picture of the icon you will see a unicode symbol for the icon. Example: f030
- Copy this code into the content setting for your icon. Leave the quotes and backslash (\) intact.
Add More Icons
To add more icons, first, in the code above, change the 6n in each element to match the number of colors you’ll be using. If using 7 icons, change it to 7n.
For a 7th, 8th, etc. icon, add another group of code like this to the bottom of the main code:
* Just change the + 7 number to match your icon number (i.e., 8th = 8, 9th = 9). You can add as many as you need.
Sum It Up
OK, there you go. 4 new styles to pretty up your WordPress Categories widget.