It’s a nightmare scenario:
One of your web design clients calls in a panic because they tried to make a few small updates to the website you carefully crafted for them, and now it doesn’t look right—or worse, it doesn’t work right. Can you help them fix it ASAP?
The easiest way to handle this kind of situation is to prevent it.
By building some guardrails around what your clients can access through the WordPress dashboard, you can help them make updates with confidence that they won’t break their theme—and you won’t have to scramble to help them fix their sites.
Here’s an example of WordPress’s Customize menu available, which helps us set up those guardrails:
Maybe this client needs to change their header image from time to time, but their typography and site identity should remain the same for brand consistency.
Providing your clients with adequate documentation on how they can update specified content on their site through this menu will help safeguard against emergencies. An easy-to-follow step-by-step guide or a screen share walk-through gives your clients the confidence to make the updates they need to, without worrying about potentially causing an error. And unless the client is also a developer or designer, they don’t need access to the administrator settings.
If you’ve already read our post on building your own WordPress themes using the Underscores template—or if you already know how to build them—this is the next logical step. That’s because what you’ll do to let clients make updates safely is adjust the customizer.php file that’s part of your theme template.
Then, your web development clients can access whatever they’re allowed to change in the Customize menu. You can set that up so that they can change out text, for example, but instead of editing it on the screen and potentially messing up their site design, they are using role-specific form fields so it’s more of a controlled situation. They can preview it before they publish and make any needed corrections before it goes live.
What kinds of changes do your clients need to make on WordPress?
To avoid breaking their WordPress theme while keeping their site fresh, clients need to be able to change information without changing the theme’s styling. It’s usually fine to give clients access to small things that they’d like to control, like banner content or featured images, rather than major changes like site colors and fonts that could affect their branding.
However, every client site is different. You can do a data audit of your client’s site and to talk with your client about the kinds of content that they need to be dynamic. It’s especially important to give your clients control over the elements of their site that they need to update frequently, so they can keep their information up to date for customers—and so you don’t have to constantly make those small updates for them.
For example, if you’re dealing with an eCommerce client, they may want to be able to change out their promotions, so they’ll need access to a promo section within their Customize menu. You can edit the customizer file so that within that promo section, the client will find fields for each piece of information they need to update. That might include:
- Promo headline
- Promo price
- Call to action button
- Link to promotion page
- Fine print
That way, when your client rolls out their weekly deal, they can update the site without breaking the theme or needing your help.
What if your client runs a news site or a blog? In that case, they might want to change the blog posts that are featured above the fold on their site once a week or every couple of weeks. You can help them do this easily by creating a Customize section for featured posts.
Depending on how your client’s site displays featured content, this section could include:
- Featured content section title
- Section tag line
- Post 1 link
- Post 2 link
- Post 3 link
- Post 4 link
Creating controls for your web design clients in WordPress
The goal is to make it easy for your clients to update the front end of their website when they need to, without making any changes to the backend that would negatively affect the site’s appearance or function.
You might choose to give your clients access to an entire category of content, like images, and let them use their judgement when it comes to making changes across the board. If you go this route, you’ll want to include a conditional statement within your customizer functions to load default content if the image or copy the client requests isn’t available.
If you used the Underscores template to build the client’s WordPress theme, set your parameters in the customizer.php file. Almost nothing you change in the customizer file will affect the theme’s style coding unless you tell it to. You get to define what your clients will be able to change on their own.
When you open the customizer file, you’ll see that it already has a few settings created for things like changing the color of the header text and the name of the blog. You can start your access customization by going through the existing settings and adjusting the defaults to match what your client needs.
Then, you can add code snippets to give clients the access they need to any other sections, settings and controls. For example, if your client wants to periodically change the categories that are featured on the homepage of their blog, you can add a section of code for featured categories to the file.
We’re using featured categories and promo sections as examples, but there’s a lot more you can do. The WordPress Codex is a good resource for getting more from the theme customization API.
Pretty much any data that your clients can enter into a form field on your theme can be customized to give them the options they need, like a color picker for header text, a date picker or a category search tool. And the customizer does this without changing your backend code.
For example, let’s say you give your clients the option to change the color of their homepage header text. When they make a change selection, the customizer—based on your instructions–will tigger a CSS injection after the theme’s main C stylesheet loads, which will redefine the desired header color.
In other words, the client isn’t changing the theme code directly when they choose a new header text color. Instead, you’ve used the customizer file to define dynamic content options that you can later query in your theme’s layout files to display that data in a specific way, based on the choices your clients make.
How does that work?
The key WordPress function in pulling the content your clients have set via the Customize panel is get_theme_mod. This function takes a setting name, like the “hp-category-1” we set in the above example, and a variable defining what the default front-end behavior should be, if a change has not been recorded.
Once you retrieve these settings from the database, you can run them through any of WordPress’s existing query functions to get even more data. For example, we’d get a category name from the above get_theme_mod function, which means we can use get_term_by to query the WP__Term object from the name.
Then, we feed that into the get_category and other queries to pull more data, like the term’s description or link to print within the customizable featured categories section. WordPress’s expansive query functions combined with the theme mod options enable your clients to update complex and dynamic blocks of code by updating a single setting.
Make your customization process more efficient
You can set up your client’s options to make changes while you’re building their WordPress theme. It’s also pretty easy to go into a client’s customizer file and add other options after the site is live, if the client needs something different from the original plan.
What if they want one of these customizable content sections to show up not only on the home page, but also on other selected templates throughout the theme? Keep everything modular by creating partials in your template parts so you can call these custom coded blocks cleanly, quickly and easily throughout.
For example, you can put the code we discussed in the above section into its own featured-categories.php file and add it to the /template-parts/ folder in your theme. Then, if you call the get_template_part function in the home.php and archive.php theme files, that section will show up on the home and all archive pages with the same styling and layout.
By working with your web development clients to find out what they’ll need to update, and by setting those options up through the theme’s customizer file, you enable your clients to make site updates without stress—and you can focus on building more themes instead of putting out fires.
Ready to build and customize WordPress themes for your clients? Set up your sandbox with our VPS hosting plans.
Samantha Soper is a freelance UX strategist, front-end developer, and creative consultant, working with businesses and non-profits of all sizes to help manage their online presence and brand experience. She also runs a mural art and illustration business. Related links at: samsoper.art/links/