recommended plugin: ACF
Advanced Custom Fields is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. This is ideal for scenarios when you want to present quite specific details in a formatted way, e.g. a directory of people or places.
Check out the plugin + documentation
NOTE: There are 2 versions available for this plugin: a free version, and a pro version which requires a yearly license fee for updates and support. While the pro version does include some useful additions, the free version already offers much, likely all you’ll need, and it’s ideal as a starting point while you’re still new to theme building.
UPDATE:
Please see the bottom of this post for a major change ~ the free version is now called ‘Secure Custom Fields‘.
How does it work? And when should I use it?
ACF allows you to add content fields to the editor. When editing a page or post using ACF, you will see more than the heading and text input bo – you will find additional inputs which you will have set up as fields and field groups. Their inputs are then pulled in via the theme file ~ same as the content itself.
The process is fairly straight forward:
- install + activate ACF
note: the free version is excellent and a good starting point for learning. - create a new Fieldgroup
- add a new Field, add more as planned,
e.g. for a profile this might be a photo, name, and job title. - set rules for use of the fieldgroup,
e.g. configure settings to use on people directory posts only, ie used by that specific template. - edit relevant theme file to display inputs,
you can now add the markup for your design, add the functions to display content of the fields. - edit your CSS to include the new content elements,
your CSS will refer to your newly added content as written in your markup.
ACF becomes useful when you content is more than a combination of text and images. Keeping to the example of a people directory, you’d consider the layout of the details shown per person.
Do the WP editor or Gutenberg blocks allow you to implement your design easily? ~ If so, you won’t need to use ACF.
Does the content require specific markup for implementation of design? ~ If so, ACF will be the most effective approach, giving you the ability to mark up each content element yourself and specifying parameters for easier input.
What’s the difference to Gutenberg blocks?
ACF extends the content editing via a setup of custom fields with specific parameters. These can be added to the WP editor for specific pages and posts. Custom fields can be added via the template, or added as shortcode in the editor.
While the Gutenberg blocks offer a similar enhancement to editing, they also include formatting and additional settings and are therefore technically more complex to build.
NOTE: ACF have now developed ACF Blocks for Gutenberg as art of the PRO version — which is something you might fancy trying out when you’re ready to look into GB block building.
example: people of the web
Here’s a little site which is now replacing my slides for our web introductions.
people of the web
setting up the fields
Each person’s profile includes a list of details:
- profile photo
- first + last name
- job titles / roles
- known for … link + extra info (access via (+) toggle)
- links: website + description
- elsewhere: list of links to social media accounts
To allow detailed input, and set up links as required, I’ve used the following setup of fields within my ‘People’ fieldgroup:
editing content
This setup will result in the editor for any new ‘people’ posts to include the new custom fields:
Here’s Léonie’s top section as example:
template code
Once you have content to display, edit the template to pull in the details as required. Here’s a snippet to show the markup of the profile photo and credits.
<!-- profile photo -->
<?php
$image = get_field('people_profile_photo');
if( !empty($image) ): ?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<figcaption><?php the_field('creds'); ?></figcaption>
</figure>
<?php endif; ?> This might all look a tad long-winded and you might think it’s quite complicated — but it really is not ;) Once you have used one custom field successfully, you’ll be well on your way and it’ll get easier and easier :) The ACF documentation is excellent and will help you understand your options.
udpate, October 2024
Last month saw some drama in the world of WordPress: Matt announced that WPEngine, a company offering hosting, maintenance and plugins, has been banned from wordpress.org. A few weeks later, this popular plugin has also been affected – with wordpress.org forking it to take ownership themselves. Many different reactions followed, of course – and it is worth knowing about this if you consider using the plugin for a client site.
First up, do have a read of the blog post from Matt explaining these decisions:
WP Engine is not WordPress
Secure Custom Fields
While many people feel this is a really bad move from the side of WP/Matt – I am reluctant to form an opinion as I don’t know the ins and outs well enough to understand the full story here. I am just relieved to know that not everyone abandons ship: I stayed, Jeffrey Zeldman.
There are too many articles around to quote here, and I can’t quite get over my personal feeling of people reacting strongly against this due to the fact that money is involved as part of the discussion. To me, there are still very few system around that stayed as true to their original mission to be for people as WP. While I don’t agree with many of the recent moves by wordpress.com (I teach it, so I currently do struggle to see how lots of the latest changes are good…) ~ I still think that WP is quite unique and overall created for the greater good.
This article is a good summary of the conflicting thoughts many are now having as a response: Is Matt Mullenweg defending WordPress or sabotaging it?
Practically speaking:
If your site is using the free version of ACF – you can now get it from their main website. Check the footer for the link to download. Bear in mind that if you are using it and update via the admin interface, you will be using Secure Custom Fields instead. This means you will get all the functions available on the free version of ACF, updates will be handled as always, via the wordpress.org website.
(At the time of writing, the plugin itself will still show the ACF branding but all up-sell options are now removed)
If you are using the Pro version, you can still update via downloading the files from the main ACF site too – and nothing will break. If you paid for the update to PRO, it is likely that you are using some of the more advanced features, and so you can keep updating and your setups will keep working.