How to Change the Design of your WordPress Blog

You know that you have to write great content on your WordPress blog to be successful. Plus you have discovered all the SEO tips to get you on the first page of Google. But, you want more! You want change the design of your WordPress blog.

blog

In order to blog with WordPress like a pro your blog needs to look clear, simple, readable, presentable and elegant.

One option you would have would be to purchase a professional theme from one of the big theme sites. I would recommend Genesis from StudioPress, Elegant Themes, Thesis or WooThemes.

However, if you don’t want to go that route, or even if you do, here are some how to’s for tweaking your blog’s design.

Locate your theme files

The files in your WordPress package that determine the look of your site are called the theme files. They are stored in your WordPress files under wp-content/themes/[theme_folder] where [theme_folder] is the name of your theme. If you’re not sure what your theme is called head over to Appearance > Themes in your WordPress administration area and see which theme is activated.

Inside your theme folder there will usually be just one file that determines the look of the website. This is a file usually called style.css. You can look at it and edit it if you go Appearance > Editor in the back end.

If this file makes no sense to you at all, don’t worry! Read on and all will become clear.

Use Firebug and Developer Tools

There are fantastic tools available to help you re-design your blog.

If you’re using Chrome you can view Developer Tools (you can also use Developer Tools in Internet Explorer but I seriously recommend that you don’t use that browser). In Chrome go View > Developer > Developer Tools (Cmd/Ctrl-Opt-I). And if you’re using Firefox you can use the Firebug extension.

Both these tools will open a panel in your browser that will show you all the styles pertaining to any element on your site. You can make a change in this panel and see it take effect in your browser before you decide on the change and edit the style.css. This is a fantastic way to learn CSS.

development-tools-magnifying-glass

Click on the cursor (it can be an arrow or a magnifying glass), click on the element that concerns you and then the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel. So, if you click on a subheading you may see that it is controlled by the h2 element in your main CSS file.

Below is a screen shot of developer tools in Chrome checking out the subheading (h2) styles of this blog page. This is the style of the subheading above where it says: “Use Firebug and Developer Tools”.

developer-tools-panel

Here (line-height: 30px; font-size: 25px; margin: 10px 0 20px;) you can see that my subheads in the blog post have a font size of 25px, a line height of 30 pixels with a 10 pixel margin above and a 20 pixel margin below. And on the right hand side you can see where this is stipulated: on line 888 of a file called style.css (9 times out of 10, that’s what the CSS file is called).

Moving down the above image there are more general style declarations. Here (font-family: 'GraublauWebRegular', Arial, Helvetica, Tahoma, sans-serif;) we can see that all headings (h1, h2, h3, h4, h5, h6, I really don’t think anyone would use a h7!) have the font "GraublauWebRegular" (this is a nice @font-face font). If the computer can’t display the Graublau font, it should use Arial. If not Arial, Helvetica. If not Helvetica, Tahoma. If not Tahoma, the computer will display any sans serif face. Are you starting to understand this CSS mark-up now?

The next CSS declaration for the headings is “clear: both;“. This means that the heading will always start on a new line and clear any floated images that may be to the left or right of it. These two style declarations, the font family and the clear are stipulated on line 878 of style.css.

Finally, we have some more general styles that are affecting the heading (you’ll notice some of these are crossed out, we’ll get to that later).  First let’s deal with the ones that are not crossed out. “color: #333;” means the text color should be a dark gray. “font-weight: normal;” means the heading shouldn’t be bold. There should be no padding around the heading: “padding: 0;” and no text decoration (underlining) “text-decoration: none;“.

Now, the crossed out styles are the styles that are superseded by other styles. These are general styles that would be adhered to if another style hadn’t been specified. So the font-size of 15 pixels is over-riden by the font size of 25 pixels in the h2 styles above. The h2 style takes precedence because it is more specific to what we are looking at. As we are actually looking at the style of the h2 the h2 font size declaration will be accepted as the true size of the heading rather than the body style which is too general as it applies to the whole body of the website.

Similarly with the other crossed out elements under the body styles, the line height and the margin. Both of these styles are specified in the h2 declaration so those specific styles are used.

By the way, this is why it’s called Cascading Style Sheets, because the style declarations cascade down from general to more specific declarations.

Design rules for your WordPress blog

Now that you know how to edit the CSS of your WordPress blog, here are some basic style rules to help you on your way. But first, here’s a crucial tip for editing your theme files.

Always keep a copy of everything! Just before you start editing your style.css or any file in your theme folder, please, please, please back it up. Locate the theme folder using an FTP client such as Filezilla, locate the theme folder at wp-content/themes/[theme_folder] where [theme_folder] is the name of your theme and copy the file to your computer.

So, once backed-up, tweak your styles to your hearts content! Here are some important design tips to keep in mind:

  • Always make sure your text is readable! Not only should you pay attention to font size but also the color of the font versus the color of the background. If you are young with perfect vision, remember not everyone is as able as you to read the small text! This text is 15 pixels in size. I try not to put body text smaller than 14 pixels.
  • The line height (or line spacing) should be 25% greater than the font size or more. So if the font size is 15 pixels; your line height should be 19 pixels or more. If the font size is 1 em; your line height should be 1.25 em or more. Line heights are especially important for headings as many theme designers never check to see what headings look like if they go over one line.
  • Paragraphs should have a space between them and this should not be created with a double return. The space after each paragraph should be around half the line height. So, if your line height is 20 pixels, there should be around 10 pixels between paragraphs. This is usually done with either padding or margin on the <p> tag.
  • In the WordPress HTML editor two returns equal one in the Visual editor! Look at the tab on the top right of the WordPress text editor where you write your posts, it will either say HTML or Visual. To create a new paragraph in the HTML editor hit return twice; to create a new paragraph in the Visual editor hit return just once. To create a line break (new line with no gap) in the HTML editor hit return once; to create a line break in the Visual editor go shift-return.

Let me know what you think

Do you like to tweak your blog theme’s stylesheets? What other design “rules” do you try to maintain? Has this article been useful for you? And, don’t forget to click one of the sharing buttons underneath if you enjoyed this post.

Did you enjoy the article? If so, please share!

Readers Comments

  1. It’s a free plugin which (as the name implies) backs
    up your Word – Press site to your Dropbox account.
    Java – Script to Footer Moves All Java – Script Code to the Footer.
    Do not believe that building a good first impression ends at possessing a superb design.

  2. Do you mind if I quote a few of your posts as long as I provide credit
    and sources back to your blog? My website is in the very same niche as yours and my users would truly benefit from a lot
    of the information you provide here. Please let me know if this ok with you.
    Appreciate it!

Speak Your Mind

*