Up next in 10
How To Create Listing Pages on Your Website (Using Custom Post Types)
9K views
Sep 24, 2023
In this informative video tutorial, you'll discover how to take your website to the next level by creating custom listing pages using custom post types. Whether you're building a directory, a real estate website, or any platform that requires organized listings, this guide will walk you through the process step-by-step. Learn how to leverage custom post types to categorize, display, and manage your listings efficiently, providing a seamless user experience for your website visitors. By the end of this tutorial, you'll have the knowledge and tools to transform your website into a powerful resource for organized content presentation. Watch now and start creating impressive listing pages on your website!
View Video Transcript
0:00
Hi guys, today we are going to see how you can create a listings page on your WordPress website
0:05
Let's say you have a website, And you want to list your items like this on your site
0:10
You can do that by watching this video. So after watching this video, You will be able to create a page like this
0:15
Where you can list a set of items. Now if a user clicks on that item
0:22
They can get all the details about the item, like this. This is very useful for listing out items on your site
0:29
like real estate, recipes, used automobiles, or anything you want. Now in order to create this page
0:37
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
0:48
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
0:58
Now when we fill up these details and publish the page, we will get a brand new page on our site, like this
1:04
with all the details that we entered here. So by creating pages in this way
1:10
you don't have to design a page from scratch for each item that you want to add to your site
1:14
Instead, you can simply fill up these fields, and the page is built automatically with the design that you choose
1:20
So in this way, you can save a lot of time creating content for your site
1:24
In this video, we will also see how you can customize the page in any way you want
1:30
just by using brag and drop. Okay, so let's get started. This is Brian from Website Learners
1:36
First, let's see the website for which we are going to create our listing. Here it is
1:42
Now to create a listings page like this, we are going to do two parts
1:46
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
1:53
like this. where you can start adding your lists. So to create a custom post type
2:01
we're going to do two steps. The first step is to install a plugin in WordPress
2:07
So to install the plugin, Let's go to our WordPress dashboard. Now go to plugins
2:15
and click add new Here, search for pods And you will get this plugin
2:30
This is the plugin which is going to help us create custom post types on our site
2:35
So to install the plugin, Let's click install And click activate So now we've successfully installed the plugin
2:49
Once you have installed the plugin, We can now go to step 2, Which is to create a new post type
2:54
So to create a post type, go here and click add new
3:03
It will take you to this page Now click create new And here, enter the name for your post type
3:15
I'm going to create a list related to used cars So I'm going to enter pre-owned cars
3:21
Then enter the same name here and click next Now as you can see a new section has been created
3:32
which means we have successfully created our post type. So let's click on it
3:39
Now here you can start listing your cars. So to add your first item to the list, let's click add new
3:49
and it will take you to this page. This is the place where you can add the details of your car
3:54
Now if you scroll down, you can see that we do not have an option to upload any image
4:00
So to add the option here, Let's go to pods admin and click edit pods
4:10
Now go here, click edit and click advanced options. Now scroll down
4:24
And here you will find different items, which you can add to your post type. Now to add the image option to your post type
4:30
Let's enable featured image And then click save. Now if we go back to this tab
4:46
And click refresh You can see that we have got the featured image option here
4:55
Okay. Now let's add our first item. As my website is related to cars, I'm going to list down a few cars
5:03
So first, let's enter the title here. I'm going to enter a car's name
5:10
And here you can enter the description of the car. Now to add an image of the car, just scroll down and click set featured image
5:20
Now here, drag and drop your image And the image will be added
5:30
Once you have added all the details, click publish And it will be published on your site
5:39
So to check that, let's click here You can see that we have got our first listing
5:48
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
5:59
So to do that, we're going to create our own fields like this, on your WordPress admin area
6:08
So to create new fields, let's go back to our dashboard. Now go here
6:17
Click edit pods and it will take you to this page. Here you can see that we have the post type which we created
6:28
Now to create new fields for your post Click edit and click add field
6:40
And you will get these options. Now enter the name of the field, which you want to create
6:48
I'm going to create a field called make. Now here you can select the type of field you want
6:54
So to make this a compulsory field, Enable this option Then click save field
7:04
And a new field will be created So to save this, just click save
7:12
Now to check that, Let's go back to this tab and click refresh
7:22
Now if we scroll down You can see that We now have the field which we created
7:28
Let's go back to this tab. Now in the same way, you can add as many fields as you want
7:38
Let's say you want to add a gallery field. All you have to do is click add field
7:46
And here you need to enter the name for the field. I'm going to enter gallery
8:17
Once you have added all the fields you want, click save. Now let's go back to this tab
8:35
and click refresh. Now if you scroll down, You can see that, we have got all the custom fields, which we created
8:47
Once you have created the fields you want Next, let's add all these details of the car
8:53
Now to add images of the car, click add file Select the images you want
9:03
And then drag the images And drop them here And it will be added here
9:09
Once you have added all the details Scroll up And click update
9:16
Now if we go to this page and click refresh You can see that we do not have the details which we added to our page
9:33
So next, let's go to the part 2 of this tutorial, where we see how you can display the custom
9:38
fields on your listing page like this. So to do that, first we need to create a design for our listing and then add the custom fields
9:46
to it. We are going to do this in 3 steps. The first step is to get the elementor pro plugin
9:53
This is the plugin which will help us add the custom fields to our listing page
9:58
So to get the elementor pro plugin, just click the link below this video
10:04
And it will take you to this page. Now to get the plugin, here you will have different plans to choose from
10:11
I'm going to select this plan. And it will take you to this page
10:18
Now fill up these details And scroll down Now to get the plugin
10:24
Enter your card details And click checkout So we have successfully made the payment
10:33
And we have got the download link here. Now to download the plugin, Just click download elementor pro
10:43
And the plugin will be downloaded. Once you have downloaded the elementor pro plugin
10:49
we can go to step 2, which is to install this plugin on our site
10:54
So to install the plugin, let's go back to our wordpress dashboard, Go to plugins
11:04
and click add new then click upload plugin. Now drag this plugin
11:16
And drop it here And as you can see, our plugin has been selected
11:25
Now to install this plugin, just click install And click activate So now we have successfully installed the plugin
11:39
Now in order to use the plugin, it will ask you to connect and activate the plugin So to activate it, just click here
11:50
And then click activate Now you can see that the plugin is active
11:57
This means that we can now start using the plugin. Now let's go to step 3, which is to choose a design for your page
12:05
So to choose a design, let's go to templates And click add new
12:13
Here, you need to choose the type of template you want. I'm going to choose single post
12:26
and click create template Here you will find different designs, which you can choose for your listing page
12:37
Just select the design you want. I'm going to choose this one. Here you can see a preview of your design
12:48
Now if you like this design, click insert And you will get the design
12:56
Now to add your content to this design Just click here And click preview settings Now click here
13:11
And you will find your post type which is Pre-owned cars So let's select that
13:21
And here enter the title of the page As you can see, we have got our page here
13:31
Let's select that and click apply. Now as you can see, we have got our content here
13:43
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
13:53
So to display the custom fields here, First, let's add a heading
13:58
So let's drag this heading element And drop it here. Now select the text
14:13
And enter a title I'm going to enter card details Now to add a section like this
14:21
Click here And then drag this element And drop it here And you will get these two sections
14:38
Now let's add the first field So to do that, just search for icon box
14:49
Now drag this element and drop it here and you will get a section like this
14:59
Now to change this icon just click here and you will get different icons which you can add
15:09
now here, search for the icon you want I'm going to search for car
15:17
and you will get these icons select the one you want And then click insert
15:26
Now as you can see, our icon has been changed. Now to change this text, just select it
15:35
And enter your field name here I'm going to enter make Now to display the detail which we entered in the make field
15:43
Click here Then scroll down and select pods field Now to display the field detail here
15:58
click the symbol Now click here And you will find all the custom fields which you have added
16:10
Select the field you want. As we are adding the make field, Let's select that
16:17
As you can see, We have got the detail, which we entered in the make field
16:21
Now to make this field look better, Click here to change the icon position
16:28
And then change the heading to H6 This is how you can add the custom details to your page
16:37
Let's add another field. Now instead of creating a new section, we can duplicate this one and edit that
16:44
So just right click on the section, and click copy Now go here
16:56
and click paste And as you can see, we have got the same section here
17:04
Now to change the icon as we did before Let's click here
17:12
and then choose the icon you want and then change the title from here
17:28
Now to get the field detail, click the symbol Then click here
17:38
Select the field you want and it will be added here Now if you click here
17:44
and click duplicate The same section will be created here
17:55
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
18:04
Click here Search for gallery and then drag
18:14
and drop it here Now to get the images which you have uploaded here
18:26
Just click here and select pods gallery field Now click the symbol
18:38
then click here and select gallery You can see that we have got all the images which we have added to this page
18:51
Once you're done adding all the custom fields, to publish this page on your site, click publish
19:01
And here you need to choose where you want to display this page. Let's click add condition
19:10
Now click here and choose pre-owned cars Then click save
19:24
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 the list The design will automatically be applied to it
19:43
Now let's try to add a new item. So let's go to our dashboard
19:49
Now go to pre-owned cars and click add new. Like we did before, let's give a title here
20:00
and then add a description Now click here
20:17
and drag the image you want and drop it here Next, let's fill up these details
20:30
Once you're done adding all the details
20:43
Let's click publish. Now if you click preview, You can see that
20:54
we have got the new page on the same design. Now if we go to our website
21:00
You can see that, we do not have the listing which we created
21:07
This is how you can create a design and add the custom details to your listing page
21:12
Next, let's see how you can create a new page and list all your cars like this
21:19
So to create it, first let's go back to our dashboard. Now go to pods admin
21:30
Now go here click edit and then click advanced options Now enable archive page
21:47
and click save Now to create a page, let's go to templates
21:57
and click add new Now click here And select archive
22:09
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
22:26
Select the one you want I'm going to select this one So let's click insert
22:35
And it will take you to this page. Now to add all the lists which you created on this page
22:40
Click here And click preview settings Now click here
22:54
Select pre-owned cars archive Then click apply And you can see that we have now got the list of cars here
23:06
Now to remove this text from the title Just click here Then click the symbol
23:18
And disable this option And the text will be removed Now if you want to edit this section
23:27
Just click here And you can edit the contents from here Now to publish this page, click publish
23:41
Now click add condition Then click here Select pre-owned Karl's archive And click save
23:59
Now if we click preview You can see that we have got a new page
24:07
And our custom posts will be displayed here. So now we have successfully created a page for our listing
24:15
Next, let's see how we can add this page to our menu. So to do that, let's go to customize
24:24
And click menus Now click primary menu Here you can see all the menu items, which we have on our site
24:37
Now to add a page to our menu, click add items. As you can see, we have the post type which we created, which is pre-owned cars
24:49
So let's click on it. And you will find the archive page here
24:55
Let's select that. And as you can see, our page has been added to the menu
25:02
Now if you want to rename this page, click here and change it from here
25:14
Now to publish this page, let's click publish Now if we go to our site
25:22
And click refresh You can see that we now have our page in the menu
25:34
So let's open it You can see our posts So this is how you can create a page for your custom posts
25:44
And add it to your menu That's it guys, now you know how you can create a listing page
25:50
On your wordpress website Now if you're ready to make a list using custom post type, just click here to get the
25:55
Elementor Pro plugin and start creating a design for your listing page
25:59
And also make sure you subscribe to website learners for more videos like this one. Thanks for watching
26:03
I'll see you in the next video. Take care. Bye bye
#Business & Personal Listings
#Custom & Personalized Items
#How-To
# DIY & Expert Content
#Real Estate Listings