WordPress templates are dynamic and, to a developer, are an art form. In a perfect world, designers would also be developers and vice versa – this way the coding and functionality would be conveyed in perfect harmony with the visual design.

Unfortunately, both fields are intense and deep studies; people generally choose one or the other. For that reason, when it comes to designing the visual appearance of a WordPress theme, designers might not know exactly which dynamic pieces make up a template.

Using the 99designs WordPress-powered site as an example, this tutorial offers a breakdown of a simple theme for web designers entering the realm of WordPress design.

1. Static pages

About

Static pages can include, but are not limited to about, contact, biographical, map, or hours pages. Often times the static page requirements become apparent through discussion with the client.

On 99designs, one example of a static page is the “About” page featured above. Designing a static page is the same as designing a page for any other website, so WordPress specific concepts need not apply here – for basic WordPress templates at least.

2. Dynamic pages

Dynamic pages in WordPress themes are pages that relay site owner or contributor submitted database information in a variety of different user comprehendible formats.

Main Blog Page

Main blog page: The basic building blocks of the main blog page are the header (often fixed to the top of a page) and a feed of articles featuring an image, a title, a short excerpt from the beginning of the article, the date published and the author.

Single Post Page

Single post page: The basic building blocks of this page are the header (again usually fixed to the top of a page) and the article’s featured image, title, copy, images and captions. In the case of 99designs there is also a comments section.

The archive page: This is a page that is often unlinked to or, in the case of 99designs, disabled so client communication should be utilized to decide its necessity. The archive page essentially zooms out from a blog’s timeline and shows all posts in a, usually, monthly or yearly breakdown. A designer can decide to include thumbnails or perhaps keep it as simple as article titles.

3. Dynamic page pieces

SM Links

Social media links: Needless to say, these would need to be designed for most clients. They often appear on both the main blog page and the single post page.

Widgets

Widgets: WordPress offers a handful of widgets. 99designs utilizes the search, newsletter, popular tags, and related articles widgets. This is another place where client communication is likely necessary to find out what widgets are wanted. Widgets often appear in the side columns of the main blog page and the single post page.

Conclusion

With the resources above, any designer should be able to communicate with a client on what elements a website needs and knock out a basic WordPress theme.

Thoughts or questions? Comment below!