WordPress Custom Post Type & ACF Tutorial

Assuming you want to write simple articles or posts in this new custom post type we just created, then that’s fine and we are close to being finished. However, in a lot of cases, we want to add some custom data fields to our new post type, that’s where Advanced Custom Fields comes in.

Advanced custom fields is a free plugin that enables you to add custom fields to your new custom post type. Note that that is our objective in this post, however you can add custom fields wherever you want. You can add them in pages, a specific page, all posts, specific categories etc. Wherever you want, in this post we are going to add them to our newly created custom post type.

Note that there is another option – their premium plugin has more functionality, the most important feature is the repeater field. lets just say that you have a field that the amount of times that you will need it in each post will change, you need a repeater field which comes only in the pro version. If we return to the hosting review example, lets say you have a field for the “hosting plan name” and one hosting company has 3 plans and another has 6. It would make the most sense to use a repeater field so you don’t pre-create 6 fields if they are not needed.

Another example that might make more sense: Say you have a recipe Custom post type and you have a field called ingredients, since you never know how many ingredients will be in each recipe, you need a repeater field called ingredients and you add a new row for each ingredient that you add. Make any sense?

After installing whichever plugin you chose and activating it, you will see a new link on your sidebar named “Custom fields”.

If you click on it you will get to the main page that shows all the field groups you created. Since this is a new installation it’s empty. Now lets click on the  “add new” button and create a new field group which will contain our custom fields for our new custom post type.

It’s pretty simple from this point. Give your group a title and click “add field”

Now lets add a test field called test and choose a “text” field type.

Now scroll down a bit and choose where you want the field to appear. In my example I’m choosing the “hosting review” post type but you can choose whatever you want.

When you’re finished updating the custom field group hit “publish” at the top.

Now lets go to our custom post type of wherever you chose to add your custom field and make sure our test field appears there. If it doesn’t, go back and see what you missed, if you see it – great! We’re getting close.

Everything looks pretty good until now but we need to actually display our new Custom post type somewhere, right? So lets go…

Go into you theme’s folder (or child theme if you are using one) and create a new php file like so:

1. The first part of the file name is “single”
2. The second part of the name is your custom post type’s name
3. The third part is the “.php“

So, if my custom post type’s name is “best-hosting-review”, my file’s name would be “single-best-hosting-review.php“, if my custom post type’s name is “recipes”, then my file’s name would be “single-recipes.php“, it’s as simple as that. Now in order for us to keep the actual look of your website and just switch the content with our new custom post type, we’ll go into the theme’s single.php file and copy its contents. Now go to our new file, open it and paste. Just to make sure you got it right – create a new post, add a title and a few words in the content area and save. Now go to the generated URL. You should see what you just created. The custom post type should work by displaying your title and content. If not – go back and see what you missed or did wrong.

Our last part is to display our “test” field within our page. So, go wherever you want to display it in the file. and add this:

<?php echo get_field('test'); ?>

Now go to your post you created and add something into the “test” field and save. Now if you save your php file and refresh the URL you should see what you just added into the custom field. That wasn’t too hard, right?

Advanced custom fields has lots of tutorials of how to use their fields to your advantage. For example, an image is printed out a bit different. Here is an example of that:

$logo = get_field('logo');
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>" />

Since the image is an object, we need to get it and print out the part we need within the array. In this example my field name is “logo” and I put it in a variable with the same name and call the actual URL and alt when I need them.

As I said, there are many options and types of fields, such as the repeater field. Here is an example of that:

<?php

// check if the repeater field has rows of data
if( have_rows('repeater_field_name') ):

 	// loop through the rows of data
    while ( have_rows('repeater_field_name') ) : the_row();

        // display a sub field value
        the_sub_field('sub_field_name');

    endwhile;

else :

    // no rows found

endif;

?>

You can see more advanced options here.

If you are an Elementor fan like us, you will probably enjoy Elementor’s new Custom Post Type Builder. Here is a video tutorial to get you started.