How to design for WordPress

Design for WordPress – Theme Structure

Part One

I am often asked by designers, how to design for WordPress. There seem to be a wide range of mis-conceptions and myths about the WordPress design process that stress many designers out. It is my aim, and the aim of the company to remove the stress from designers and agency’s lives, and add epic value.

Over the next few posts we are going to break down a standard WordPress theme to give you a deeper understanding of the structure which will help inform what layouts and designs you need to supply to your developer. If you are visual (you are a designer after all), then check out this awesome diagram at wphierarchy.com.

Here goes.

Header

Filename: header.php |  header-[name].php

When a theme is built, there is a common header file (header.php) that is shared across all pages. This normally contains the site menu, logo and branding elements and in some designs a slider and or other call to actions.

There is no need to be restricted by this however as WordPress does allow for you to have multiple different header layouts which is particularly useful if you require different layout structures for different areas or landing pages. If you do opt for multiple headers, you should be sure to make your developer aware of this plan so they can estimate the build cost accordingly.

Footer

Filename: footer.php |  footer-[name].php

Again, used across all pages this closes off the code of the page and usually contains important JS files. Regards design this can contain footer widgets and other information. Again you do not need to be restricted, if a particular page requires a different footer layout, you have this freedom with the multiple footer options. As with the header file, it is important to warn your developer in advance if you opt to use multiple footer layouts.

Page

Filename: page.php

There are many page types and options you can have in WordPress but lets tackle first the “Standard” or “Default” page layout. This should be the most common layout for content pages. This should include the page title, the content at minimum.

Post

Filename: single.php | single-post.php

This is the layout for a single blog post. Blog posts often include (but not limited to):

• Title
• Post Content
• Author
• Featured Image
• Date
• Category/Categories posted in
• Tags
• Commenting section

If you choose to link out to an author page, you will need to ensure you provide a layout and what fields of information you require in your design for WordPress.

Blog List

Filename: archive.php |  home.php | category.php | taxonomy.php | tag.php

This will be a paginated list of the site blog posts. They will likely contain similar fields to the post itself, but rather than showing  the full content, they will show an excerpt of the content with a “Read more” link or button. The read more text can be changed to whatever you desire, and also styled accordingly.

As you can see in the file names above, there are multiple ways to view the blog list. The user may simply access the standard blog live and view the latest few posts, however should they click on a category, or a tag then the relevant files will take over the display. They are all usually very similar in design and structure, but might include “Showing XXX category” on the category list and so on.

Search Results

Filename: search.php

This is the layout showing all the search results. This would be a list of posts and pages that match their term. It is recommended that you include a line that reminds people of what they searched for, and also provide how the page should look should no results be generated.

Coming Up In Part Two

We have only touched on the basics of a WordPress theme. We will delve deeper into the WordPress structure, expand on categories, explain custom post types and taxonomies and much more to come. Be sure to subscribe to the blog in the sidebar to be notified when we next post.