Advanced Custom Fields is one of the most powerful and essential WordPress plugin available. It provides a simple to use UI for creating extra input fields for posts and pages within the admin area. There are a lot of input field type options, ranging from simple text fields to multiple selection boxes and cross post relationship building. The plugin has even inspired a huge number of other plugins that add more inputs and features to ACF. These plugins all require Advanced Custom Fields to be installed and do not work without it. It is so much an integral part of a lot of WordPress sites, that people are writing plugins for this plugin.

 

Here’s a great list of ACF plugins

 

It is possible to manually build extra fields into WordPress without using a plugin, which does give you some advantages. These include things like easier integration into the WP “Revisions” listing that shows the recent changes to a post, removing the reliance upon a third party plugin. However this approach does not fit well into the ethos of using WordPress in the first place. Using WP should allow somewhat modularised development, open source and third party themes and plugins, along with your own library of existing code to build websites that have extensive administration areas, but don’t necessarily take as much time or in depth knowledge to build as a Symfony or Rails site would require. Using plugins in WordPress like ACF means that everyone has access to a code library that is maintained by a team that is putting dedicated time and effort into maintaining and expanding that particular piece of functionality. If you’re going to use WordPress as the base to a website, then you should embrace plugins, third parties, open source and modularised / plugin based development.

One issue that people spend significant time trying to improve is the look of admin pages when lots of ACF fields have been added to them. It’s simple to add a lot of content and extra fields, each of which will display below the last, making pages look very long and often become confusing. There are a lot of methods that can be employed to improve the UI of admin pages that are heavy in ACF fields. These involve making great use of the ACF fields that are designed to act as containers and UI elements for other fields, like the Tab or Flexible Content fields. It’s also possible to set a custom class for every field, meaning that changes can be made to different fields by their input types. Further custom style additions, customisation and extension plugin use / creation, starting with the list linked above, can help iron out any remaining imperfections on a heavy content admin page.

Often just getting the right fields to appear and work, the importance of the website front-end visuals over the back-end, and all of the normal pressures of a project deadline mean that the admin UI can be overlooked or under-optimised. This can have a big impact on a client, as an easy to follow and use admin area will often improve their whole site experience. The small considerations that can be taken into account here could easily influence a client and might potentially be the difference that they see in your work compared to others.

There are three main, constant themes of admin UI optimisation.

 

  1. Entering data should always be clear and simple – Clear in this sense means having the right mix of field labels with instructions and placeholders, having logical field names, having fields ordered properly and not having a lot of fields overlapping and getting mixed up with one another.
  2. Fields should be compact and logical – Although fields should not be too tightly packed, leaving too much whitespace and un-used space will just make keeping track on longer pages difficult. Keeping fields compact and logical means building a layout that fits together and flows well.
  3. Build the UI fields in respect to the front-end – The fields in the admin should look like the areas they populate on the front end. This is achieved by correct and consistent naming conventions, logical instructions and sensible layouts. It is often possible to have the admin UI reflect the front end by having the fields in the same order and laid out in a similar way.

 

 

 

Step 1: Using what ACF makes available

 

Tabs

ACF gives some great solutions out of the box for making content pages look good and less cluttered. The first and simplest of these is the tab field. A tab is added just like any other field, except when selected, most options are removed. This is because the tab is literally just that, a single tab with a title that can be clicked on to view the fields and content within. Adding additional tabs will automatically add them and their content to the same tab box provided the are added at the same level (e.g. not inside a repeater). There is an “End-point” option that can be used to manually end one group of tabs and have the next one begin as a new tab box.

 

It’s easy to configure and manage tabs within the ACF dashboard, as fields that are dragged below a tab will appear there. There is a noticeable small gap between the last field in tab one and the start of tab 2. The tabs can also be arranged aligned to the left or to the top, which changes how they appear in your admin pages:

 

 

 

 

 

 

 

Tabbed content is a great way of arranging a lot of data, but try to stick to fields that it makes sense to break down into sections. A list of similar fields should never be broken down into multiple tabs. With all of the changes and customisations that are designed to make admin pages easier to use, attention should be given to try and somewhat reflect the layout on the front end template in the back end. This will make it easier for users to work with the admin pages. Although it is possible to add labels and instructions to fields in the admin area, there are no similar labels on the front of the site, so matching up the layouts where possible is hugely beneficial. Tabs are a great solution for content that is also tabbed on the front end, overlapping objects like slideshows or other content that is repeated numerous times with the same few fields.

 

Messages

The ‘Message’ field can be used to display a small piece of text, in place of any input field. Most input fields allow for instruction text to appear next to it, but the message field can be used to provide a bit more information, or pad out a certain area. In particular cases, empty message fields can be used to push other content areas and fields around and create white-space. The blank area to the left of the title field below is an empty message field. It is the only way to get the image field to align with the text content field in this circumstance.

 

 

Alignment

Most of the basic fields include smaller options that alter the layout. Changing these often overlooked options can improve the layout massively and can really impact how fields appear for users in the admin area. The default layout for most fields will often be vertical, which ends in a lot of wasted space and long lists. Making some fields horizontal often makes listed items look a lot better.

 

 

 

 

 

Flexible Content

Flexible content is without a doubt the most powerful aspect of Advanced Custom Fields. Discovering and utilising the ACF flexible content field to its full capability can revolutionise how content based sites are built and maintained. Where many different groups of ACF fields were once used to give specific input options to different pages and post types, the flexible content field provides a much more flexible and efficient solution. This advanced field works by creating groups of fields, and allowing users within a post / page in the admin area to add a  completely customisable “block” of their choice.

 

 

This empowers a user to build large content areas using blocks. A user can add a gallery block, which may have a title, image uploader and select box. Then they can add a table block below that, which has some different fields. As many of these different modules as desired can be defined in ACF and added, removed, ordered and edited by the user. This even makes front end development easier, as once the code is written for one of these blocks, it can be separated out into a partial, and pulled in as and when the user has included this block on their page or post. These fields can even have other flexible content or repeater fields inside them, meaning that fields can be nested several layers deep.

 

 

 

 

Step 2: Using ACF classes and styles

 

Each field added via Advanced Custom Fields has the option to set an ID and a class. This gives a lot of control over how ACF fields are displayed in the admin, but should be used deliberately and somewhat sparingly. There are already correct ways to alter admin themes substantially, so ID’s and classes on individual ACF fields should be used to make smaller changes that improve UI, and not grand changes that make the ACF sections stand out awkwardly. One of the best examples of suitable small changes, would be creating different sizes for the WYSIWYG editor fields. Quite often the default size is much larger than necessary, and some even smaller content sections require more options than a textarea field are forced to have their own huge WYSIWYG field. By adding the class ‘short-wysiyg’ and adding some CSS like the below to the themes admin stylesheet, WYSIWYG fields can still be added without so much space being wasted.

 

.short-wysiwyg .acf-input iframe {
height: 200px!important;
}

 

Other simpler suitable styles would be highlighting some fields with different colours or font weights. Text and field alignment via floats or text-align rules can often make repeaters and longer lists of fields look neater.

 

 

Step 3: Plugins and extensions

As mentioned above, Advanced Custom Fields is such a staple of modern WordPress websites that the are a lot of plugins exist that tie into ACF and add extra fields and functionality. Making use of these plugins can massively improve the UI in the admin and resolve problem issues, like the inability to have nested tab fields.

 

ACF Accordion – Download

The ACF accordion plugin is great for dividing lots of fields down into smaller sections, without the need to divide it into tabs that may get overlooked. A great use of this plugin is if there are a lot of ACF fields on a multi-lingual content page. The tabs can provide a way to separate out languages while the accordion is used to divide content by appropriately named page sections.

 

 

The field is set up in a similar way to tabs, with all fields beneath it appearing inside that accordion header. The accordion tabs will work separately within different tab fields.

 

 

ACF Column-Fields – Download

The ACF column-fields plugin is one of the most useful available plugins for ordering and aligning post content in an admin area. The plugin allows the creation of ‘column’ fields, which like tabs or accordion fields, offer no text input themselves, but will act as containers for all fields grouped below them. Adding the next column field will mark an end to the current column. The columns do not have to be equal halves, but can go from halves to eighths, or any combination of columns in-between. This gives a great level of control over the arrangement of fields, and can result in a lot less empty, wasted space.

 

 

ACF Divider-Field – Download

The ACF divider field is a simple plugin that allows for the addition of a small dividing line containing some text. Plugins like this aren’t a basis for entire back-end field systems, but they can be useful here and there to improve the readability of content areas, or make divisions more obvious to users.

 

 

ACF Field Selector – Download

This plugin is a bit of a special case, and should only be used in very fitting situations, but it demonstrates the power and flexibility of ACF and how the fields themselves can be quite flexible. This plugin gives the user the ability to add ACF fields from the page they are on to a “selected” box, and order them. This is a different take on something like a flexible content box that may prove simple for some users. Fields can be moved between “selected” and “available”, and can be ‘drag and drop’ sorted when selected.

 

 

Using this does not overwrite the other fields, and their values are still saved. This field could be useful by allowing a user to select the specific fields that the want to see on the page, or in a specific section.

 

ACF Star Rating – Download

This plugin is a great example of how a more heavily customised field can make user input much more natural. Compared to a text input or select dropdown for a star rating our of five, this field makes it much easier for a user to understand what can sometimes be a daunting admin CMS area. The user just clicks on the stars (which are Font-Awesome icons!) and the stars are filled in. The value returned on the front end is just 0-5 (more than 5 stars can be set when creating the field).

 

ACF CSS Margin & Padding Settings – Download

This is definitely one of the most bespoke ACF plugins available, and fills a very specific role. It shows how far ACF fields can go, as this single input field contains 20 individual fields, and a visual representation of selected colours and sizes. As this field is collecting so much data, it has no ‘the_field’ output option, and must be retrieved as an array using ‘get_field’.

 

 

 

All of these plugins were tested on the latest version of WordPress as of the date of this post (WP version 4.7.2) with Advanced Custom Fields Pro version 5.5.5.