Advanced Custom Fields is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as Custom Fields and can allow you to build website’s faster and educate your client’s quicker.
In this guide, you’ll learn how to:
- Install the ACF plugin
- Create new fields
- Create field content
- Display fields in your theme
Custom fields are a native part of WordPress and appear on pages, posts and custom post types, however, the native custom field interface is not very user friendly. With ACF installed, you can tailor what fields to show and what they look like. For instance, you may require a ‘Hero Image’ to be selected for your home page. You can use ACF to easily create this Image field and show it when editing the home page!
Here is the difference between native custom fields and Advanced Custom Fields.
The Advanced Custom Fields plugin does not come pre installed with WordPress so you will need to install our plugin before using its awesome features! Luckily for you, WordPress makes this a very easy process!
If you are familiar with WordPress, simply login to your site and search/install the Advanced Custom Fields plugin from the plugins page.
For a detailed instruction, please read our step by step instruction guide.
Creating new custom fields is a very easy process and can be done with just a few clicks of our user friendly field builder! You can create as many fields as you like, each with their own name, type and settings. Each field is added to a group which allows you to both organize your fields and specify the edit screens where they appear.
Each field contains settings to customize how the field looks (its type), where its value is saved (its name) and how it functions (its settings). These field settings can be customized when editing a field group.
To learn more about field settings, please read our Field Settings guide.
With your fields created, it’s time to start editing your content! All our fields are very intuitive to use and display seamlessly with the WordPress admin style. You don’t need to trigger any event to show or edit custom fields, they will appear and function just like the WP post_title and post_content fields! Simply enter your content and update the post!
To get an idea of the different content you can edit in ACF, please look over the available field types.
Displaying field values is ACF’s party piece! Any field value can be returned as a PHP variable or output as HTML via the magical functions
the_field(). These functions (alongside many others) provide a developer friendly way to customize your WordPress theme without spending hours reading our docs!
Here is some example code to see how our intuitive API works!
<h1><?php the_title(); ?></h1> <?php if( get_field('sub_heading') ): ?> <h2><?php the_field('sub_heading'); ?></h2> <?php endif; ?> <div class="hero"> <?php $image = get_field('hero_image'); ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> </div> <?php if( have_rows('event') ): ?> <ul> <?php while( have_rows('event') ): the_row(); ?> <li> <a href="<?php the_sub_field('url'); ?>"><?php the_sub_field('title'); ?></a> </li> <?php endwhile; ?> </ul> <?php endif; ?>
Education and Support
Good work! This guide covered all the basics for getting started creating with the Advanced Custom Fields plugin, but we’ve only scratched the surface of our available resources. As you work more about ACF, you’ll discover new features, functions, and even a powerful suite of Pro features that can help you take your WordPress website to the next level.