Plugin of the week: Advanced Custom Fields

As you might have noticed, we <3 WordPress a lot here at Storm HQ. Many of our client sites are built using it: we love developing for it, and our clients love using it to edit content.

If you’ve done any WordPress building at all, you’ll know that there is an extensive plugin base which enables you to take what is already an awesome platform and awesomeise (!) it even more.

You’ll also know that the size of this plugin repository (as of today, 16,713 plugins listed!) can make it a bit of a minefield, so we thought it’d be useful to run a regular spot here on the Storm HQ blog highlighting some of our favourites.

The first one in our series is called Advanced Custom Fields, and it’s a blinder. In fact, I’m so impressed by this one – and use it so extensively – that I’m going to be writing a series of posts about some of the ways you can use it.

So what does ACF do? Well, you’ll probably already know that WordPress has capability to add additional fields – called “custom fields” – to posts. This means you can fairly easily allow editors to input additional information beyond the standard title and content fields – and then display them on your site. ACF takes this functionality, and multiplies it in usefulness…by about 500%.

Custom fields out of the box can be slightly fiddly, and there’s one major issue which has always irritated me: if you enable them you have to do it across all pages and posts on your site. So say you want some fields for a product listing – if you enable these you’ll then find that the fields appear on both your product pages but also on blog posts, pages, etc. An implicit connection between the “type” of page (“product”) and the type of information you want to input / display (“price”, “tax”, etc) hasn’t been possible. Until ACF.

Let’s have a quick look at how.

I’m going to assume you’ve downloaded and enabled ACF – if not, do it in the usual way – either automatically via “add new plugin” in the WP interface or by downloading and chucking the ACF folder in your plugins directory. At this stage, the plugin may ask you to update your database – do this, then open up Settings > Adv Custom Fields.

Click to “Add New”. You’ll get a nice looking interface as shown below. To add a new field, just click “+Add Field”:

You’ll see you have the option to name the field, choose a type (more on that in future posts), and provide instructions for editors. You’ll see that the “Field Name” box auto-populates – but you can overwrite this if needed. Make a note of this value – we’re going to need it in a minute…

Once you’ve clicked “Save Field” have a quick look at the “Location” box underneath. This for me is the real magic of this plugin:

This is a bunch of options and rules which let you choose exactly when these fields should display – it’s an extensive list which lets you choose single pages (for example: Page – is equal to – Homepage) or post types (for example: Post Type – is equal to – Post) or even page templates (for example: Page Template – is not equal to – Default Template). You can also filter on user type – so it’s easy to give admins access to fields but not editors. You can also build these filters using the + icon, applying more than one.

This means you can create brand new product areas, galleries, connections, feature boxes…. – with incredible ease. Much of the criticism of WordPress as a “serious” CMS has been about its inability to handle content types with any power. ACF in my opinion pushes it forwards a long way in this discussion.

So how do you use the data which has been input? Well, this too is a breeze. Simply locate the template you want to display the content on, and pop this into your php:

..where I’ve got “product_name”, just replace with the snippet that is in the “Field Name” box above. Easy.