Antbag.com

Since I started offering Wordpress themes, I’ve noticed that a far majority of new bloggers want to customize their theme. I don’t blame them, that’s what I did too. Many of these new bloggers who are using one of my themes, contact me when running into things that they can’t figure out. I realize that there is a real blind-spot when it comes to how a page is laid out. In this post, I hope to shed a little light and hopefully clear up some of the confusion.

All Themes Are Not The Same

Generally speaking, I think that most of us have probably tried to change a few things on a CSS stylesheet before. It would make sense that what works on one, will work on the next. Unfortunately, there’s a little more to the equation. I’ve noticed that many will assume changing the width of the header, for instance, will have the same effect on all themes, however, this isn’t the case. It truly depends on how the theme is laid out in the first place. Remember, any styles applied on the stylesheet, are adding style to the HTML elements as they are defined within the HTML. So header isn’t necessarily the same from one theme to the next. It depends on how that component is defined within the HTML.

Two Common Layouts

Probably the most common way that a web page is laid out is like the one in the illustration below. One of the main components of this layout that I believe confuses a lot of people is the wrapper…..let me try to explain.

The wrapper in this illustration is nothing more than an invisible line that surrounds the other components of the design within the body of the page. It’s not always called wrapper, it can be called anything. It’s whatever name the theme designer assigns to this particular div within the HTML. I usually use the name wrapper because it makes sense to me. Now when you open your stylesheet, and apply styles to the #wrapper{} section, those styles apply to everything within this invisible line in your layout. You can add a different background color than the rest of the page, or add a border to surround the components within the div, etc. That’s easy to understand, right?

What if the design is more like the current design on my site?….where the header stretches across the entire width of the screen? That brings me to my second example of common layouts.

You’ll notice that the header is outside the wrapper in this example. If the header were included in the wrapper, it would not work right. There are a few other tricks that can be done to achieve this effect with the header inside the wrapper, but there’s not much reason. So in this example, if I set the width of the header to 100%, it will span the entire width of the screen. If I set the width to 100% in the first example, the width of the header would be 100% of the width of the wrapper. Are you still with me?

Determining Your Themes Layout

I was in the same situation at one time, because I didn’t yet understand the underlying structure. Now, when I set out to customize a theme(whether built on Wordpress or not), my first step is to determine which files are the main components of the design. In a Wordpress theme, that usually consists of the header.php and the index.php files. The other files that are included with the theme are also important files, but the two mentioned are generally the ones you need to look at to see how the layout is structured.

For instance, in the header.php file you’ll find the code for the site title, and possibly the navigation menu. Sometimes the site title/header and the navigation menu will be included in this wrapper. Other themes may include the menu, but not the title. Maybe neither one is included. But that’s what you need to find out before making a lot of changes on the stylesheet. If you can figure out how the site is layed out before starting your customizations, it can save you a ton of frustration.

I realize this is a simplistic look at layout, but from the questions that I get, I would say this is the biggest roadblock that bloggers run into when trying to pimp their site.

Other Posts In This Series

• Replace Your Blog Title with a Logo
• How To Change the Width of Your Blog Design
• Wordpress Theme Tips: Text