The building blocks of a WordPress theme

workerbee

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!

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%