How to Add a Custom Coloured WordPress Sidebar Menu

How to Add a Custom Coloured Sidebar Menu

If you’ve got a blog or website on WordPress and haven’t hired out a designer, you’re likely trying to DIY the design. But, most people think that if they don’t have any web design knowledge they don’t have any options. Luckily, there are lots of small ways you can spice up your design without going to deep into the code. That’s why I’ve decided to start up a new series ‘DIY WordPress Design‘ for WordPress.org users who have no coding knowledge, but still want to customize their design.

One thing that I love design wise, is putting your colour scheme on display. Though it’s great to use it throughout your site, it’s also a really nice feature to showcase, and a sidebar menu is a great place to do so. If you’re looking to do this on your site, it’s a lot simpler then you might think.

How to Add a Custom Coloured Sidebar Menu

Step 1

In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost. Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial. Once you have created your child theme you go to Appearance > Editor to find the style.css file and that is where you put all your code in.

Step 2

First open up your colour scheme. I recommend that after everyone makes a mood board for their blog or website, they save a colour scheme with all the HEX codes written on it so they can open it up when writing any code or designing anything for their blog. So open this up on your screen so the colours are ready.

Wordpress Workspace 1

Step 3

Next you can open up a new tab in your WordPress admin to edit the menus. Go to Appearance > Menus and click ‘Create new menu’. Here you can name your menu something like ‘sidebar’ because it will be going in your sidebar. Now put all the links in your sidebar menu that you want to appear there. This might be an assortment of random links, or maybe your categories. It can be whatever you like! I like to limit the number of links to the number of colours I have in my colour scheme – which is 7 in my case.

Wordpress Workspace 2

Step 4

Save that menu, and then go to Appearance > Widgets. There should be a ‘custom menu’ widget that is included along with the default WordPress widgets. Drag this into wherever on the sidebar you want your menu to appear. Then from the ‘select menu’ dropdown, choose the sidebar menu that you just created. You can also name the widget accordingly – mine is called ‘Categories’ because my menu is a list of my major categories.

Wordpress Workspace 3

Step 5

Now if you looked at the menu in the sidebar, it would just be a standard – probably ugly – looking list, depending on the theme you’re using. This is where we’re going to style the list – deep breath, there’s a bit of coding coming but it’s super simple – I promise.

Wordpress Workspace 4

Step 6

Here is all the code I’ve used to style my menu. While it might not all apply to your’s exactly, I’ve provided it for you here. Please remember that I am building from the Twenty Thirteen WordPress theme, so while most of these styles should apply to all themes, they might need a bit of tweaking to work for you. I’ve put some notes next to each line, and you can delete or change the lines that don’t apply to you.

Step 7

Next is the code to style the actual colours of each list item. I’ve got my colours in there, so you need to switch them out for your own (please don’t steal my colour scheme!).

First child is the first list item, and then the ones after that are the corresponding numbers so it’s fairly easy to follow. The only other one is the standard item. You should set a colour for that one just to make sure the standard backup colour for each list item is one in your colour scheme.

Step 8

Now you’re done! Your list should be looking good and beautifully colour coordinated. If it’s not working or you need to trouble shoot something, you can try using Firebug to help you figure it out.

If you’ve got any questions or problems please feel free to ask. I’ll be starting to post WordPress customization tutorials on a regular basis now so I hope you find them helpful!

What other WordPress elements would you like to know how to customize? Let me know in the comments below!

12 thoughts on “How to Add a Custom Coloured WordPress Sidebar Menu”

  1. I did it! I felt like a 5th grader flying an airplane, but I did it! Here it is: http://www.artwheelblog.com
    Once I got the hang of it, it was really easy. Could you teach us how to edit fonts within a theme? Mine has absolutely no options for fonts. And my tagline under my logo looks so pathetic and small…
    You are the best!!

    1. Ahhh oh my goodness it looks so good! I’m so glad the tutorial worked for you, how exciting! YES. I will totally add a font tutorial to my list of posts to write! What’s your twitter or Facebook? – I’ll let you know when it’s up!

      Also please feel free to let me know whatever you struggle with, what you’d like to see a tutorial on, etc. I love to know what my readers are looking for! It’s hard to step outside my own body and think about what it would be good to know!

      1. I’m on Twitter as @amber_whitworth and I would so love to hear when you write something – anything – new. This was the cutest web design tutorial I’ve ever seen. You have amazing skills and thank you SO MUCH for sharing them with the world!
        I’ll be subscribing to you for sure. My blog is just a few days old but I have big plans for it.

        1. Thanks so much, that means the world to me! I’m working to make more tutorials, especially web design, so that’s great to hear! Following you now and I’ll shoot you a message when the post is up!

          My DIY WordPress Design Series http://www.melissacarterdesign.com/tag/diy-wordpress-design/ and my Web Design Basics Series http://www.melissacarterdesign.com/tag/web-design-basics/ might be a great place for you to start if you’re looking to customize your design a little more!

          Can’t wait to see what comes of your blog!

    1. Hey Jolene! Did you follow the full tutorial and add the menu to the sidebar, and then put this code in? the editor is where you paste them so it should be working. I took a look at your site but I don’t see a menu in the sidebar so I can’t troubleshoot it. If you can try it and then let me know I can take a look at your site and see why its not working!

      1. Yes, I added the categories menu to the side bar and added the code to the editor. Its just that I removed it when I saw it didnt work. I’ve tried it again and doesnt work. :-(

          1. Oh I see it! Looks great. The only other thing would be to make the links white so they show up a little better against the colours – try this!

            ul#menu-colorful-categories.menu li a {
            color: #fff;
            }

Leave a Reply

Your email address will not be published. Required fields are marked *