Client-Proofing Your WordPress Sites

Presented by Jeff Brock at WordCamp Vancouver 2013

A Case Study

This past spring, 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.

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.When 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.

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.

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

My Background & Approach

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 and external users. I built the AIDS Foundation’s network of websites 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 and acronyms.
  • I don’t ask clients to use shortcodes, which many premium themes rely upon — to the detriment of usability.
  • And I don’t want clients 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 5 instead of heading 2 as I instructed? Why did they highlight this text in purple with a yellow background? If that happens, we really 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 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

ACF was created by Elliot Condon, a web developer in Melbourne, Australia. He actively maintains the plugin and it’s recently passed the 1 million downloads mark. This plugin, combined with my theme development work, has helped me to empower my clients to create all kinds of specialized content, including:

With conditional logic you can show a field based on the client’s answer to another field, or a combination of fields.

The location option is powerful. It enables very specific rules about where the field group can show up, such as by page template, front page, or children of a specific parent. This option allowed me to abandon my old reliance on page-specific widgets. For example, 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 squirreled 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, such as the content editor or revisions. By streamlining the choices, you can help the client focus only on relevant information.

Premium Add-Ons

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

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, and they 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. You create as many subfields as necessary. You can set a minimum number of rows that a Client must enter, or a maximum.
You can even set the text of the button the Client will see, for example, “Add Team Member”.

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

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

For a while, the nature of the Flexible Content Field add-on 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 the client 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 a PayPal field; jQuery Date & Time Picker; a Location Field that can find addresses and coordinates of a desired location; and fields for Gravity Forms and Contact Form 7.

Final thoughts on ACF

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.

Keep track of the timeline for future development in the ‘To-Do’ section of advancedcustomfields.com. Eliot Condon, the developer, is very responsive to requests for fixes and new features.

A final note on ACF: don’t overdo it just because you can. On a couple of sites, I made the logo, display headlines and other items editable by the client, 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.

I use the “Admin 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 icons. You can hide items based on the user role, such as Editor or Contributor.

The Pro version lets you hide items by individual user. Sometimes 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.

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.

In the theme’s functions.php file, I will:

  • Hide certain Dashboard widgets, such as QuickPress, WordPress Development Blog, and Other WordPress News
  • Customize the TinyMCE format dropdown 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.
  • Add an editor style CSS to TinyMCE, so a client doesn’t 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.

To help clients feel they’re getting a personalized package, I use Erident Custom Login and Dashboard to create a custom version of their logo and style the login page to match their color scheme. Many other login customization plugins are out there, too.

I don’t use Codepress Admin Columns 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” 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. You create each support section as an individual page, and the theme compiles them into a single-page outline, with a table of contents. Using Advanced Custom Fields I modified the theme so that I can 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.

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

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 the plugin “Lightbox Plus” for larger clickable versions of the screenshots.

I copy text as needed from previous help documentation and alter it.

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 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.

For clients who may desire a more in-depth approach, you can provide links to tutorial videos, such as WP101.com or lynda.com.

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.

Join.me

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 US ($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.

Other Services

Although the Join.me video screencasting tool is great, audio conferencing has had some hiccups in a couple of my trainings. So I use FreeConferenceCall.com for that piece, when more than one member of the client’s staff is taking part in the training. However, I may re-visit this decision. Join.Me recently added the ability to record trainings, which could be valuable when a member of the Client’s staff is unable to attend the live training.

I’ve heard good reports about WebEx as a screencast service, too.

Prepping for the Training

  • My trainings generally last 60-90 minutes. However, one hour tends to be the longest time that someone can absorb all this new information.
  • Get a list from the client of all staff who will be using WordPress and invite them to the training.
  • 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.
  • Make sure your phone and/or headset are fully charged before you begin.

Tech Tips

  • 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.

During the Training

  • 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 explore the back-end.
  • Once you’ve completed the training, close the circuit by sending the client their login credentials.

Empower Your Clients

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 you’ve set. Empower your clients and it’ll set both of you free.