Quick Guide: How to Create AND Display a Custom Post Type on WordPress

Want to level up your WordPress knowledge? I’ve been developing a few personal sites lately. And one of the things I’ve been focusing on is creating custom post types for all of the information on those sites. And do you know what I’ve realized during that process?

Custom post types are friggin’ awesome. They make WordPress so much more powerful.

But if you’re a beginner, they can be tough. I struggled with a lot of poor solutions until I finally found one that let me, a non-developer, both create and display custom post types on the front-end of my WordPress sites.

And now, I want to share how to do that with you. I’ve found plenty of tutorials describing how to register a custom post type, but not very many that deal with actually displaying your custom post type on the front-end. So I’m going to cover both in this quick guide. Let’s get into it.

What Can You Do With Custom Post Types?

Basically, custom post types help you display anything that doesn’t neatly fit the criteria of “blog post” or “static page”. Plugins use them all the time. For example, you might have a plugin that helps you manage events or display real estate listings.

When such plugins create an “event” or a “real estate listing”, they’re using a custom post type to store all of that information.

If you’re looking for some more immediate examples, WPLift uses a number of custom post types to manage things like:

Another classic example, which I’ll use below, is a site listing movies. Instead of creating a blog post about each “movie”, you could create a custom post type for “movies” and automatically add meta boxes for important information like “release date”, “director”, etc.

Basically, custom post types are what make WordPress an all-purpose CMS, instead of just a blogging platform.

Then, head to the new Pods Admin link on your sidebar and click the Create New button:

Give your Custom Post Type a singular and plural label. Like I said, let’s pretend you’re creating a custom post type for Movies for this example:

And…you just created a custom post type. Seriously, it’s that easy! Look at your sidebar, you should see a new option for Movies:

How to Add Custom Fields to Your Custom Post Type

Ok, so now you’ve got your custom post type. But there’s really nothing unique about it. If you went to Add New Movie, you’d just see the regular WordPress Editor like any other post. So, let’s create a basic way to add some more information.

How about three options for:

Release date

Director

Cover image

To do that, you just need to click Add Field and you’ll see the Add Field interface. For the first one (release date), you need to make it a date field:

Repeating the process for the other two fields will give you something like this:

Note – if you wanted to get really creative, you could create a second custom post type for Directors and then link the two together using a relationship…but that’s a little more advanced than I want to get right now.

Once you save your pod, you should see those new fields when you go to add a new movie:

Cool! Now you’re finished, right? Ehhhh, one problem. See, you have those fields on the backend, but even if you add the fields like this:

You’re still only going to see this on the front-end:

Where did your custom fields go off to? They seem to have been misplaced. That’s because you still have to tell WordPress to actually display them on the front-end!

So let’s go knock that out of the way.

How to Display Your Custom Post Type on The Front-End

Ok, so to get the ability to do this without any complex code, you need to enable the Pods Templater. You can do that by going to Pods Admin → Components and enabling Templates:

Then, click on the Templates option under Pods Admin and click Add New:

To use the Pods Templater, you’ll utilize something called Magic Tags. Magic tags are what allow you to display your custom fields on the front-end without needing to know any PHP. So if you create a magic tag for the Director custom field, it will show the actual name on the front-end.

Don’t worry – it might seem a little complex at first, but I promise they’re very simple to use. First, select your Pod Reference (this is the custom post type you want to pull data from).

Then, you can open a new magic tag by starting to type “{@”. You should see a dropdown of all the possible fields. Let’s add our Cover Image first:

Then, below that, you can add the Director and Release Date. You can use HTML here, so it’s a good idea to also add some line breaks:

Once you Publish your template, you only need to do one more thing. Head back to your movie pod’s dashboard (Pods Admin → Edit Pods → Edit “Pod Name”) and go to the Auto Template Options tab.

Check the box to Enable Automatic Pods Templates For This Pod. Then, select your template and location. Let’s make our template display above the rest of the content:

You can also append the content below the WordPress Editor content. Or, you can completely replace the default WordPress content.

Once you save your pod, you can go back to the front-end entry for your movie and you should see something like this:

Coooollllll! It’s ugly, but everything is there. But what if you want to make it look more aesthetic?

How to Style Your Front-End Custom Post Type Display

If you want to get creative with your templates, you can add CSS and labels. So let’s hop back to the template and add some basic CSS and labels. Here’s what we’ll do:

Float the cover image to the left

Add labels for the director and release date

I’ll do this using inline CSS styles so you can see everything (but you shouldn’t really use inline styles like this in real life!). Here’s some quick code I whipped up in the Pods Templater:

Now, on the front-end, your movie entry will look like this:

So yes, you will need to know a tiny bit of CSS to move things around. But it’s really nothing complicated.

Wrapping Things Up

In this post, I barely scratched the surface of what you can do with Pods and custom post types. You can get much more creative with custom taxonomies, relationships, and tons more.

If Daan lets me, I’d love to write more posts going into more in-depth uses. But for now, you should know everything you need to:

Create a custom post type

Add custom fields to your custom post type

Display your custom post type on the front-end

And those three things alone give you the ability to do some really cool things with WordPress.

If you have any questions, leave them in the comments and I’ll try to help out to the best of my ability!

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.