How To Set Up Custom Post Templates (No Coding Required)
A step-by-step tutorial to bend Wordpress to your will using custom post types, custom fields and custom post templates… all without any coding required.
A lot of people don’t realize just how flexible Wordpress really is. They don’t realize that it can be turned into almost anything you want.
See, most people who use Wordpress know that it has posts and pages. That’s the default. Many don’t even know what the difference is. 🙂
Posts and pages aren’t the only thing you can do, however.
You can also set up custom post types. For almost any purpose you want. And you can even set up custom templates to make them look however you wish.
And, did you know all this can be done without doing any actual coding? You don’t need a developer.
In this post, I’m going to walk you through how to set up custom post types, complete with some custom fields, and then custom templates to control how they look.
And nowhere will I need to write a single line of code.
You’re going to learn some of the things that make Wordpress so flexible. 🙂 So, let’s go…
What Is A Post Type?
As mentioned above, Wordpress comes with 2 post types by default: pages and posts.
Typically, posts are used for blog posts and pages are used for core pages that don’t display in a blog. So, about pages and contact pages and things like that.
At the technical level, there is no difference between a post and a page. It is just a type of content. And regardless of what type of content, it is all stored in the same place in the Wordpress database. Literally, the only difference between a post and page at the technical level is the “type” added to the database record. One is “post” and the other is “page”. That’s it.
Wordpress is set up to display them separately in the admin panel.
But, you’re not limited to 2 post types. You can actually make as many as you want. For any purpose.
Whenever a plug-in, for instance, adds menu options to Wordpress for managing different kinds of things, all it is really doing is adding custom post types. If you install WooCommerce to run an online store, all the products are just custom post types. If you set up an event manager plug-in, each event is a custom post type.
So, a post type can be ANY kind of content.
And it is easy to set up new ones. But…
Why You Might Want Custom Post Types
In most cases, plug-ins that you install will create whatever custom post types are needed to suit the purpose of the plug-in.
Sometimes, however, you want to create your own.
A custom post type is quite useful for any content that you want to list, manage or format differently.
Inside THE LAB, I use a custom post type for our video library. I am able to manage all video recordings (for office hours, workshops, etc.) in their own repository…. complete with it’s own category structure. I do the same for our Document Vault, which I use for a library of PDF downloads.
I don’t want those things managed alongside blog posts. I want them formatted differently. So, that’s why I set them up as custom post types.
What I’m Going To Build (And Show You)
Here on the public Blog Marketing Academy website, I’m going to use and set up a collection of simple landing pages specifically for the courses in the course library of the LAB.
So, I am going to create a custom post type simply for these courses. Here’s why…
- It is easier to manage these course pages separately from all the other pages of the site.
- I will be able to categorize or tag these pages as I see fit, thereby allowing me to list and display course pages in any way I see fit.
- I can set up custom fields specific to courses that I don’t need for anything else.
- I can set up a custom template for each course. This means I don’t have to find a way to cram sales copy into a standard page template.
I’ll show you how I am building it. No coding required. And it will all make sense in the end (hopefully). 🙂
The Required Tools
There are always multiple ways to do things when it comes to Wordpress. But, I want to use a solution that requires no coding and can be done by anybody.
So, here’s what I will use:
- Custom Post Type UI. This plug-in provides a simplistic interface for adding/editing custom post types in Wordpress.
- Advanced Custom Fields. This plug-in allows you to add custom fields throughout Wordpress. I’m going to use it to create fields specific to my online courses that I can then output into my template.
- Thrive Theme Builder. This is the theme platform I am using on this site. I will use it to build a custom template for my online course landing pages. You can read my full review of Thrive Themes here.
OK, let’s get started…
Creating Our Custom Post Type
Once you have the Custom Post Type UI plug-in activated, you will see the “CPT UI” menu option. Go to Add/Edit Post Types.
In the “Add” tab for this screen, we will have the basic fields we need to enter to create our post type:
- Post Type Slug. This is a simple, alphanumeric internal identifier for this post type. It will show up in the URLs for the this type.
- Plural Label. The plural form of the name of this post type.
- Singular Label. Likewise, the singular form of the name of the post type.
Since I am creating a custom post type for my course library, I set them like so:
There are a bunch of additional settings on this screen that you can set if you want. In almost all cases, you can just leave it all default. But, in some cases you may want to take further control.
For instance, in the “Supports” section, you can enable/disable certain features from this post type.
If you wanted to disable the main Editor, for instance, and only show your custom fields, you could do that by unchecking “Editor”.
Once you click the button to save this post type, you will see it show up as an available option in your Wordpress admin menu.
Using Categories Or Tags With Your Custom Post Type
If you want to be able to organize your custom post type by categories or tags, you can do that, too.
Inside of CPT UI, go to “Add/Edit Taxonomies”.
A taxonomy is simply an organization structure for content. It could be categories or tags. You can use common taxonomies for multiple post types or create a new one specific to your new post type.
Basically, the process of creating a taxonomy is quite similar to creating a post type. The one addition is that you need to “attach” the taxonomy to the post type you want to use it on.
Unless you intend to display your custom post type by category, I wouldn’t bother with it. Since I am using this post type just for course landing pages, I am not using a taxonomy.
In the future, I may decide to set up a taxonomy for my course landing pages. Doing so would allow me to query and filter courses by category. I could display custom listings of related courses on any blog content across the site, for instance.
Customizing Our Post Type With Custom Fields
So far, we’ve created the post type. By default, it wouldn’t be any different than any other page, however. So, we’re going to customize it using custom fields.
For my course landing pages, I have some custom fields that would be useful:
- URL to the shopping cart to order the course.
- The price of the course
- A short description of the course.
If I wanted to use a sales video on each one, I could include another custom field for the video embed code. Really, it is about whatever would be useful.
I am going to create these custom fields using the Advanced Custom Fields plug-in. Once the plugin is activated, you’ll have a new menu option for “Custom Fields”.
We’re going to create a new Field Group. I call mine “Course Fields” just to be descriptive. I will then add 3 fields to this field group:
- Cart URL. Set as the URL field type this way it will be accessible in Thrive Theme Builder for links.
- Short Description. I decided to use a simple text field for this since I wanted to use it in my template as a kind of sub-headline to describe the course.
- Course Price. The price my shopping cart will charge them for the course. This way I can show the price on the landing page.
In the Location section, it is important that we tell Wordpress we want these fields to display only when the post type is “Course”. In your case, you will assign the fields to whatever your post type is.
Once you save this field group, you can go to the “Add New” screen for your custom post type and you will see the fields in place.
If you want to add additional fields or make any changes at all, you can always go back to the field group, make those changes, then come back to the post screen to see what the fields look like.
You’ve now created a custom post type AND added custom fields to it that are appropriate to whatever your purpose is. Mine is simple course landing pages. Your’s could be different.
But, now, we have to SHOW these things on the front-end of the site. So, let’s make that happen…
Setting Up Our Display Template In Our Theme
I use Thrive Theme Builder on this site. What makes this platform so powerful is the ability to control almost every aspect of your theme right from your admin panel using a visual builder.
No coding. No PHP files or complicated child themes. It is all done via the admin panel.
Theme Builder can also be used to set up different post templates for custom post types. Let’s do that…
Go to Thrive Dashboard > Thrive Theme Builder. Then, go to the Templates section. By default, you will see your “Core Templates” for your standard posts, pages, etc.
To create a new post type template, click on “Add New”. Give the template a name.
This template will be a “Single” template, not a “List” template. A Single template is for showing single pieces of content at a time. A List template is for showing listings.
In the Content Type dropdown, select your custom post type. And for your post format, choose whether this is going to be a standard template, video or audio. Usually, you’ll just use Standard.
Now, you’ve got two options to create this template. You can either start with a blank canvas and build your own from scratch… or you can use a template to base it off of. More than likely, you’re going to want to start with a template. It’s just easier. 🙂
In the next dialog, you’re going to see a bunch of templates you can use as starting points. Most likely, you’ll see their built-in cloud templates first.
If you want to use any of your own templates as a starting point instead of one of their’s, just select “Saved Templates” in the dropdown in the upper left. You will then see the existing templates from your theme that you can use. This is especially handy if you want to carry over a bunch of customizations over to your new template without re-creating things.
Once the template is saved, you’ll have your default template for this course type. In my case, I have a template for my post type “Course”.
Next, you just open up the visual editor by clicking on the template so you can start editing it to your liking.
Editing Your Custom Post Template
With Theme Builder, you’re using their Thrive Architect platform to visually edit any aspect of the template.
The thing to keep in mind is that this is a THEME template, not a single page. This means there’s certain aspects of this template that need to be dynamic. It will change from page to page, but use the same template.
This is not a full tutorial on how to use Thrive Architect or the visual builder. But, it IS important to know how to insert dynamic text. More specifically, to insert the custom fields you have created for your post type.
Here’s my template in progress with descriptions of where the data is coming from:
To insert dynamic text into the template, you can either use one of. the pre-built draggable components (like Post Title), or just use the standard Text component.
When using the text component, the toolbar will show a little dynamic icon. You can use that to select which dynamic field you want to use in that spot.
Now, one of your data sources for dynamic text is “Custom Fields”. And once selected, you will see any text custom fields you set up for this post type.
You’ll likely see a few other fields there. Some will be internal fields with weird names added by other plug-ins. But, in there you will see your own custom fields that we set up using Advanced Custom Fields.
Now, it is important to know that Thrive Theme Builder will show these fields in context with the type of field it is. In fact, here’s the breakdown direct from Thrive Themes on how the field types you use in ACF match up to the theme components in Theme Builder:
Note:In order to be able to properly use the custom fields, you will need to have a specific custom field type, previously set up. This way you can use those custom field types with each of the compatible elements, as follows:
- “Text” element → “Text” field type
- “Hyperlink” → “URL” field type
- “Image” element → “Image” field type
- “Audio” element → “File” field type
- “Video” element → “File” field type, or “URL” field type
- “Progress Bar” element → “Number“ field type, set between 0 – 100
- “Fill Counter” element → “Number“ field type, set between 0 – 100
- “Star Rating” element → “Number“ field type
- “Countdown” element → “Date Time Picker” field type
- “Google Map” element → “Text” field type of coordinates with no space between (such as -33.8346756,151.1904268).
If you need details on how to set up these field types, take a look at the article here.
So, when inserting dynamic text, use the text field type. If you want to insert dynamic links (for buttons, for instance), use the URL field type. For a dynamic image, the image field type.
For the button in my template, you can see the dynamic use of the Cart URL custom field:
You’ve got a ton of flexibility.
Let’s Bring It Home
As I hope you can see, by using the right tools you can literally bend Wordpress to your will and turn it into anything you want.
In this post, I used a very simple example of creating a simple listing of courses as a custom post type, giving me the ability to display them using a custom template to use as a course landing page.
This is easier and more flexible than trying to use Thrive Architect to manually build a bunch of separate landing pages for each course. I could have done it that way, however using a custom post type allows me the ability to group and organize the courses as I want as well as keep a consistent design across all of them using the theme itself.
- We used the Custom Post Type UI plug-in to create our custom post type.
- We used Advanced Custom Fields to add custom fields we want to use, since we’re never just stuck with what Wordpress has by default.
- We used Thrive Theme Builder to easily (and visually) build the template to show this post. type.
We did it all without ever touching a line of PHP code, editing any files, using an FTP program, or any of the stuff sure to send most non-geeks into confusion. 🙂
This same setup could be used for any kind of custom content you want to have on your site.