Creating custom and interactive content in WordPress

WordPress has come a long way from its original blog editor origins.   Now with plugins, themes, custom post types and taxonomies, you can create a professional and versatile website.   In this post I will share some of the more interesting things we have done with WordPress.

Periodict tableAn editable Periodic table

The requirements

For our client  Promethean Particles, we created a versatile editable Periodic Table.   They needed to show the wide range of products that they could produce in a format that would appeal to their current and potential market.

The main criteria was:

  • It had to be easy to edit and link to their products
  • Squares needed to be colour coded and easy to change
  • Product pages needed to link into a custom taxonomy making it easy to explore and filter
  • Different types of contact and sample request forms needed to be added

What we did

Once we had the HTML for the layouts it was a case of converting it into custom templates and create the taxonomy that would allow us to filter the content via multiple paths.

product-page

A product page that automatically pulls in related categories.

The main building blocks

  • Custom Post Types
  • Custom Taxonomy
  • Custom Templates
  • A little clever PHP coding to bring it all together

The periodic table itself is edited using it’s own custom post types, so the colours can be changed and easily linked to different products.  The category and product pages automatically bring in related categories and products.  This makes it easy to explore, with a minimal time needed to make alterations.   Every aspect is editable by the client rather than being  hard coded into the templates.

Visually it is quite a minimalist style but it shows what can be achieved in WordPress,  with a little imagination and planning.

Filtering content with custom taxonomies

Screenshot of example video page for Historians on Teaching

Example video page for Historians on teaching using custom tags to create links.

For Historians on teaching we created a detailed custom taxonomy allowing the content and videos to be filtered by multiple criteria.   The tags for Location. author, organization and country it is easy for the visitor to explore the content in multiple ways.   We also added extra fields for duration of video and recording date.   With Custom post types these extra fields made it easy to create a consistent layout across the website while ensuring the right data was inputted for each piece of content.

You can see the custom taxonomy in use in the picture on the left.  The purple links are tags inputted for each video and link to pages that include all the videos with that tag.

Pulling content into multiple pages and sections

Projects filtered by custom catagory on the EEC construction websiteOn the EEC Construction Services Ltd website we use a combination of custom post types and a custom taxonomy to pull project case studies into both the ‘Projects’ and ‘Service’ sections.     By tag the projects with a custom categories and then relating those categories to the appropriate service, projects can be pulled to multiple pages without having to repeat the input of content.

Once again we used a combination of custom post types, extra fields and a custom taxonomy, to create a consistent layout across the website.

 

 

With some quite simple, but powerful techniques, WordPress websites can take on the sophistication normally seen with expensive commercial CMS systems.

 

Comments are closed.

Latest Tweet