How To Create Listing Pages on Your Website (Using Custom Post Types)

we’re going to see how you can create a listings page on your WordPress website. Let’s say you have a website and you want to list your items like this on your site. You can do that by watching this video. So after watching this video, you will be able to create a page like this, where you can list a set of items.

Now, if a user clicks on that item, they can get all the details about that item. like this. This is very useful for listing out the items on your site. Like real estate recipes used automobiles or anything that you want. Now in order to create this page, we will be adding a new menu item here in our wordpress admin area.

And like we saw, this can be anything you want, like cars, bikes, recipes, etc. Now when we click ‘add new. you will get this page, where you can create the fields that you want to display on your item. Now, when we fill up these details and publish the page, we will get a brand new page on our site like this, with all the details that we entered here.

So by creating pages in this way, you don’t have to design a page from scratch for each item that you want to add to your site. Instead, you can simply fill up these fields the page is built automatically with the design that we choose. So in this way you save a lot of time in creating content for your site.

In this video, we will also see how you can customize this page in any way you want just by using drag and drop. Okay, let’s get started. This is Bryan from website learners. First let’s see the website where we’re going to create our listing. Here it is Now to create a listings page like this we’re going to do 2 parts.

The first part is to create a custom post type. Once you do this, You will be able to get a separate section on your WordPress admin area like this, where you can start adding your lists. So to create our custom post type we’re going to do 2 steps The first step is to install a plugin in WordPress. So to install the plugin, let’s go to our WordPress dashboard.

Now go to plugins and click, add new. Here Search for ‘pods’ and you will get this plugin. This is the plugin, which is going to help us create custom post types on our website. So to install, the plugin let’s click install, and click activate. So now we have successfully installed the plugin Once you have installed the plugin, we can now go to step 2 which is to ‘create a new post type.

So to create a post type go here and click add new. It will take you to this page. Now click create new and here enter a name for your post type. I’m going to create a list related to used cars So I’m going to enter pre-owned cars’ then enter the same name here and click next. Now, as you can see, a new section has been created, which means we have successfully created our post type.

So let’s click on it. now here you can start listing your cars. So to add your first item to the list, let’s click ‘add new’ And it will take you to this page. This is the place where you can add the details of your car. Now, if you scroll down, you can see that we do not have an option to upload any image.

ALSO READ.

• How To Migrate WordPress Site to New Host 2024
• How To Create Custom Business Email And Use It With Gmail
• How to Fix WordPress Not Sending Emails Issue – Gmail SMTP Setup Tutorial

So to add the option here, let’s go to ‘Pods admin and click ‘Edit Pods. Now go here, click edit, And click advanced options. Now scroll down and here you’ll find different items, which you can add to your post type. Now to add the image option to your post type let’s enable featured image and then click save.

Now if we go to this tab And click ‘refresh’ You can see that we have got the featured image option here. Okay let’s add our first item. As my website is related to cars I’m going to list down few cars So first let’s enter the title here. I’m going to enter a car’s name and here You can enter the description of the car Now to add the an image of the car Just scroll down and click set, featured image, Now here, drag and drop your image, And the image will be added once you have added all the details,

click publish, and it will be published on your site. So to check that, let’s click here And You can see that we have got our first listing Now, as you can see, this looks similar to our normal blog posts. So next, let’s see how you can add more details of the car like this on this page. So to do that, we’re going to create our own fields like this on your WordPress admin area.

So to create new fields, let’s go back to our dashboard. Now go here, click ‘edit pods’ and it will take you to this page here you can see that we have the post type which we created. Now to create new fields for your post click ‘edit’ and click ‘add field’ And you will get these options. Now enter the name of the field, which you want to create.

I’m going to create a field called make Now here you can select the type of field you want. Now So to make this a compulsory field enable this option, then click save field and a new field will be created. So to save this Just click ‘save’ Now to check that Now let’s go back to this tab and click refresh.

Now if we scroll down. You can see that we now have the new field, which we created. Let’s go back to this tab, Now in the same way, You can add as many fields as you want. Let’s say you want to add a gallery field. All you have need to do is click add field and here you need to enter a name for the field.

I’m going to enter gallery, then click here and select this type. Now if you want to add multiple images Go to additional field options, then click here, select multiple files Then and click save field. Once you have added all the fields you want, click save. Now let’s go back to this tab And click ‘refresh’.

Now if you scroll down, you can see that we have got all the custom fields, which we have created. Once you have created the fields which you want next, let’s add all these details of the car Now To add images of the car, Click ‘add file, select the images you want And then drag the images and drop them here and it will be added here.

Once you have added all the details, scroll up and click update. Now, if we go to this page and click ‘refresh’ you can see that, We do not have the any details which we added to our page. So next let’s go to part, 2 of this tutorial, where we see how you can display the custom fields on your page like this.

So to do that first, we need to create a design for our listing and then add the custom fields to it. We’re going to do this in 3 steps. The first step is to get the Elementor pro plugin. This is the plugin which will help us to add the custom fields to your listing. page. So to get Elementor Pro plugin Just click the link below this video, and it will take you to this page now to get the plugin, here, you will have different plans to choose from.

I’m going to select this plan and it will take you to this page. Now, fill up these details and scroll down. Now to get the plugin Enter your card details and then click ‘checkout’ So we have successfully made the payment. And we have got the download link here, Now to download the plugin, Just click ‘Download Elementor pro’ And the plugin will be downloaded.

Once you have downloaded the elementor pro plugin we can go to step 2 which is to install this plugin. So to install the plugin, let’s go back to our WordPress dashboard, go to plugins and click ‘Add New’. then click, upload plugin, Now drag this plugin and drop it here. And as you can see, Our plugin has been selected, Now to install this plugin Just click install and click activate.

So now we have successfully installed the plugin. Now, in order to use the plugin, it will ask you to connect activate the plugin. So to activate it just click here and then click ‘Activate’ And Now you can see that the plugin is active. This means that we can now start using the plugin. Now let’s go to the 3rd step which is to choose a design for your page’ So to choose a design, let’s go to ‘templates’ and click add new here you need to choose the type of template you want.

I’m going to choose single post and click create template here you will find different designs which you can choose for your listing page. Just select the design you want. I’m going to choose this one here you can see a preview of your design Now If you like this design click insert and you will get the design.

Now to add your content into this design, Just click here and click preview settings, Now click here And you will find your post type which is pre-owned cars So let’s select that and here enter the title of the page. As you can see, we have got our page here. let’s select that and click apply. Now as you can see, we have got our content here So now we have successfully created the design for our listing page.

Next. Let’s see how you can add your custom fields like this. So to display the custom fields here first, let’s add a heading. So let’s drag this heading element and drop it here. Now select the text and enter a title I’m going to enter ‘car details’ Now To add a section like this click here And drag this element and drop it here and you will get these 2 sections Now let’s add the first field.

So to do that, just search for ‘icon box, Now drag this element and drop it here. And you will get a section like this, Now to change this icon Just click here And you will get different icons which you can add Now here. search for the icon you want I’m going to search for ‘car’ and you will get these icons select the one you want and then click insert.

Now as you can see our icon has been changed. Now to change this text Just select it And enter your field name here. I’m going to enter ‘MAKE’ Now to display the detail, which we entered in the make field click here, then scroll down and select ‘pods field. Now to display the field detail Click this symbol Now click here.

And you will find all the custom fields which you have added select the field you want. here as we’re adding the ‘make’ field, let’s select that as you can see, we have got the detail which we entered in the make field. Now to make This field look better. Click here to change the icon position, and then change the heading.

to ‘h6’. This is how you can add custom details to your page Let’s add another field. Now instead of creating a new section, we can duplicate this one and edit that. So just right-click on the section and click ‘copy’ Now go here and click ‘paste’ And as you can see, we have got the same section here, Now to change the icon as we did before.

Let’s click here and then choose the icon you want. And then change the title from here Now to get the field, detail click this symbol, then click here, select the field you want. And it will be added here. Now if you click here and click ‘duplicate’ The same section will be created here. You can use the same steps to add the other fields to your post.

Now to add the image gallery of your post like this click here. Search for gallery and then drag and drop it here Now to get the images which you have uploaded here. Just click here and select pods gallery field. Now click this symbol, then click here and select ‘Gallery’ You can see that we have got all the images which we added to this post.

Once you’re done adding all the custom fields to publish this page on your site, click publish, and here you need to choose where you want to display this page. Let’s click ‘add condition. Now click here. And choose ‘pre-owned cars’ then click save. Now if we go back to this tab and click ‘refresh’ you can see that we have got a new design for our listing.

So now if you add another item to on the list this design will be automatically be applied to it. Now Let’s try to add a new item. So let’s go to our dashboard now go to ‘preowned cars’ and click ‘add new like we did before. Let’s give a title here and then add a description Now click here and drag the image you want drop it here.

Next let’s fill up these details Once you’re done adding all these details let’s click publish. Now if you click ‘preview’ can see that we have got the new page on the same design Now If we go to our website, you can see that we do not have the listing, which we created. this is how you can create a design and add the custom details on the listing page Next, let’s see how you can create a new page and list all your cars like this.

So to create it first, let’s go back to our dashboard. now go to ‘pods admin’ Now go here, click edit And then click advanced options. Now enable archive page and click save. Now to create a page, let’s go to templates And click add new now click here and select ‘archive’. Here give a name for your page, and click ‘create template’.

Now you will find different designs, which you can use to create your page, select the one you want. I’m going to select this one. So let’s click insert and it will take you to this page. Now to Add all the lists which you created on this page, click here and select ‘preview settings’ Now click here, and select pre-owned cars archive’ then click apply and you can see that we have now got the lists of cars here.

Now to remove this text from the title, just click here, Now then click this symbol, And then disable this option and the text will be removed. Now if you want to edit this section Just click here and you can edit the contents from here. Now to publish this page, click publish. Now click ‘add condition’ Then click here, and select pre-owned cars archive and click save.

Now if we click preview, you can see that we have our new page, and our custom posts will be displayed. here. So now we have successfully created a page for our listing next Let’s see how we can add this page to our menu. So to do that, let’s go to customize and click menus, Now click primary menu here you can see all the menu items which we have on our site Now to add the page to our menu, click add items.

As you can see, we have the post type we created, which is pre-owned cars’ So let’s click on it and you, will find the archive page here let’s select that. as you can see, our page has been added to the menu. Now if you want to rename this page click here. And change it from here. Now to Publish this page.

let’s click publish. Now If we go to our site and click ‘refresh’ you can see that we now have our page in the menu. So let’s open it. you can see we have our new page here. So this is how you can create a page for your custom posts and add it to your menu. That’s it, guys. Now, you know how you can create a listing page on your WordPress website, Now if you’re ready to make a list using custom post type just click here to get the elementor pro plugin and start creating a design for your lisiting page.