Playing Dress-up: The Non-Designer's Guide to a Blog Design Theme

BlogHer Original Post

Are you thinking about a new look for your blog? Or maybe you've not started a blog yet and want to make a fabulous debut when you do. Both are good reasons to know the foundation of a blog design. Whether you decide you want to DIY or hire a pro, it's savvy to know the lingo and have a solid understanding of a blog's "parts" so you can easily follow how-to instructions and/or communicate better with your designer.

Since Wordpress is such a popular choice among new bloggers, let's use a typical Wordpress theme as our model. A theme is one of the many terms used to describe a blog design (but is more commonly applied to Wordpress blogs) and is comprised of all files needed to implement a new design on your blog. There are a lot of free Wordpress themes available, but this example is the default Wordpress theme implemented with every start-up installation of Wordpress.

It can help to think of your blog theme as dress form, like on Project Runway — a mannequin-like framework upon which you apply a new couture gown or bedazzled jodhpurs or whatever you're into. In our case, a new blog design. The mannequin framework is typically broken up into 4 main areas: the index (or content), the header, the footer and the sidebar with the designer “dress” itself provided by the accompanying CSS (cascading style sheet) file. There are other files within a theme, but these are the basics.

The Index is the file that contains the code that displays your content. When you write a blog post, this the stuff that makes it show up on the page. It often consists of your blog post title, the date, the post author, categories, the content itself and links to the comment page. This is typical of most blog designs and the index file is the mainstay of just about any blog theme, Wordpress or otherwise.

Index File - Referencing Header

The index file will usually contain references to the other files in the framework, like the header, footer and sidebar. This allows for a tidier index file and keeps things organized. It also allows for flexibility so you can reference those same header and footer files in other templates later on.

Index File - Referencing Footer

The Header is everything you intend to display (or wish for the browser to load) before the index or content. The header will usually include the browser title, any meta tags/keywords, links to the CSS file (so the "mannequin" knows which "dress" to put on), any required script files, and the code for the blog banner and navigation. (So if you're looking for the file where you change your banner, this would be the place!) Learn more about the Wordpress header file here.

 

Header File

The Footer is everything you intend to display after the index or content. The footer will often include the copyright information, site credit and links to privacy policies or website terms and conditions. This is fine print found at the very bottom of your blog design.

Footer File

The Sidebar is where most additional info lives in your blog design. Features like a category list or a blogroll are popular choices for a sidebar. This area can also contain ads, Twitter feeds, search features, recent posts… whatever blows your dress up, really. The default features are usually search, categories, archives and a blogroll.

In Wordpress, sidebar goodies are often controlled as a widget. A widget is a section of content made to be easy to add to, remove from or arrange in your sidebar without the user having to tinker with code. If you go into your Wordpress dashboard and choose Appearances > Widgets, you can see all the widgets Wordpress has available for you to use right out of the box. You can read more about widgets here and more about customizing your sidebar here, on the Wordpress.org website.

And finally, the fashion itself — the CSS file. The CSS, or Cascading Style Sheet, is where all the colors, font styles, layout and most graphics are determined. If you want to change your blog background color, this is the file you'll need to access. If you want to change the font, this file is the go-to file. In some themes, if you want to change your banner graphic, you may want to look here if you don't find it in the header file.

There are lots of elements to CSS, so you will need to be somewhat familiar with how they work, but this file is where the design magic happens and a big part of how you get a blog theme to go from drab to fab! If you didn't have a stylesheet, your blog design might look something like this:

No CSS

Snoooooze! You can learn more about CSS here.

If you feel like digging deeper, you can learn more about Wordpress themes on their website. If you're using Blogger, here are some handy Blogger template references for you, as well.

These are the foundation files of a blog design theme and should give you some essentials to get started. In future posts, we'll cover some frequently asked questions, such as how to change your blog banner or change the colors and look of your blog using the style sheet, as well as tips on what are considered "best practices" in terms of good design and pitfalls to look out for in terms of structuring your own new look. Your blog will be dazzling in no time!

Happy blogging!


Joelle Reeder is the brunette half of the blog and website design duo, The Moxie Girls™ of Moxie Design Studios™. She is the co-author of The IT Girl's Guide to Blogging with Moxie and designer of hundreds of blogs since 2003. She also blogs at tenth-muse.com and makes a tasty martini.

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.