Designing for wordpress?

While wordpress is very flexible it’s worth having a few things in your mind when doing the site design. We commonly work with external graphic designers who are working for one of our clients or come to us directly to build a wordpress theme for a site they are creating. We have been providing for a…

WordPress

While wordpress is very flexible it’s worth having a few things in your mind when doing the site design. We commonly work with external graphic designers who are working for one of our clients or come to us directly to build a wordpress theme for a site they are creating. We have been providing for a while now a group of ideas that are worth taking into consideration when putting a design together that will eventually end up as a wordpress site.

We thought it would be good to share this for designers, so here goes!

Why WordPress & Thesis?

After the design and setup of the site is complete, wordpress provides a great platform to manage your site on and ongoing basis. Read here for more thoughts on choosing wordpress.

Thesis is a theme framework that operates inside WordPress, creating a rapid theme development environment. It creates very clean and well organised HTML/CSS that search engines love.

WordPress page layout ideas

figure-1
figure-1

When designing for WordPress & Thesis you can have commonly used elements, including header & footer as well as 1, 2 or 3 columns of content. See the diagram above,  figure 1, all of these example layouts are possible. The size of the various sections may vary to give large amounts of freedom when creating a design.

designing for wordpress figure-2
figure-2

Figure 2 below exemplifies this idea where you can create a design that has a much larger header that could accommodate large images or a flash heading.

The main content area on any of these example layouts is also very flexible when filling it with content. It could be a page of static material, a list of blog post excerpts or blog posts in the full version.

It is also possible to have a mix of all of the above. For example some static content to introduce the site, one blog post in full and then a number of blog excepts with ‘read more’ links.

Figure 3 below shows an example of this.

Designing-for-wordpress-figure-3
figure-3

Thesis elements

There is a lot of functionality built right into the thesis framework that can be taken into consideration when creating a design.

Designing-for-wordpress-figure-4
figure-4

Multimedia Box

Figure 4 shows the Multimedia box. It can be used to display one or more images, either linked to specific pages or a random image on each page load. The box can also be used to embed video objects (eg youtube clips) or display advertising.

Post Images

Thesis has post image functionality which means you can assign an image to each post that appears on the page with the post but also is thumb-nailed to show in small format when viewing search result pages or archive pages.

Figure 5 shows an example of post images on a search result page.

Designing-for-wordpress-figure-5
figure-5

Ideas & Examples

Sometimes it’s good to have a look at some examples, there’s no shortage of great looking sites that use wordpress.

Start here at our featured work page, all of the sites you see here are wordpress based.

Thesis has a showcase of sites that use the system, it can be viewed here.
http://diythemes.com/showcase/

Finally WPFloat is a gallery of WordPress sites and demonstrates the designs that are possible with WordPress.

Read part II here, it goes on to discuss the functionality available in wordpress plugins.

Reader Interactions

Leave a Reply

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