Category Buttons for your Sidebar

Create your own category buttons for your WordPress sidebar. The quick and easy DIY-Guide | thatistheday.comToday, I share with you a quick and easy way to create your own category buttons for your WordPress sidebar. Are you sick of your lame category widget and do you want something that fits your brand style? In my last post, I showed you how to create a brand board for your blog. I am using mine to update my blog design and make it fit my brand step-by-step. Changing the category widget to DIY-made buttons is one part to reach a distinctive design for your blog. So let’s get going. It’s easy, I promise!


What do you need?

  • Your brand board to use colors, elements etc. fitting your brand
  • A design program: I used Illustrator but you can use the program you are most comfortable with (Photoshop, Canvas)
  • A little plugin called Black Studio TinyMCE Widget will make it easier but I will show you a 2nd option without plugin
  • For which you will need a little bit of code (nothing to pee your pants about)


Create your button

Size

Before you start to create your button you should look up the size of your sidebar to make sure it fits afterwards. You can do this in your browser. If you are using Mozilla or Google Chrome, open your page and press CTRL + U to view the source code. Now you have to search the code for your sidebar widths or the widths of a widget in your sidebar.
For my buttons, I used 300 x 50 px.

create your category buttons in Illustrator

Save File As

After setting up your document, start creating. You can use pictures, text or just colored background like me. Export or save every button as a png or jpg file and upload it to your blog’s media library. If you use the second option, without the plugin, you should save the links to your pictures in an easy-to-access file. Just look for the file URL in your library.


Category Page Links

You should also look for your categories URLs. Normally they look something like this:
http://www.yourpage.com/yourcategory
Tip: If you are like me, you save these in a file too. So afterwards, it will only be copy and paste.


Version 1, with plugin

  • Go to your WordPress dashboard, select plugins and add plugin. Search for the Black Studio TinyMCE Widget, install and activate it. This will add a Visual Editor to your widgets.

Use Visual Editor Plugin

  • Back to your dashboard, go to appearance and select widgets.
    Find the Visual Editor widget on the left side and drag it into the place you want it to appear in your sidebar menu on the right side.

Visual Editor Plugin

  • You can name the widget if you like, the name will appear above your buttons in the sidebar
  • Now use add media to import the buttons from your library. Just one after the other.

edit image

  • Click on a button and select edit. Here you can enter an alt description, change the size and most important, edit the part where to link to. Select “link to URL” and paste in your category-page-link, you saved before. Repeat the same process with the other buttons.
  • Don’t forget to update and save. Done!


Version 2, with a little bit of code

You have to adjust the code to your needs. This means you have to put in your picture source links and the links to your category pages.

<a href=”page you want to link to” target=”_blank”><img border=”0″ alt=”name of your category” src=”picture source from the library” /></a>

Mine looks like this if this helps you:

buttons using html

  • Go to appearance, widgets.
    Find a normal text widget on the left side and drag it into the place on your sidebar menu on the right side
  • You can name the widget if you like, the name will appear above your buttons in the sidebar
  • Copy the code updated with your changes into the text area. Repeat for every button/category
  • Don’t forget to save. Done!

Hope this could help you. Do you have further questions? Feel free to ask. Created your own buttons? Link your page in the comments so we can all admire them.


Leave a Comment