Advanced Custom Fields in WordPress Theme Development

We learned how to develop a custom theme in WordPress, but to make it more customizable, we need to use custom fields. Advanced custom fields plugin makes it easy to add custom fields to a post or a page. We can use WordPress’ native “Custom Fields” meta box, but this requires naming the field again for each new post. Advanced custom fields is a more robust method for adding those fields, and it’s simple for our clients to use.

What You Will Need 

• A fresh installation of WordPress
• The Advanced Custom Fields Plugin
• A child theme based on WordPress’ Twenty Seventeen theme

#1 Create Custom Field Groups

Let’s make custom field group for a post category “Movies”. We want to display the movie title, year, director, actors, IMDb rating, movie poster, and a trailer.

1. From the Dashboard, go to the “Custom Fields” menu. You should see an empty table of Field Groups, click “Add New” at the top of the page.
2. Name the group “Movies”
3. Under “Location” set rule if post category is equal to “Movies”
4. Click on the blue “+ Add Field” button
5. Enter “Movie title” for the field label and field name should auto-populate with “movie_title”
6. Leave the Field Type set to the default option, “Text”
7. Click on the blue “+ Add Field” button again for a new custom field
8. Set Field Type to “Number”
9. Repeat steps for director, actors and IMDb rating
10. Movie poster custom field set Field type to “image”
11. And for custom field trailer set Field Type to “oEmbed”

If you follow along you should get something like this:

Scroll back up to the top of the page and click the “Publish” button

#2 Add Some Posts

Go to Posts > Add New, and you should see the standard WordPress post fields: Title & Content. When you check the “Movies” category, you’ll see the custom fields we just made appear below the content. We’ll need some test content to set up and test our templates, so create a test movie post.

Creating a template with ACF

Without adding PHP code to a template, we can’t see in frontend our content form custom fields.

To add in our ACF content, we’ll be utilizing two functions: get_field and the_field. It’s important to remember the distinction between the two:

• get_ will simply check for and retrieve the field data; whereas
• the_ will check for the data and print it.

It’s similar to how WordPress works with functions such as get_the_title vs the_title.

So for our title, we would use something like this:

<h2><?php the_field('title'); ?></h2>

We can use similar code for a year, director, actors and IMDB rating. For a cover photo we will use simple code to generate the responsive images in HTML:

<?php 
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>

For our Trailer embedded code we can use simply:

<div class="embed-container">
<?php the_field('oembed'); ?>
</div>

Now we can style this code as we like in css just like the normal template. Here is a little trick to make embeds responsive:

<style>
.embed-container { 
		position: relative; 
		padding-bottom: 56.25%;
		overflow: hidden;
		max-width: 100%;
		height: auto;
} 

	.embed-container iframe,
.embed-container object,
.embed-container embed { 
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}
</style>

This is just one small part of the possibilities with Advanced Custom Fields. With new updates, Custom fields will also allow us to make guttenberg custom blocks. Learn a lot more about Advanced Custom fields and make your templates batter.