WordPress

Advanced Custom Fields for WordPress Developers

The basics

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.

Native Custom Fields

Advanced Custom Fields

Installation

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 Fields

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.

Field groups are used to organize fields and attach them to edit screens. Each field group contains a title, fields, location rules and visual settings.

To get started with your first field group, please read our Creating a Field Group guide.

Field Group List

Field Group Settings

Field Group Location Rules

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.

Creating Content

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!

Fields are not just available for posts! You may also display fields your custom fields on the page, custom post type, user, taxonomy term, comment, media and custom options pages!

To get an idea of the different content you can edit in ACF, please look over the available field types.

Displaying Fields

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 get_field() and 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; ?>

To learn more about our API, please see our Functions and check out our Code Examples guide.

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.

If you have any questions that weren’t addressed in this guide, visit our Resource Center for more information or contact our support team directly.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *