I hope I haven't scared off everyone with a scary tutorial title, customizing the look of your website is actually pretty simple.
I notice in a number of WAbinars Jay often points out that the text is too small, that the line height isn't quite right, or that something else isn't correct. We can fix all of that with CSS and Child Themes. And you don't have to be a mad coder to do it either - while I can't promise you'll get it like that, I will say that it's all actually quite a bit easier then you might think - especially if you follow this tutorial.
What is CSS?
CSS stands for Cascading Style Sheets and it's the code that tells a computer how to make a website look. It controls all the stuff we want to mess with like line heights, fonts, colors and even layouts. I'm not going to go too deep into CSS - just enough so we can play around a little with our site - but I think you'll find that CSS is very easy, or at least, easier then you might think.What are Child Themes?
We're not going to be building a new Wordpress theme from scratch - that's too difficult for this tutorial. Chances are you already have a theme set up, but those free and paid themes are often slightly not right. The font's are awful, the colours are shocking etc. A child theme is the easiest way to edit a main theme. Using a child theme also means that you cannot break your main theme. If something goes wrong you only need to switch back to your main theme and you won't have any further troubles.In addition, using a child theme will not mean your changes are wiped out if/when the main theme is updated.
What You Need:
You do need a web browser, preferably Google Chrome, Chromium or Safari. This is because we will need to 'inspect' our website and these browsers have an excellent inspector built in. If you use Firefox, you can install the Firebug plugin which does a similar thing. It is similar to the Chrome inspector but I will not be covering it in this tutorial.Note: if you choose to use Safari you'll need to turn on developer mode - go to the preferences, go 'advanced' and check the box 'Show Developer Mode in the Menu'.
Join the Discussion
Write something…
firstburn
Premium
i have a blogg i left 4 yrs called breaststrokeforbegginers.wordpress.com because i could not put and adsense code to it. i think with this tutorial i might start using wordpress again.
SquidooSlfMstr
Premium
Well written tutorial, Mark! Do you know if you do your site customization on the parent theme, do you lose all that when the theme owner makes updates? Is this why you would want a child theme?
Thanks again for doing this tutorial.
Charlie
Thanks again for doing this tutorial.
Charlie