Advanced Custom Fields (ACF) – Supercharging Your Custom Post Types 🔥

Why Use Advanced Custom Fields? 🧐

You’ve already learned how to create Custom Post Types (CPTs) and custom taxonomies, but what if you need to add more specific data to your posts? Let’s say for a movie, you want to store extra information like Director, Release Date, and Rating. Where do you put that? In the content editor? Nah, that’s too messy. 😅

Instead, you can use Advanced Custom Fields (ACF) to create custom fields that attach directly to your post types. It's like giving your post types their very own input fields that are clean, organized, and easy to use!

Step 1: Installing the ACF Plugin

First, you'll need to install the Advanced Custom Fields plugin. It’s a free plugin available from the WordPress Plugin Directory.

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for “Advanced Custom Fields”.
4. Click Install Now, then Activate.

Boom! ACF is now ready to roll. 😎

Step 2: Creating Custom Fields for Movies 🎬

Let’s say we want to add a Director, Release Date, and Rating field to our “Movies” custom post type. Here’s how to do it:

1. In the WordPress dashboard, go to Custom Fields > Add New.

2. Set the Field Group Title to “Movie Details”.

3. Click + Add Field and set up each field:

   • Field Label: Director

     • Field Name: director
     • Field Type: Text

   • Field Label: Release Date

     • Field Name: release_date
     • Field Type: Date Picker

   • Field Label: Rating

     • Field Name: rating
     • Field Type: Number

4. Under Location, set the rule to show this field group if the Post Type is equal to “Movie”.

5. Hit Publish.

Now, when you create or edit a movie post, you’ll see these custom fields waiting for you in the post editor. 🎉

Step 3: Displaying Custom Fields in the Frontend 🌐

ACF makes it super easy to display your custom fields in your theme templates. Let’s modify our single-movie.php file to show the Director, Release Date, and Rating.

<?php get_header(); ?>

    <h1><?php the_title(); ?></h1>

    <div class="movie-content">
        <?php the_content(); ?>

        <div class="movie-details">
            <p><strong>Director:</strong> <?php the_field( 'director' ); ?></p>
            <p><strong>Release Date:</strong> <?php the_field( 'release_date' ); ?></p>
            <p><strong>Rating:</strong> <?php the_field( 'rating' ); ?>/10</p>
        </div>
    </div>

<?php get_footer(); ?>

• the_field(): This function is provided by ACF and allows you to display the value of a custom field. In this case, we’re displaying the Director, Release Date, and Rating.

Now, when you view a movie post on the frontend, you’ll see these custom fields displayed in the template. 🎥✨

Step 4: Making It Prettier with Custom Styles 💅

Okay, your custom fields are displayed, but let’s be honest – it’s still looking pretty basic. Let’s add some simple CSS to make the movie details look more polished.

In your theme’s style.css file, add this:

.movie-details {
  background-color: #f5f5f5;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
  font-size: 16px;
}

.movie-details p {
  margin: 0;
  line-height: 1.6;
}

.movie-details strong {
  color: #333;
}

Now your custom fields are displayed in a nice, clean box, making your movie posts look more professional. 🎬

Step 5: Working with Conditional Logic 🕵️‍♂️

One of ACF’s coolest features is conditional logic. What if you want to show the Rating field only if it exists, or display a special message if the rating is particularly high?

Here’s an example of how to display the rating only if it’s present:

<?php if ( get_field( 'rating' ) ) : ?>
    <p><strong>Rating:</strong> <?php the_field( 'rating' ); ?>/10</p>
<?php else : ?>
    <p>No rating available for this movie.</p>
<?php endif; ?>

And if you want to highlight movies with a high rating, you can do something like this:

<?php
$rating = get_field( 'rating' );

if ( $rating >= 8 ) : ?>
    <p><strong>Rating:</strong> <span style="color: green;"><?php echo $rating; ?>/10 – Highly Rated!</span></p>
<?php elseif ( $rating ) : ?>
    <p><strong>Rating:</strong> <?php echo $rating; ?>/10</p>
<?php else : ?>
    <p>No rating available for this movie.</p>
<?php endif; ?>

Now, movies with a rating of 8 or higher will show a special “Highly Rated” tag in green. 🟢

Step 6: Making Fields Repeater-Friendly ♻️

Sometimes, you’ll need to repeat a field multiple times. For example, if you want to add multiple actors for a movie, you can use ACF’s Repeater Field.

1. Go to Custom Fields > Add New and add a new field to your “Movie Details” field group.
2. Set the Field Label to “Actors” and the Field Type to “Repeater”.
3. Inside the repeater, add a new sub-field:
   • Field Label: Actor Name
   • Field Type: Text
4. Save your changes.

To display the repeater field in your template, do this:

<?php if ( have_rows( 'actors' ) ) : ?>
    <ul>
        <?php while ( have_rows( 'actors' ) ) : the_row(); ?>
            <li><?php the_sub_field( 'actor_name' ); ?></li>
        <?php endwhile; ?>
    </ul>
<?php endif; ?>

Now you can add as many actors as you want for each movie, and they’ll be displayed in an unordered list. 🎭

Step 7: Import/Export Field Groups 📦

What if you want to reuse your ACF field groups on another WordPress site? You can easily export your field groups from one site and import them into another.

1. Go to Custom Fields > Tools in the WordPress dashboard.
2. Click Export to export your field groups as a JSON file.
3. On the other site, go to Custom Fields > Tools and click Import to upload the JSON file.

This saves you time by not having to recreate the fields manually on different sites. 🎉