WordPress Div Structure Standards

An article by Neil Davidson    7 Comments

WordPress follows a pretty straight forward HTML structure that can be easily broken down into a usable diagram. With this diagram any web developer or graphic designer that is involved with slicing a photoshop wordpress theme, Illustrator wordpress theme or cascading stylesheet theme can build a universal structure. Any block element such as header or main can have the inner DIV containers swapped quite easily while retaining a solid structure.

WordPress Div Structure Diagram

WordPress DIV Structure Advantage

This WordPress DIV structure diagram uses the three most common layouts: 1-column, 2-column, and 3-column. By using the basic Header -> Main -> Footer approach we can easily swap any layout into those three containors. We can, for example, build a home page using a full width, 1-colum layout but use the 2-column header. What about putting navigation on the left side running vertically? We can use the WordPress DIV structure standards to do that with ease:

• Lets use the 3-column header and use the middle box for ad space
• We’ll remove the NAV containor because we won’t be using it.
• Using the 2-column layout we can replace the second column name with NAV instead of Sidebar
• Add the footer

That’s it. The easiest way to think about using the WordPress DIV structure diagram is pretend you have a pile of paper all cut up into the boxes and containors in the diagram. So long as we use the same Frame Header -> Main -> Footer we can place those cut pieces of paper in any order and shape we choose to create our website layout. A WordPress theme with dozens of unique layouts using a standard.

A DIV Structure Standard by Name

The WordPress DIV structure standard displayed here is more then just a puzzle with infinite design potential. It creates a very important standard in web development – Naming Conventions . By using the structure with the designated HTML Div naming conventions we bridge a often overlooked gap between the designer and the programmer. The designer won’t ever need slice the theme into a working wordpress theme. A simple XHTML CSS theme is all that is needed. The programmer can take that and add in the neccessary code to make it work within wordpress with relative ease.

By using this diagram the designer and programmer can work in tandem with each other. A programmer can begin programming all the WordPress functions because they will have the fundamental wireframe used from the WordPress DIV structure standard. The designer can create the theme in Photoshop or whatever tool they prefer, slice it to XHTML and send it to the programmer. By doing this the delay caused while the programmer waits for a complete design is eliminated.

The Designer

• Designs the theme
• Gets approval from client
• Slices design into XHTML using the DIV structure with naming convention standards
• Sends it to the Programmer/Developer

The Programmer

• Creates the theme frame from the wireframe – based on the DIV standards
• Adds custom and built-in WordPress functions
• Splits the XHTML Design recieved into Header -> Main -> Footer
• Places WordPress code into the template
• Tests the template

Both the programmer and designer know that the header has a clickable logo, banner ad, and a search bar within the header. They both know that the ID or Class name in the css is going to be logo, header_more, and header_right. They can both use .post{} within the CSS to define how wide the post containor will be. They use the same naming standards and, thus, are on the same page.

This is the basic WordPress DIV structure standard and custom classes and containors will be added for additional features such as Banner Sliders, related posts, sidebar navigation boxes, and much more, but the important outline and framework of the design is established universally between the designer and programmer.

Design Standards Are Future Proof

The other, less thought about, advantage to building a set of standards is when looking to the future. With a design standard any programmer or designer can quickly go into the WordPress theme months down the road and quickly, and efficiently make adjustments to any element without have to search endlessly. How often do we find ourselves going back to a website that didn’t have a standard set and found, in the CSS file alone:

.bg{color:#fff;}
.background{color:#cfc66;}
.conbg{color:#fff;}
.boxbg{color:#fff;}

And lets say the client asked us to change the text color of the sidebar, or post entry to red. Which of those style classes to we use to make that simple change? We will need to waste time testing each one until the results we want are displayed, or use other tools to eliminate the other classes. With a standard set we can simply open the CSS file and change exactly what we need quickly, and without searching:

.sidebar{color:#fff;}
.sidebar h1, h2, h3 {font-size:1.7em;}
.post{color:#ccffad;}
.entry{color:#3c66cc;}

As you can see, using a WordPress DIV structure standard is far easier and more efficient both pre-development and post-development. If the client wanted green headers in the sidebar we know exactly where to find it.

I hope you enjoyed this WordPress DIV Structure Standard article and find ways you can use it to benefit you and your company. I’d like to give a special thank you to Walter Matyas, as this fantastic designer played an integral role in establishing these standards.

Related posts: