So you want to customize your WordPress design? This is something that I hear all the time from fellow bloggers and business owners, but they have no idea where to start. I’ll admit it’s a complicated process, especially for non-designers and non-coders, but once you work it out the first time, it’s easy sailing from there on out.
So, I’ve put together this simple post to give you all the information and steps you need to customize your WordPress design from scratch.
First of all you need to set up your WordPress site. If you’re looking for ways to customize your design you’ve likely already done this. But, if you haven’t, you can check out my WordPress 101 series. Specifically, you will need to get hosting and set up your site.
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, or you can access it through FTP.
Once you have your child theme set up and you know that it is working, you are ready to start making changes to your design. But how do you know what changes to make? Let’s say you want to make the background of the page grey rather than white. First, you need to find out what code it is that is making the page white, and then you need to add that code to your child theme, but make the background grey instead. The grey in your child theme will over ride the white in your parent theme, and the background while change to grey.
A great way to find exactly the piece of code you need to change exactly what you want to change, is to use Firebug. It allows you to click on a piece of the page in Firefox, and then shows you what code is styling that part of the page. You can check out my post on Using Firebug to Help You Style for a more in depth tutorial of how to use it.
Once you find the code you need to change, it can be simple to over ride it, or it can be more complicated. Simple styles like background: #FFFFFF; are easy to change to background: #EFEFEF but more complicated things like layouts and sizes can be more difficult to override, because you need to know more about CSS.
W3Schools is one of my favourite CSS resources because it has basically everything you need to know about CSS. Usually I just Google something if I don’t know how to do it, and the answer eventually comes up. If you want to learn CSS more comprehensively from the beginning W3Schools is a great place to start, or somewhere like Code Academy that actually has step by step courses that will take you through learning CSS (and a lot of other languages if you want) from the beginning.
Once you set up your child theme the first time and get the handle of CSS, making simple changes whenever you want to should be easy. Comment below and let me know if you have any other questions or any specific things that you need help figuring out and I’d love to help!