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.
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.