WPCoder

Nearly every project we handle here at WPCoder uses WordPress as a CMS, rather than just a blogging platform. It’s exciting to see WordPress being used more and more as a multi-purpose CMS as the software evolves, and it presents a new challenge for each project to make the theme as dynamic & easy to manage as possible by the client. However, with great power comes great responsibility, and unfortunately there are too many opportunities for clients to break the layout of their site by editing content. One of our major goals is to produce themes that eliminate the possibility of editing-related problems as much as possible, and we spend time on each project thinking through every part of the theme’s functionality from both a development standpoint and from the client’s pont of view. Here’s a glimpse into our development process and an example of one way we try to make our themes as client-proof as possible.

Real-life example

Let’s take a look at one example from a recent project. Here is the area of the page in question:

This section showcased the company’s four services, which are also set up as sub-pages of an “Our Services” page. The original request from the client was to set this up in the admin with column shortcodes. The client would wrap each column with a shortcode (replaced with HTML in the theme) and fill in the image, title, description, and Learn More link. Red light!

That’s a pretty tall set of instructions for a client who has probably never even used WordPress before. Additionally, we wanted the code to include the following details:

• Presentation: The image and title are inside one link tag so that hovering the image also changes the title color – a minor but effective design detail.
• Navigation: The image, title, and Learn More link should all point to the corresponding product page, which requires some link-finding and copy-and-pasting in the admin – not very intuitive.

We also found during testing that any extra line breaks in the code – even between the shortcode and the first bit of HTML – would be reflected on the site and cause the four columns to stagger downwards in the box. To fix that the client would have to make sure all extra line breaks were removed, which is just another point on that long checklist.

Of course, we could enter all of the HTML and content ourselves before the site launches so that the client doesn’t need to touch the section, but then what’s the point of using WordPress? Wanting to keep all the editing flexibility but also removing the possibility of breaking the layout by editing content, we proposed a new solution that took advantage of theme code and core WordPress features.

Because all four columns link to sub-pages, we decided to just use a simple query in the template to display those four subpages. The images at the top use the Featured Image function and are automatically inserted and linked within the template. The text content below the title is pulled from the page Excerpt, and the Learn More link was appended at the end. Here’s what that code looked like:

<div id="services" class="clearfix">
	<?php $services = get_page_by_title('Our Services');
	$query = new WP_Query('post_type=page&post_parent='.$services->ID.'&posts_per_page=-1');
	while($query->have_posts()) : $query->the_post(); ?>
	<div class="service">
		<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail('thumbnail',array('title' => '')); ?>
			<h3><?php the_title(); ?></h3>
		</a>
		<p><?=$post->post_excerpt?> <strong><a href="<?php the_permalink(); ?>">Learn More &raquo;</a></strong></p>
	</div>
	<?php endwhile; ?>
</div>

(could someone please help us get PHP/HTML syntax highlighting working? :) )

And that’s all it is! By using built-in WordPress functionality such as the featured image and page excerpt (which needs enabled first), we were able to completely reduce the possibility of something breaking after being edited.

Golden rule: No layout HTML in the content editor!

Our philosophy is that layout HTML should never, ever be placed in the WordPress content editor. Even just switching between the Visual and HTML editors – or using the wrong one to add your HTML – can break the whole page. Remember who your client is. Someone who isn’t very tech-savvy will never be able to jump through the hoops required to keep an HTML layout intact.

I hope the example & explanation in this post inspired you to re-think how you code your themes and set WordPress up for your clients. We plan to share more examples like this in the future, not just to show the amount of thought we put into features like this in a project, but also to build some helpful development guides that go beyond the code.