Select Page

3 Ways To Style Your Blog Categories In Your Sidebar

Divi, Web Design

Blog categories don’t have to be plain text, ya know! There are endless ways to design your categories so they beautifully display the topics you love to write about.
 
It’s a great way to make sure your sidebar is on brand and unique. Plus, it helps your readers quickly navigate to the posts they want to read about, which is super important.
 
In this post, we’ll be exploring 3 ways to style your blog categories within your sidebar:
 

 

1. Boxed Custom Icons

Here’s what you’ll need to do:

  • Choose your top four main blog categories. Think about what your readers come to your blog MOST for.
  •  

  • Then you’ll need to design, purchase, or hire someone to design custom icons for your brand. Make sure they are around 70x70px. You can resize using Photoshop, Illustrator, or with WordPress’ own resizing feature.
  •  

  • After you have then ready, upload them to your Media Library and keep this page open in a separate tab. (You’re going to be pulling the urls from this later.)
  •  

  • Now let’s add your code! Go to your WP Dashboard > Appearance > Widgets > Sidebar > Drag in a Text Widget to your Sidebar > Place this HTML code and replace with your own links and text:

 

Next, add your CSS:

Place this CSS code in your Custom CSS area, and adjust the font-family, colors and widths as necessary.

 

2. Color Button Labels

Here’s what you’ll need to do:

  • Make sure you have posts assigned to each of your categories.
  •  

  • Install and Activate the Widget Shortcode plugin.
  •  

  • Go to your WP Dashboard > Appearance > Widgets > Drag a Categories Widget into your Sidebar Widget Area > Click Save and copy the Shortcode Widget ID.

 

Next, add your CSS:

Go to your Custom CSS panel and insert this code. Make sure you replace the “categories-3” with your own Widget ID. Change the colors, font-family and padding values to match your own brand.

 

3. Font Awesome Icons

Here’s what you’ll need to do:

  • Enable Font Awesome on Your Website
  •  

  • Go to your WP Dashboard > Appearance > Widgets > Drag a Text Widget into your Sidebar Widget Area > Add the HTML code below. Be sure to replace with you own URLs, Font Awesome Icons, and Category Names.

 

Next, add your CSS:

Go to your Custom CSS panel and insert this code to target the Font Awesome Icons. Change the colors and padding values to match your own brand.

Did you find this tutorial helpful? Be sure to share with your friends! And comment your blog link below so we can see it in action 🙂

About Brittney Lopez

 

Hi there, I'm Britt!

I'm a branding + web designer for creative entrepreneurs. Here on my blog I like to share my top tips related to branding, web design, and Divi – my favorite WordPress theme. Enjoy!



Divi WordPress Theme
Bloom Email Optin Plugin
Monarch Social Sharing Plugin
Start Your Business

You're one step closer to downloading the Ultimate Branding Checklist for your online creative business.

Enter your name and email below and you'll be redirected to your checklist!

Success! You should be redirected to your checklist. If not, email me at hello@brandedbybritt.co.

Pin It on Pinterest

Share This