If coding and customizing your WordPress theme sounds too scary – then this post is for you!
(This is part 4 of my DIY Blog Redesign series… a little more techy for this post, and next week we’ll be back on the artistic.)

Admission: I designed my blog look – and starting out, I knew next to nothing of how to do CSS. Now, granted, I did know a fair amount of HTML, but I still had to start from scratch on CSS – and it wasn’t too bad. My point is this … don’t be intimidated by coding and the “back stage” parts of blog design. It doesn’t have to be scary. Especially if you’re using a child-theme. But I don’t claim to be a coding expert by any means.

Today’s post is going to be all about:
-choosing a “theme” for your blog (this is something you install from WordPress, related to templates)
-creating a child-theme (this doesn’t mean it’ll look like a kid blog, it just means you’re creating your own sub-theme based on the original)
-the CSS (style sheet)
-simple approach to coding

Ok, so the first step is finding a theme. If you remember the blog design tips from last week, we’re looking for a theme that allows those to be put into use. Plenty of white space, nothing too distracting, nothing that will detract from your content. I remember when I first signed up with WordPress, I was initially distraught because there wasn’t a theme that had exactly everything I was looking for … but that was before I realized just how much you could really customize a theme once you had set it up.

The theme I recommend going with is “Thematic”. It’s free, which is obviously really nice. It’s a simple and well-thought-out design, specifically made to be customized to however you want to design it. The really nice thing about Thematic is that even if you just leave it without customization, it is a nice simple theme … but that by putting in some work on it, the possibilities are endless. For instance, my blog is based on Thematic, as will Lori’s blog which I am redesigning as we go through this series … but our blogs will look entirely different in the end. Also (and this is a huge bonus) there is a whole community of Thematic support – Q&A forums, a free guide, etc. If you want more info on Thematic, as well as links to the support options, you can find that here.

To use the original Thematic, just go to your WordPress admin panel, then go to Appearance –> Themes, then click the “Install Themes” tab and search new themes for “Thematic”. Click “install”. After it’s installed, make sure you click “activate” to, well, activate it. ;) Simple, eh?
This is what Thematic looks like in just the base form:

Pretty simple, pretty basic. But as we’ve talked about before, often less is more. Content “pops” well on a simple design. However, we’d obviously like to add interest, branding and a more developed aesthetic. So first you’ve installed the original Thematic, and now we’re going to make “child theme”. This is basically a second-generation version of a theme. Pretty much all you’re doing is copying the basic elements of the theme, but setting it up as it’s own theme where you can customize it. You can click here for an easy run through on setting up your Thematic child theme.

So, I’ve now set up a child theme based on Thematic for Lori’s blog. Here’s what her site looks like, and as you’ll see, the child theme automatically looks just like Thematic:

But now that it’s a child theme was can go in and start tinkering around.
*taps finger tips together menacingly*
(Ok, well, not menacingly. This isn’t supposed to be scary.)
*taps finger tips together expectantly*

This is where we get into … the stylesheet! Ta da! It’s a CSS file that has all the rules for what your site looks like as a whole. I’m trying to think of a good analogy for the stylesheet … maybe think of it as your design’s DNA. It has all the guidelines for how your site displays. Some of the changes we’ll be making will be more like dying your hair or getting a tattoo – things that affect just one particular area – but appearances we want to change overall on your blog, we’ll have to rewrite the “DNA”, the stylesheet.

As I mentioned, I knew next to nothing about CSS when I started out. However, there are a ton of great resources online … CSS Basics being a good place to start. You don’t have to know how to do everything, but at least familiarizing yourself with the basics is a good idea.

You can get to your style sheet by going to your WordPress dashboard, then click “Appearances”, then click “editor”. There might be a few files available over on the right, and you want the one called “style.css”. Since you have a child theme, all the rules come from Thematic by default, but you’re not editing Thematic itself. (Again, make sure you’ve installed AND activated your child theme, you don’t want to start tinkering in the innards of the original Thematic, just your child theme.)
Here is kind of what your stylesheet will look like, starting out:

You may not be able to read it in my tiny preview above, but the friendly Thematic author has written handy and helpful notes here touching on what you need to do to change things from the Thematic defaults. It mentions different files … like
“/* Apply default theme styles and colors */
/* It’s better to actually copy over default.css into this file (or link to a copy in your child theme) if you’re going to do anything outrageous */
@import url(‘../thematic/library/styles/default.css’);”.

Basically, its just relying on the original Thematic rules unless you change it … so if you want to change something, but you don’t really want to start coding from scratch, you can copy/paste those files and just edit the lines you want to. Since you previously have installed the original Thematic before installing and activating your child theme, you can find all these files by logging into your hosting service (like we talked about how I use BlueHost), going to your cPanel, then to your File Manager. In your file manager, in the file for your WordPress (for instance, Lori’s file is called “InMyKitchenInMyLife”), open the folder “wp-content”, then the folder “themes”, then the folder “thematic”, then “library”. That contains all the folders that have the various CSS files. Don’t change the content of these files here, just copy the contents of, for instance, the default.css file, and then paste it into your stylesheet. Then you can edit lines. Today’s post is mostly an introduction to the whole topic, and in future posts I’ll share with you specific line edits you may want to do. But just for example today, let’s say we want to change the width of the site. I’ve already copied over the necessary CSS file, and I just go to the line that determines the width of the site, and change the pixel number:

I find it very helpful to know I don’t have to start from scratch and code it all myself – I can tweak! This is my simple approach. And lest panic seize you, let me tell you this – you don’t have to edit anything blindly. If there is something you want to know how to do specifically, you can probably find it online. For instance, next week, I’ll be sharing the code snippet you can insert in there so you can add a banner. But there are lots of tutorials out there if there is something you want to do and you don’t know how. Plus, there are also the Thematic forums where you can search because your question may already be answered there, and if not you can ask for help on a specific question. (But do try to figure it out first, before asking on the forums … they’re super helpful, but they do have guidelines and expectations that you’re trying to figure it out.)

So that’s how/where we’ll be changing DNA stuff. :) There are somethings that can be changed without altering the DNA. For instance, if you go to your WordPress dashboard, then to “Appearances” and then to “Widgets”, you’ll see lots of places to change things up there as well … these are more changes to a specific area. Over on the right, you can see what these different areas are. For instance, if you want to add a search box to your sidebar, you simply drag “search box” over from the widget options and drop it in the sidebar area. And there are lots of other areas you can drop widgets, such as at the end of a post, at the top of a page, etc. You don’t need to (and probably shouldn’t) use them ALL – or you’re going to start overwhelming your blog with extra “stuff”. But it is nice to have the capability to be able to easily drag and drop into any of these areas. We’ll be getting more into the sidebar, and what should go there, in a couple weeks. Next week, though, we’re going to be working on actually creating graphics, and starting to put them on the site. I can’t wait to share Lori’s new banner with you then!!

I hope that this has helped to show that getting in and tinkering doesn’t have to be scary or overwhelming. You just take it one edit at a time. :)

Do you do this kind of thing on your blog? If not, does this help to make it less scary? I hope so!
Leave your thoughts and comments below, I love to hear from you. :)

If you’ve missed the other posts in this series on DIY blog redesign, here they are:
Part 1: Discover your branding with “The Drawing Board” Printable
Part 2: WordPress vs. Blogger
Part 3: Design Tips + Design Worksheet
Part 4: Themes, Coding and Stylesheets (That’s today’s post!)
Part 5: Making your own graphics
Part 6: 7 Blog Layout Tips to Engage your Reader
Part 7: Blog Page: The Must-haves and the Panache
Part 8: 25 WordPress Tips
Part 9: The Big Reveal
Part 10: 7 Ways to Promote and Market Your Blog