Designing for wordpress? – Part II

If you have arrived here without reading part 1, you might like to start there. In this post we look at the functionality that is available with wordpress plugins so that when you’re designing for wordpress you have more of an idea of what is possible and what to include in your design that is…

WordPress

If you have arrived here without reading part 1, you might like to start there.

In this post we look at the functionality that is available with wordpress plugins so that when you’re designing for wordpress you have more of an idea of what is possible and what to include in your design that is easy to implement in wordpress.

WordPress Plugins

One of the key features of the wordpress system is the abundant availability of plugins. There are many thousands of plugins available and they each in turn allow the core system to be extended. What follows is a short summary of some of the main types of plugins we use regularly use.

Image Display

Designing-for-wordpress-figure-6
figure-6
Designing-for-wordpress-figure-7
figure-7

Using a javascript layered effect to display images is a popular way to show off artwork or a gallery of pictures. Figure 6 shows an example of this in use, the image overlaying the main web page. This effect is commonly triggered by clicking on a smaller thumb-nail version of the image (see figure 7) which wordpress automatically creates when you upload the main image.

Commonly a web site requires content to be featured on the home page of the site.

Again there are a number of good plugins that allow for images and text to be displayed on the home or other internal pages in a slider. See figure 8 for an example.

Designing-for-wordpress-figure-8
figure-8

This style of ‘featured – content’ plugin is popular as it allows an end user to easily create content that is featured on the home page without advanced graphic design skills. In turn it keeps the web site looking fresh and new, while highlighting to the end user a featured piece of information; be it a new product, event or simply the latest blog post.

Designing-for-wordpress-figure-9
figure-9

Forms

Figure 9 shows a simple newsletter sign-up form. The plugins available make creating even very complicated forms with advanced logic an easy task. Most of the plugins allow a designer to control the look with standard CSS, keeping the forms in touch with the design of the overall web site.

There are several good plugins for forms that allow you to:

  • Send data via email
  • Store data in the WordPress database
  • Export form data as a CSV file
  • Validation forms, required fields and form logic
  • Export the form data directly to some CRM systems
  • Control the look of the form
  • Easily build new forms with text boxes, drop down menus and click boxes
  • Prevention spam

Comments, Discussion & Sharing

Depending on your web site, you will commonly want to encourage user feedback. WordPress by default has a very good comment system where a user can easily add their point of view directly to the end of a post. Other users can then comment as well or respond to the original comment as they require.

By default this does not require a plugin as it’s built right into WordPress, but it should be given some consideration when you are designing a page layout. Figure 10 shows the standard WordPress comment form that is placed at the end of each post.

Administrators of the site are able to moderate comments added to WordPress through the admin panel.

Designing-for-wordpress-figure-10
figure-10

Equally as important these days is giving users the ability to share the content on your site with their network of online friends, through sites like twitter and facebook. Web users often want to be able to post a link to something they think their friends will be interested in. Below in figure 11 is an example of a plugin that can be placed at the bottom of each post to allow users to do just this.

Designing-for-wordpress-figure-11
figure-11

Reader Interactions

Leave a Reply

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