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.
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.
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.
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.
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.
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.
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.
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.
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!