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…
Recent messages
firstburn Premium
can u create a forumn page in your wordpress site
Reply
mhamilt Premium
Yes, although it gets a bit tricky. I'm not sure why you'd want to, the comments section on blogs is usually sufficient for user interaction. This plugin may help: http://wordpress.org/extend/plugins/mingle-forum/
Reply
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.
Reply
Kyle Premium Plus
Wordpress is definitely a wonderful platform...it is not perfect, but it is has come a long way and it sure beats the old days of building websites from scratch!!
Reply
mhamilt Premium
Yeah, I tried Wordpress even just three years ago and hated it. Now I couldn't imagine using anything else! And it gets better on a very regular basis.
Reply
Denisara Premium
firstborn - you could not put adsense codes into breaststrokeforbegginers.wordpress.com because you were using the free wordpress version (yoursite.wordpress.com). If you owned your site it would be yoursite.com. You can't monetize a free wordpress, or blogger etc. You have to 'own' your site to be able to do that.
Reply
Kyle Premium Plus
Excellent training Mark...this is going to be valuable for many!
Reply
BIS Premium
Very useful tutorial which is very easy to follow.

Thanks

Beverley
Reply
mhamilt Premium
Thanks Beverley!
Reply
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
Reply
mhamilt Premium
Yes, this is one of the reasons why child themes are good - you do lose any changes made if the theme you're using is updated.
Reply
Top