Blog

How to design for WordPress

June 12, 2015

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.

Join the Agency Partnership Program

Cloudways are building the most valuable agency-focused program in the cloud-hosting world. Access a suite of benefits that increase your peace of mind, boost your productivity, and fuel your agency’s growth.

Request Your Invitation Now

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact us

Want to talk? Arrange a free consultation with one of our agency experts:

Search

Got a specific topic in mind you want to check out? Use the search below:

Subscribe to the podcast

More Posts

Sometimes we write stuff. Not all the time. But when we do it's pretty good.

Using managed cloud hosting for mission critical websites

Over the years our agency has had the privilege of working on some very large, resource intensive, mission critical projects....

How to structure a discovery meeting

With any project, it's essential to go through and plan what it is that you need to deliver for the...

10 awesome Facebook groups for design agencies

Let's face it, no matter how many people we might be working with, we all need a community of friends...