Client-Proofing Your WordPress Sites – Full Text

Presented by Jeff Brock at WordCamp Seattle 2013 | Slides from presentation

A few months ago, I picked up a new client who manages rental properties with hundreds of units, near the UC-Berkeley campus. They already had a custom-built back end, but they were launching a redesigned site. One of their key requirements was that the back-end be very, very easy to use. So naturally I convinced them that WordPress – with a custom-designed theme — would far surpass the abilities of their legacy system.

Seattle WordCamp 2013 Featured SpeakerWhen scoping the project, I found a premium real estate management plugin that appeared to satisfy all my client’s needs. I was thrilled! Rather than re-invent the wheel, we could maximize efficiency by selecting an existing plugin.

So I started the project and began customizing the plugin and getting to know its … quirks. I discovered that some of the functions advertised in the demo didn’t really work. Other functions didn’t offer the customization I wanted. Worst of all, once I’d entered more than 700 rental units, my heart sank as the back-end … moved … so slow.

I put myself in my client’s shoes. “We told this designer we wanted something fast and easy. Now this WordPress thing is crawling along. And all these options don’t make sense.”

I struggled valiantly, trying to create workarounds. The thought of abandoning all the development and customization I had done was thoroughly depressing. But two days before I was scheduled to conduct the client training, I faced reality. To deliver a professional product, It was time for Advanced Custom Fields – the Swiss Army Knife of WordPress admin customization — to come to the rescue.

I started over. And as soon as I started setting up the ACF plugin, I knew I should have depended on my old friend from the beginning. I was able to rebuild the entire back-end in two days, with all the functionality the client requested, and then some. The training went off without a hitch, and my client has been successfully updating the site ever since.

That experience made me think about how I could share what I’ve learned about building client-proof WordPress websites, so that we here as designers and developers can make our clients very happy by delivering easy-to-use back-ends that consistently produce cohesive, beautiful front-ends.

This afternoon we’ll look at how to:

  1. Provide user-friendly and deeply customized edit screens
  2. Streamline the admin to help your client navigate
  3. Create efficient and easy-to-understand support documentation
  4. Host screencasts to walk your clients through their new site’s back-end

During the Q&A, if you have tips from your own experience working with clients, please share!

My Background

First, a little about my background. I spent the first 10 years of my web career at the San Francisco AIDS Foundation as Webmaster, working with a wide range of internal clients – the various staff departments – and with external users. I built the AIDS Foundation’s network of sites with ColdFusion, and custom-developed a content management system.

Six years ago I ventured out on my own as a freelance designer and developer. I wanted to go open-source for the CMS, so I reviewed the big options at the time – Drupal, Joomla, modX, and WordPress. Of course, WordPress had the shortest learning curve – which was the experience I wanted to deliver to my clients. Since then I’ve built more than 50 WordPress sites, the great majority of them with custom themes that I’ve developed.

My clients – like yours – are experts in their respective fields. Some of them are very tech-savvy, while others are not. Most are familiar with the web, but they don’t spend their entire day obsessing over HTML5 or responsive design or the latest WordPress upgrade.

Remember: you probably spend much of your time in the backend. After a while, it becomes comforting. Each time I log in to a WordPress site, seeing the Dashboard is like seeing a good friend walk in the room. But for many of your clients, it’s their first time seeing the back end of a WordPress site. Even though WordPress has a shorter learning curve than most content management systems, It might be their first time seeing any CMS.

Throughout my years in working with clients, my key approach has been to meet them where they are. I use very straightforward language. As much as possible I steer clear of jargon. (Sometimes, though, I don’t even realize I’m spewing jargon until the client says, “Hold on, what is CSS?”).

And I don’t want them to ever, ever have to type an HTML tag.

If you have long-time maintenance clients, you’ve probably had the experience of visiting a client’s site months or years after launch and recoiling in design horror. Why did they place that image there? Why did they choose heading 4 instead of heading 2 as I instructed? Why did they highlight this text in purple with a yellow background?

If that happens, we have only ourselves as theme designers to blame. I shudder to think about some of the back-ends I unleashed on clients in my first couple of years working with WordPress.

Many of my clients have specialized needs that can only be met by giving them greater flexibility within WordPress. So, a couple of years into my WordPress career, I used the “PODS” framework with a half-dozen clients. It delivered that flexibility, but it bothered me that the plugin depended on custom tables in the database; I felt locked-in.

So after a year I moved on to a plugin called “More Fields” that simply provided a user-friendly way to work with WordPress’ native custom fields. But then after a year or two the plugin’s development stalled and I yearned for yet more flexibility.

Enter the awesomeness of Advanced Custom Fields.

Advanced Custom Fields

Created and maintained by Eliot Condon, a web developer living and working in Melbourne, Australia, ACF is almost at the 1 million downloads mark. This plugin, combined with my theme development work, has helped me to empower clients to create all kinds of specialized content, from:

Product tables …

To price lists …

To FAQs.

From slideshows …

and detailed rental listings …

To staff directories …

text blocks …

And custom Google Maps.

To begin, install the free plugin and purchase its four add-ons: Repeater Field, Options Page, Gallery Field and Flexible Content Field. They’re each about $25, and since the license allows you to use them on multiple sites, they are the best $100 you will ever spend as a WordPress custom theme designer.

It feels like it could be part of the core code. And I like that the styling looks pretty native to WordPress (I can’t stand when a plugin pushes its own look and feel; it’s unprofessional.)

Next, add a Field Group. Give it a title and start adding fields.

Each field has a label, a name, and a type.

The options for field types are epic:

  • Text and textarea
  • Number and email, both including validation
  • Password
  • A WYSIWYG editor, which can be a full editor with media upload buttons or a basic, stripped-down editor
  • Image and file, which hook into the new WordPress media manager
  • Select, checkboxes, radio buttons and true/false
  • Relational options such as:
    • Page Link: select from list of posts, pages, attachments, and any custom post types.
    • Taxonomy
    • Users
    • jQuery date picker and color picker
    • Finally, the tabs layout is a useful way to group data to make it more user-friendly for clients.

You can add explanatory notes for in-context help and make fields required.

Entering a default value can make the client’s data entry more efficient.

With conditional logic you can show a field based on the client’s answer to another field.

The Location option is powerful. It enables very specific rules about where the field group can show up. My favorite is by page template. In a page’s admin screen, available fields can change on the fly by selecting a different template.

In Location, you also can choose a generic post or page; a specific page; the front page; user type; a child page; a specific parent; a post category or format; or a combination of your choosing. The Location option allowed me to abandon my old reliance on page-specific widgets. If you have an About page, it makes a lot more sense to the client to see the fields specific to that page appear just underneath the content editor in the About page – not squirrelled away in the Widgets section.

Under Options, you can place the meta boxes in the main column or the right column.

You can also hide many elements on the page. For example, I often develop pages that are automatically generated by the client’s ACF data entry, and the main content editor is unused. It’s confusing to the client to have that content editor there, so with ACF you can hide it on that specific page. You can also hide revisions, author, etc.

Now let’s look at the four premium add-ons.

Repeater. The Repeater field was the real eye-opener for me. It created a world of possibilities, where clients can add and delete an arbitrary number of items at will. You can set a minimum number of items, or a maximum. The client can re-order by simple drag and drop.

I often use the Repeater field for entering tabular data, so the client doesn’t accidentally mess up table formatting. (I know there are table-creation plugins out there, and I use them once in a great while, but I prefer keeping everything within ACF.)

Options. With the Options add-on, it’s easy to create multiple options pages. I’ve used it for Contact Info in footers; text for Page Not Found; a default page banner; or a custom Google Maps marker.

Gallery. This is a beautifully intuitive add-on allowing the client to upload images, rearrange them through drag and drop, and edit image metadata.

Flexible Content. For a while, the nature of this one eluded me. Then recently, a client needed the ability to have multiple sidebar widgets that could vary from page to page. Some needed to be straight text; others a combination of text and images; or a video file; or a list of links & PDFs. I didn’t want them to use HTML for any of it. So, with Flexible Content you can package as many those content layouts as you like, using all the tools of ACF, and then offer them as choices to the client. 

You can also install some free community-submitted add-ons, such as a jQuery Text Limiter that limits the characters of a text area; a jQuery Date & Time Picker; and a Location Field that can find addresses and coordinates of a desired location.

If you’re concerned about the plugin no longer being supported in the future — keep in mind that the data’s just being saved as good old-fashioned custom fields, so you’re not tied to it. It doesn’t create separate tables. You don’t even have to use the built-in functions for displaying data — although I do, for the sake of convenience.

A final note on ACF: don’t overdo it just because you can. On a couple of sites, I made certain logos, display headlines and other items client-editable, when it’s highly unlikely the client will ever change them; this just added noise to the interface.

Streamlining the Admin

Aside from Advanced Custom Fields, I keep some other arrows in my quiver for streamlining the admin.

Menu Editor

I use the “Menu Editor” plugin on almost every site. It lets you easily rename, reorder, and hide items in the left nav menu to make things clearer for your client. For example, if the client doesn’t have a blog, I’ll hide Posts & Comments. You can easily change the icon. You can hide items based on the user role, such as Administrator or Editor.

The Pro version lets you hide by individual user; I’m considering buying it. There have been some cases where I want a client to have Administrator capabilities, but there are some menu items I know they’ll never use and just make it confusing.

TinyMCE Advanced

For every client, I hide certain WYSIWYG buttons through “TinyMCE Advanced”, such as underline, strikethrough, full align, font family, background color, split page, and insert image. If it’s a non-technical site, I’ll usually hide superscript and subscript.

Functions.php

In functions.php I will:

Hide certain Dashboard widgets, such as QuickPress, WordPress Development Blog, and Other WordPress News

Customize the TinyMCE format dropdown items by removing Address, Preformatted, H1, and H5-H6. This leaves paragraph, H2, H3 and H4, which is plenty for most sites.

For Clients who use widgets, I remove lots of unneeded widgets, such as Meta and Calendar.

Only occasionally have I’ve added an editor style CSS to TinyMCE. But it’s something I really should do more often. Sometimes a client will get confused by the formatting discrepancy between the WYSIWYG and the live site.

When I add the Client as a user, I initially log in as them to make sure their credentials work. I’ll then go into their profile and set “Display name publicly as” to be their first and last name. I’ll reorganize their Dashboard widgets. I usually go to the Pages screen and click on Screen Options to increase the default number of pages shown per screen.

Erident Custom Login and Dashboard

To help clients feel they’re getting a personalized package, I create a custom version of their logo and style the login page to match their color scheme.

CodePress Admin Columns

I don’t use it very often, but it can really come in handy. For the property management website, I wanted them to see at a glance as many of their rental units as possible. With this plugin, I customized the “Property” custom post type listings so they can see the unit type, number of bedrooms and bathrooms, rent, available date, and the building thumbnail.

The plugin offers an easy drag and drop style. You can set the width and label for each column, which can draw from custom fields, attachments, custom taxonomies, images, and lots of other metadata.

Support documentation

The back-end is in place, so now it’s time to create the support documentation.

It’s important to strike a balance between providing a comprehensive set of instructions while not overwhelming the client with too much detail. Think about the key tasks the client will want to be able to complete on their own. Some clients love getting into the nitty-gritty; others are more hands-off. If they want to be very self-reliant, go into greater detail. But perhaps what’s important to them is just editing text; if the images rarely change, they may call upon you to make those kinds of changes when the need arises.

During my first few years as a freelancer, I created documentation in Word and sent it to the client as a PDF. But, of course, that meant when there were changes to the back-end, I had to revise and re-send the PDF.

So, I set up a subdomain of my primary site at support.jeffbrockstudio.com and installed WordPress MultiSite. Each client gets their own sub-subdomain, such as foo.support.jeffbrockstudio.com. This packaging lets them know that you are invested in their success.

I installed the “New Blog Defaults (CETS)” MultiSite plugin, which allows you to set the default theme, permalinks structure, media settings, and so forth when creating new sites, shaving some time off the process.

I found a great theme for support documentation called “Easy Docs”, by Shaken & Stirred: http://shakenandstirredweb.com/theme/easy-docs

You create each support section as an individual page, and the theme compiles them into a single-page outline, with a table of contents. You can choose to collapse all sections from the start.

I modified the theme so that I can use Advanced Custom Fields to add more than one featured image to each section. Also, through ACF I can add the Client’s logo, my own logo, and the logo of a partner agency if needed.  

A technical note: ACF allows you to export your fields as PHP and incorporate them into a theme’s functions.php. So I don’t have to recreate the fields on each support site; they automatically appear because they’re hard-coded into the theme.

Here are the primary areas that I cover in the documentation:

  1. What is WordPress? – a very brief overview. If the client has a blog, I spell out the difference between a page and a post right away.
  2. How to login and change your password
  3. Dashboard – the widgets they’ll see, such as Right Now, Recent Drafts, or the Google Analyticator traffic summary.
  4. Pages – how to add and edit a page (including titles, permalinks, revision history, page attributes, featured image upload, previewing changes, and the WordPress SEO plugin). I spend a chunk of time on the WYSIWYG editor, including internal and external linking, and when to use H2/H3/H4. If there are pages with special sets of ACF fields – or custom post types – they’ll go in this section.
  5. Posts/blogging
  6. Custom menus
  7. Site options, such as footer content and social media links

If there are areas requiring instructions that are very specific to this client, I try to describe them in the documentation as I’m developing the theme, rather than waiting days or weeks afterward. This way it’s fresh in my mind; if a certain theme is hard to develop, by the time I get to the documentation phase my brain may be completely exhausted.

I copy text as needed from previous help documentation and alter it. I grab screenshots of key components. Sometimes, it’s a whole page to provide context. Or it may be a small detail. When applicable, I like screenshots that capture movement – such as a gallery photo in mid-drag-and-drop. I add captions. Then I use “Lightbox Plus ColorBox” for larger clickable versions of the screenshots.

I try to complete the documentation a couple of days before the training and send the link to the client. I don’t send clients their WordPress logins until immediately after the training, though. Letting them log in early can lead to unnecessary confusion.

Training

The final stage of client-proofing your WordPress sites is training. Most of my clients live in other states. Only on a few occasions have I been able to train someone in person. So a reliable screencast service is critical.

For a couple of years I used a service called Yugma. But since it depended on Java, clients frequently ran into issues where they’d log in at the start of the training only to discover they were being forced to upgrade their Java and the training would get delayed.

So I switched to join.me by LogMeIn. It’s very easy for clients to go to my training room at join.me/jeffbrockstudio and see my screen right away. Minimum fuss.

Join.me has a yearly plan for $149 ($13/month) and a monthly plan at $19/month. You can share control of your screen, present from your iPad, or set up a custom background for your personalized training room.

Although the video screencasting tool is great, audio conferencing in JoinMe has had some hiccups. So I use FreeConferenceCall.com for that piece.

My trainings generally last 60-90 minutes. However, one hour tends to be the longest time that someone can absorb all this new information. Make sure your phone and/or headset are fully charged before you begin.

Before the training, log in to WordPress and run through the key areas you want to demo. You don’t want an “oops” moment where permissions aren’t set correctly, or one plugin conflicts with another. If you’re going to show how to upload a Featured Image, make a JPG easily accessible from your desktop. If you want to demonstrate creating a new page, have some text ready for pasting.

About 15 minutes before the training, I run the join.me host on my iMac. It allows you to either share your entire desktop, or just a window, so I share just Firefox. That way I don’t to have to close any programs that I want to stay private. (Don’t keep your email open, though; once during a training I received an unrelated, frantic help request and the distraction destroyed my focus for the rest of the training.)

I keep the support documentation open in Chrome right alongside Firefox so it’s easy for me to refer to.

Once I’m sharing my window, I login to the screencast from my PC laptop as a user, so I can see what the client is seeing. This two-screen approach helps me get a sense of the lag time — the service responds pretty quickly, but you still need to take the lag into account as you’re narrating what you’re doing. For example, before moving the pointer, I’ll say something like, “Next, in the upper right of the screen, click the blue Update button” before taking that action.

Finally, I call the audio conference number about 5 minutes before the training, and take the rest of the time to get centered mentally before the training starts.

If client asks questions that seem really basic to you, don’t ever condescend or make them feel that their questions are dumb. Set yourself apart with amazing customer service. A surprising number of clients have told me that they’ve had bad experiences with designers or developers who don’t know how to talk to people.

During the training, be ready to take notes. Your client may tell you that a certain workflow doesn’t make sense. Or perhaps they have an idea in the moment for an enhancement. Let them know you’re taking notes. But keep a close eye on the clock. If you’re giving a training to more than one person at a time, it’s easy for their brainstorming conversations to derail your timeline.

Reassure the client that this is not their only opportunity to ask questions, and that you’ll be available in the coming days as they play around in the back-end. 

Once you’ve completed the training, close the circuit by sending the client their login credentials.

Closing

In closing — it feels great to look at a client’s website month after month and see they’ve added fresh content that all fits within the graphic framework I set. Empower your clients and it’ll set both of you free.