How to create feature boxes using Advanced Custom Fields WordPress plugin

• Tweet

• Tweet

Advanced Custom Fields (ACF) is one of the most powerful WordPress plugins out there.

ACF is able to work with any field types, from wysiwyg through to date pickers, but one of the most useful is the 'Relationship' field type.

The relationship field type can be used in many different ways, but to give you an idea of it's capabilities I'm going to show you how ACF can be used to control feature boxes on landing pages. You should end up with something similiar to this (see Fig. 1).

Step 1: create a custom post type for your feature boxes

1. Use this tool to create a custom post type for your feature boxes.
2. Make sure you call the custom post 'Features' then paste the generated code into your functions.php.
3. Refresh the WordPress dashboard and you should see 'Features' appear in the navigation.
4. Click on it and create four new features with a title, paragraph of text and a feature image for each.

Step 2: associate the 'Feature' posts with the landing page

1. Download and install the ACF plugin.
2. Go to the ACG settings page (called 'Custom Fields').
3. Create a new ACF by clicking on the 'Add new' button (see Fig. 2).
1. Field label: give the ACF a name, in this instance I've used 'Features'.
2. Field name: will automatically populate with 'features'
3. Field type: select 'Relationship'.
4. Post type: select the type of post you want to associate. In this case it is the custom post type we created called 'features'.
5. Leave all the other fields as their default setting.
6. Save the field.
4. We now need to assign the ACF to a page in the administration area (see Fig. 3).
1. Within the 'Location' panel select which page you want the ACF to appear.
2. As you can see I am using a page template called 'Services Landing'.
5. Save the ACF by clicking 'Update'

Step 3: select the features we want to appear on our landing page

1. Within the WordPress administration, navigate to the page where you want the features to appear.
1. Ensure the page is using the same template that was specified in the ACF (see step 6.B), in my case it is 'Services Landing'.
2. You should see the ACG panel you created beneath the wysiwyg. In the left column of this panel there will be the feature posts you created (see Fig. 4).
3. Simply click the features that you want to use.
4. The selected features will appear in the right column. You are also able to re-order them by clicking and dragging.

Step 4: display the ACF in your template

Paste the below code into your WordPress template:

<?php foreach(get_field('features') as $post_object): ?>
<article>
<?php echo get_the_post_thumbnail($post_object->ID); ?>
<h1><?php echo get_the_title($post_object->ID); ?></h1>
<p><?php print $post_object->post_content; ?></p>
</article>
<?php endforeach; ?>

The above code will loop through the feature boxes that you selected in step 3. All that is left is for you to write the CSS.

Conclusion

We really have only scratched the surface of what Advanced Custom Fields is capable of. To find out more have a look at the tutorials available on the ACF website.

Useful links

• Advanced Custom Fields (ACF) website
• ACF field types
• ACF code examples
• Tutorials for ACF