So, you’ve added custom post types to the WordPress admin and now you’re wondering how to display them. This tutorial will show you how you can display custom post types, complete with custom fields and taxonomy, on the site’s front-end.

To make this explanation easier to follow, we’ll use an example and show how it works. Of course, you can apply the same idea to your own custom post types, fields and taxonomy.

We will show you how to display “consultants” on the front-end of your WordPress site.

Because we don’t want to invent the wheel (wheels have been doing great for the past 5500 years), we’re going to use plugins for much of our explanation. Toolset plugins (which we sell) make it easy to display custom post types on the site without writing PHP. We’re also going to link to other pages that explain how to do specific things with PHP, in case you’re not interested in spending money on plugins today.

The Three Places You Should Remember to Display Custom Post Types

Custom post types should appear in the front-end in several places. Of course, not all are required, but most WordPress sites will display custom types on these:

  • “Single” pages – these are the pages that display individual items of the custom type. For example, a single consultant.
  • “Archive” pages – these are the built-in archives that WordPress sets up for custom post types. Normally, the archive appears in the breadcrumbs, so it’s important for SEO reasons to offer archives for any custom post type on your site.
  • As lists inside other pages – you can add lists of custom types to other pages. In our example, we’re adding a list of consultants to the site’s homepage.

If you are using Toolset, you can see a table of how your custom post types display in Toolset->Dashboard.

The Toolset Dashboard with a single custom post type (consultants)
The Toolset Dashboard with a single custom post type (consultants)

This table lists all the custom post types in your site, shows you the custom fields and taxonomy that they include and shows how your site displays them on the front-end. From that table, you can also create missing display elements.

Loading Content from the Database

Before you can display content, you need to load it from the database. For “single” pages and “archives”, WordPress does the work for you. WordPress knows which post (or list of posts) to load. Your job is to design how to display it.

When you want to add lists of items to other pages, it’s your responsibility to load these lists.

If you want to stick to PHP-only, you should use the WP_Query call to load items from the database. Then, you need to iterate over them and display.

With Toolset, you create a View in order to display lists of items inside other pages. The first part of the View setup is to choose what content you want to load, how to order items and how to filter items from the database.

A View that loads custom post types from the database
A View that loads custom post types from the database

Designing Templates

Now that you’ve selected the content to display, it’s time to design templates. A template tells WordPress how to display a single item on the front-end. You can use templates for the “single” pages and for loops.

“Single” Custom post item “Loop” with custom post items
single-consultant list-of-consultants

So, no matter what you’re displaying and where, the first thing that you should do is create a template that will display each item. Then, if it’s a “single” page, you will use this template only once. If you’re displaying an archive or a list, you will use the template in the loop.

When you’re creating templates with PHP, you should write individual PHP files for each template. Then, use different APIs to display different elements. For example, you’ll use the WordPress themes API to display the built-in fields and you’ll use the API of your custom fields plugin to display custom fields.

With Toolset, you create templates using our Content Templates. You can design Content Templates in plain HTML or using Visual Composer or Beaver Builder.

Using Templates in Loops

Once you’ve designed the templates that will show individual items, it’s time to use them for archives and lists.

For example, look at our list of consultants, added to the homepage.

A loop over custom post types, using a template to display the different items
A loop over custom post types, using a template to display the different items

There’s a loop that goes through the consultants that we want to display. In the loop, we display each of the consultants with the template.

You can create loops in PHP, iterate over the items to display and render each with the PHP template that you’ve designed.

When you use Toolset, you can create a View, which displays each of the items with a Content Template.

Want to try Toolset?

Toolset plugins allow you to display custom post types on the site’s front-end, without writing PHP. A single Toolset account lets you build unlimited sites for yourself and for your clients. You can choose between yearly ($149) and lifetime ($299) support and updates.

We offer refunds for Toolset to up 30 days from the order date. So, you can try Toolset for 30 days and see how it works for you. If you’re not 100% happy, you get your money back.