The recently launched Clara Persis site illustrates how you can achieve a high-end, well-designed website without going crazy with unique templates for every single page. It also may help clarify what we actually mean when we talk about page templates in the context of a content management system (a point of confusion for many clients).
About the Site
Page Template Strategy
It can be tempting to have every single page of a site designed to be completely unique, but doing so is expensive as each page then requires its own template. Every template is more time spent coding (and designing). Instead, often some pages can use the same overall layout and thus the same template.
Using one or two templates for multiple pages also lets you make the most of a content management system like WordPress in that you can vary the content within the template from page to page. Sometimes that variation can actually be quite noticeable through smart styling and the use of imagery.
For Clara’s site, we used a couple of unique templates (the home page, for example), but also some reusable templates.
The “Default” Template
For every site I build, I try to create at least one “default” template that can be applied to any future pages that are added to the site. For Clara’s site, this template is currently in use on the “Meet Clara” and “Services” pages:
Default page template, click to enlarge
When you view the side by side screenshots (especially at small sizes), you can see that the layout is the same. There’s the left-hand image, with randomized testimonial underneath, and then the right-hand content block.
Each page using this template has its own content slotted in via the content management system. Particularly in the text content block, those pages can differ quite a bit via text styling and arrangements of headers, lists, quotes, etc. One important reminder for these pages, though, is that they should be consistent in how various styles are applied.
For example, in HTML and CSS we typically define up to 6 header styles,
<h6> and the way those styles are used in a page reflects the outline or content hierarchy. For SEO, accessibility, and general best practice reasons, we typically try to avoid jumping around through different header levels just for appearances.
If you have pages that style their headers or alter the way the hierarchy is handled, you may force a different template just to handle the styling even when the layout is otherwise the same. Avoid that unless you have a really good reason for it!
The Grid Template
The other template we reused in Clara’s site is the grid of logos:
Grid template, click to enlarge
This template is used on both the “Clients” and “Press” pages. For each item in the grid, Clara can choose to include a larger detail image as a pop up, or to link externally:
Underneath the grid
The grid template can be applied to as many pages as Clara wants, so if she eventually decides to break her press page into separate pages for web and print mentions she can do that and apply the grid template to both. Within the individual grid page, she can add, rearrange, and remove logos and related content at will via the simple interface shown above.
Other than the home page template, which cannot be assigned to any other pages, even Clara’s one-off templates can technically be applied to other pages in the future if she wants via WordPress’ page templates option. These layouts are more distinctive, so that’s less likely to be desirable, but I try not to unnecessarily shut any doors in development.
One such template is used on the “Process” page:
Process template, click to enlarge
For this template, the columns are handled via a repeater field (thanks to Advanced Custom Fields, and I believe we ended up making the number flexible between 3 and 5. Here’s the editing view:
Underneath the Process columns
Since all the content except the numbers themselves is editable, the purpose of this page could change easily without the template becoming obsolete or requiring developer support to modify.
While the above content strategy/ page template structure is something of the hidden power underneath this site, of course I would be remiss if I didn’t also point out a few of the cool details as well.
The testimonials on all pages using that default template are contained in one central entry area and then are displayed randomly on page load. This is a more dynamic way to handle that content and also contains the content entry to one edit area:
Underneath the testimonials
The fields for the testimonials are Advanced Custom Fields repeaters on an options page (both via premium plugin add-ons). Here’s the code underneath the randomized display:
<?php if ( get_field('testimonial','options') ) :
$rows = get_field('testimonial','options');
$row_count = count($rows);
$i = rand(0, $row_count - 1);
echo $rows[$i]['content']; ?>
<?php endif; ?>
The first two lines of PHP grab the content from the fields, and then the two lines starting with
$row_count randomize the testimonials. The line beginning with
echo spits out one testimonial on the page.
Blog Post Details
Clara already had a very popular blog which was merged into the new info site. While the overall blog design maintained the clean lines and focus on typography and photography evident in the rest of the site, it also has a few really nice blog-specific details worth pointing out.
Post header detail
There’s a lot of detail and interest cleanly integrated into the top of each post, as shown above:
- The date display is a lovely change from the average blog, and was accomplished by splitting the date into pieces in the code (e.g.
<?php echo get_the_date('Y'); ?> for just the four digit year) and styling them each differently.
- We used custom social buttons to allow for quick sharing without breaking the branded feel of the page (I usually recommend against this in busier layouts where the buttons are at risk of getting lost but it works nicely in a minimal layout like this one).
- Of course, there’s also the on-hover Pinterest button!
Lower in the post, there’s the related posts display, which we accomplished with the NRelate plugin I mentioned in my post on some of my favorite WordPress plugins:
Post footer detail
Finally, I created a custom widget for Clara’s blog sidebar that displays a smooth slider of favorite posts.
While there are a few plugins with similar functionality, none worked or looked exactly the way we wanted and since we were already using a jQuery slider for the homepage it was easy enough to add something custom for the sidebar.
Clara uses a special category to feed posts into the slider, which makes it easy to maintain. Since it’s coded as a widget rather than hard-coded into the sidebar area, she can also drag and drop it like any other widget if she wants to rearrange her sidebar content. The title is also editable.
I’m so pleased with Clara’s site, I hope you like the final product as well!