Web Development

WordPress Development

WordPress Custom Post Types and Advanced Custom Fields

March 12, 2015

Often times, we work with clients who need a products page or a team page that displays collections of dynamic content that include various types of data (text, images, charts, pdf downloads, etc.) per item. Sometimes we’ll even be asked to show various pieces of those items in multiple locations on the site – a menu of the collection, for example.

There’s often no one right way to do things. Though, when using WordPress, we’ve found a method of achieving this while getting ultimate customization and reusability, as well as an intuitive, fool-proof admin experience.

Let’s take the products page as an example. We recently had a client with a particular product suite in which a customer would choose a package that would always include a main component. The customer could then review, compare, and select a combination of multiple sub-components. Each sub component needed a description, image, and spec chart that would display on the page, ideally dynamically, in a responsive layout with an intuitive user experience that could also be easily managed in the back end.

Our method utilizes the indispensable plugin, Advanced Custom Fields, in combination with custom post types to create an easily managed, easily queried set of posts that can contain any type of data needed. Let’s look at how to quickly set up something similar.

Install the Plugin

First, and perhaps it goes without saying, we’ll need a WordPress install. Second, if you install no other plugin, install Advanced Custom Fields Version 4.4 is what is available on the WordPress Plugin Directory at the time of this writing, but we happen to know that if you want to go for a paid pro account, Version 5 has some pretty killer features. For our purposes here, the free version is all we’ll need.

Register Your Custom Post Type

The next step deals with WordPress’ standard custom post type registration. Here, we’ll register the Products post type. For more information on registering custom post types, parameters, and custom taxonomies, see Add this to your functions.php file.

Set Up Advanced Custom Fields

Now that we have our newly created custom post type, we can start to create all of the products we want as individual posts. But what if we want each product to include a title, main description, a downloadable pdf of specifications, and two images? We could cram all of that in the one wysiwyg WordPress gives us and hope for the best, but that’s not going to be the most reliable and easily managed method of building our back end. This project sounds like we need some custom fields. First, head to the Custom Fields admin page and add a new field group. Call this group ‘Product Info’ and add a new rule in the Location box that reads ‘Show this field group if Post Type is equal to Product’. If you do not see Product as an option to select, go back and make sure you registered your custom post type correctly. rule Next, start adding fields to the group. This tutorial assumes some level of familiarity with the plugin, but if you aren’t familiar with Advanced Custom Fields, have a look at their documentation: Because each product post will already have a title, a content wysiwyg, and a featured image, we can use those as product title, product description, and one of the images.  For the other product features, add a File field called ‘Download’ with a return value of File Array, and an Image field called ‘Product Image’ with a return value of Image URL. product_info

Querying the Products

After adding a few products, we need to output them somewhere. This can be done in whichever way works best for your site. You can make a template php page that queries the posts, or use a custom shortcode; regardless, you are now in a position use any part of the products data in any way you wish. Here is an example of a basic query:

This is a very simple query that will output all of the products entered, but you can see that any of these elements can be queried on any page. Everything is managed on the backend in one place and the opportunities for reusing the data are endless. One query can be used to create a menu of products as well as each product output. A product that relates to a particular blog article can be queried on that article’s single view page. If you are into the new WordPress api, this will be exposed for use there as well.

If your WordPress site needs more flexible data with an easy-to-manage back end, Advanced Custom Fields is the perfect solution for visually creating fields, selecting multiple input types, assigning fields to multiple edit pages, easily loading data through a clear and familiar interface, and improving upon native WordPress custom post type and metadata features for ease and fast processing. If you need help building, customizing, or refreshing your web presence, Fresh can help. Contact us for more information or a free quote.

Looking for more on WordPress? Check out our other WordPress posts.

Dave Reese

Sr. Front-End Developer

  • This is the first CPT and ACF tutorial I’ve come across that is easy to follow and explains exactly what is happening. Was able to follow this on my VPS environment and got it to work perfectly.

    Thank you very much for this and I look forward to expanding on this for my projects.

    I do have one question. How do you add a thumbnail when using this setup? More specifically, this code:

    $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ );

    I can’t figure out where this is referenced in the custom post type when adding a Product.

  • Thank you very much for this article. It taught me how to make the custom posts, I feel quite powerful now! 🙂

  • Thank you, so simple and genius! 🙂

  • Jack Davies

    Thank you! I’ve been looking for the past hour on how to serve up my custom toolset types images in a 1:1 ratio. This was the perfect solution!

  • Awesome, thank you so much.

  • Great article. How do you recommend using ACF to add a WYSIWYG editor to the primary CPT menu, which would display on the archive page for the CPT? Thanks!

  • mobby

    I had created a custom field as Specialty under field group Doctor.
    When I do get_fields() it just returns false. What wrong I am doing? thank you

  • Ahmed Nour El Din

    variables are always empty , don’t know why

  • Kathrin John

    Hello mate I have been trying to create new custom post for university website where student are allowed to access dashboard. Every student have to upload specify type of content whereas admin/teachers upload content like quiz/results which should be save in different post type. I have been digging around for while and found the following guide useful but there is no way how can I restrict different post type for different user roles. Can you suggest me any method to achieve this task?

  • Sarah Baldwin

    Hello. I am trying to adjust the size of my custom field as it is full
    width footer and yet it is quite short only taking up something like
    three lines of text high. As well, it is currently a text area. Which
    field type would give me use of buttons of the widget encoded into the
    custom field. Thx in advance.

You might also like...



Modernizing WordPress Development with Sage 9 – Part 2

In the previous post, we introduced you to Sage 9, our choice when it comes to developing a WordPress theme from scratch. Sage 9 contains a ton of content and features that can help you modernize your WordPress development process. As we mentioned previously, Sage 9 utilizes the already-popular Blade Template Engine from Laravel. One of the … Continued



Modernizing WordPress Development with Sage 9 – Part 1

At Fresh Consulting, we’ve been using Sage as THE starter theme for some time now. Sage itself has been pushing WordPress development on more modern technologies. And with Sage 9, this has become a big step in WordPress development. Some aspects of the development workflow for WordPress are ancient and obsolete. This is where Sage 9 … Continued



How to Create a Fuzzy Search-as-You-Type Feature with Elasticsearch and Django

Tutorial: How to Create a Fuzzy Search-as-you-type Feature with Elasticsearch and Django Recently, I had to figure out how to implement a fuzzy search-as-you-type feature for one of our Django web APIs. I couldn’t find any comprehensive tutorial on how to build this specific feature, so I decided to combine multiple sources and document the … Continued

Pacific Science Center

application maintenance and development

Pacific Science Center


mobile development



web design, microsite development


Seattle Public Library

ui/ux design, microsite development

Seattle Public Library