Creating WordPress admin interfaces that function for clients and developers alike can be challenging. Advanced Custom Fields streamline the backend experience to make it intuitive for any user. Here’s how:
The admin interface, or WordPress Dashboard, is generally only used by your client and not seen by the site’s end users. However, it is important that the interface is well-planned for a number of reasons:
- To reduce your support burden by ensuring the interface can be used without requiring technical help, or reduce frustration from constantly referring to the documentation.
- Be flexible enough, so the admin can reorganise the site content (within the confines of the layouts designed for them). We don’t want a page-builder solution which allows the admin to ruin the site’s UI.
- The client should be left with the impression that we are a professional outfit who have really understood their needs.
This article gives some guidelines on how to create interfaces which are both flexible and intuitive and breaks down best practices we follow at Nolte to create well-received sites for our clients.
Before Advanced Custom Fields (ACF)
Before we start playing with ACF, we need to plan how we will use the standard objects provided by WordPress.
The term ‘post’ stems from the origins of WordPress as a blogging platform and, in fact, everything in WordPress is saved as a post in the wp_posts table. We recommend posts be used for blog-like articles on the site; that is, articles which generally have a timestamp and are frequently added to the site. These could be blog posts, news stories or press releases, for example. If the site does not have any articles of this type, the ‘Posts’ option should be hidden from your admins (see the section on User Roles below).
Pages represent the site’s more static content – anything from the homepage, contact page to the about page. We use pages heavily in most of our sites. With the aim of making them as flexible as possible, we generally have two templates: one flexible page, which allows the admin to add layouts in any order using the Advanced Custom Field flexible content control and the default template used for text-only pages, such as privacy policies and legal disclaimers. Often these two templates are all that is necessary; however, more can be added if required by the design. It’s also worth noting that having one big flexible content field can cause issues when multiple engineers are working on it simultaneously.
Custom Post Types (CPT)
CPTs are objects in WordPress which can be used to represent anything. Developers will have to decide whether to use a CPT or an ‘Advanced Custom Fields Repeater’ field to represent items, of which there can be many. The solution depends on the complexity of the object and how it will be used. Complex objects, with many fields (e.g. team members), are best represented as CPTs, whereas a very simple object (e.g. a list of useful links) would be better off in a repeater. Objects which will be used in various places (e.g. Testimonials) are generally best represented as CPTs as this makes them more easily reusable on various pages, whereas objects that would only ever be used once (e.g. a set of benefits of a particular product) should be set-up as a repeater. ACF is used to add additional fields (e.g. the role and biography of a Team Member) to the CPT.
We have a set of objects for which we always use CPTs:
- Team Members
WordPress posts come with a couple of taxonomies by default: category and tags. Custom taxonomies can be created to aid the classification of posts and CPTs. For example, one of our clients has 3 departments in their business. We represented this with a ‘Department’ taxonomy which we shared with posts and various CPTs, such as ‘Team Members’ and ‘Job Listings’ – this way, any of these objects can be classified as belonging to one or more of these departments and filtered accordingly.
Taxonomies are a great option for these cases, as WordPress already provides a suite of functionalities for filtering and displaying the results.
Once you have the structure in place, you can start to enrich your content with Advanced Custom Field Groups. There are three general areas where we use them:
Posts, CPTs, and Taxonomies can all be enriched with ACF fields. ACF can be used to add extra fields to these objects, as well as controlling which default WordPress fields are available. Additionally, you can use ACF to build site-wide options pages which are not linked to a specific object. Some guidelines we like to follow are:
- Use an ACF Cropped Image field for all images, not the default WordPress featured image field. This allows the user to crop the image when they upload it, rather than using WordPress’ automated cropping. It also ensures consistency across all image fields, rather than having some as featured images and some as ACF fields.
- Use the default WordPress WYSIWYG content editor where it makes sense. Doing so allows plugins to work properly (e.g. Yoast SEO can automatically generate the meta description).
- Use the ACF options to hide any default WordPress controls which will not be used.
- Use Advanced Custom Fields Taxonomy Field (and hide the default taxonomy field) where you want to customise the relationship. For example, if you want the admin to select exactly one option. Don’t forget to select the Save Terms and Load Terms options so all the standard WordPress goodness is available to you.
Wherever possible, we want to use ACF’s flexible content control to give the admin control over the page’s appearance without giving them the ability to make a mess. As a best practice, we work with our designers to define a set of predefined layouts (aka molecules in Atomic Design). For example, Testimonials slider, Job listings, Full-width text, Two-column text would all receive this treatment. These layouts can have options, e.g. benefits list with or without icons, or two styles of headings.
This way the admin can build each page by inserting the layouts they want in any order they want, without allowing them to do anything that would break the site’s appearance.
Since our clients are (typically) not designers, we don’t expect them to make design decisions themselves. Instead, we recommend:
- Offering a fixed set of styling options rather than allow a free choice. For example, a background colour option should be a radio button with appropriate choices from the design palette, and not a colour picker which will allow for any colour to be chosen.
- Use layouts with no options where it makes sense (e.g. a latest posts layout which acts as a placeholder for where the latest post module should be rendered) and, in this case, you can use the Advanced Custom Field Pro message field to explain what it does.
- ACF has plugins to allow for selection of additional object types, e.g. nav menus and Gravity Forms. These should be used where relevant.
- Include instructions explaining how to configure the layout. If you are using a post object relationship, for example, you should include a link to the CPT’s edit page so the admin understands where to manage the list of items available for selection.
- Write and include instructions that will advise the admin of what’s expected, e.g. include the minimum image size or state that only SVGs are permitted (which is advisable for logos and icons).
- Make all content editable from the admin interface. It will create frustration if the section title cannot be edited, for example. The global settings of a site can be added to a General Options page, like footer texts or social media links.
- Give the layouts generic names that describe how they look or behave, but not how they are used. ‘Two Columns’ is a better name than ‘About The Company’. They will almost certainly think of ways to use these layouts that you never anticipated and a user-specific name will only create confusion in the future.
Consider whether the admin needs full control of which objects are displayed or if it should be automated. A ‘latest posts’ layout should automatically pull in the latest posts, perhaps with a category filter. However, they will probably want to specify which testimonials to show in a testimonials slider. When in doubt, discuss with your designer and/or client.
The final stage in making your admin interface intuitive is to hide all the options they don’t need. We generally give our clients the editor role, which is configured to allow them to edit all content, including menus and widgets, but without access to anything involving the more technical setup, such as plugin updates or switching themes. You should also hide content dashboard menu items, such as ‘Posts’ and ‘Comments’ if they are not used on the site. This will make the interface less daunting and also make it harder for them to accidentally break something.
We reserve the administrator role for our team members who manage WordPress updates and other such tasks. If your clients will support their site themselves, it is advisable to only give client team members admin access if they will be the ones performing updates.
Following these outlined rules will help you create high-quality, intuitive interfaces that benefit your team as well as the client. Remember: put yourself in their shoes and think about what they need to manage their website.
Creating a streamlined environment will allow everyone to access what is necessary, without doing anything potentially harmful to the web application.
Have other tips and tricks for using Advanced Custom Fields or WordPress interfaces? We’d love to hear from you. Comment below.
Learn the fundamentals of website event tracking with us.
What every digital team needs to know about content delivery networks.
User Stories: Why you should use them and how to do it.