Website Design

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

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

𝗚𝗲𝘁 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗼𝗿 𝗽𝗿𝗼 ğ—½ğ—¹ğ˜‚ğ—´ğ—¶ğ—»âžœ

𝗖𝗵𝗲𝗰𝗸𝗼𝘂𝘁 𝗼𝘂𝗿 𝗲𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗰𝗼𝘂𝗿𝘀𝗲 ➜

𝗚𝗲𝘁 𝘁𝗵𝗲 𝗙𝗮𝘀𝘁𝗲𝘀𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ➜

𝗛𝗼𝘄 𝘁𝗼 𝗠𝗮𝗸𝗲 𝗠𝗼𝗻𝗲𝘆 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜

𝗩𝗼𝘁𝗲 𝗳𝗼𝗿 𝗼𝘂𝗿 𝗻𝗲𝘅𝘁 ğ˜ƒğ—¶ğ—±ğ—²ğ—¼âžœ

𝗣𝗼𝘀𝘁 𝗜𝘀𝘀𝘂𝗲𝘀 𝗛𝗲𝗿𝗲 ➜

Learn how you can create a listing page on your WordPress website.

Let’s say you’ve a website, and you want to list your items, and if anyone clicks on that item, they can get full detail of that item.

So let’s get started.

𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝗻𝘁𝘀 :

00:00 Intro

01:43 To Create a Custom Post Type

05:51 To Create your Own Custom Fields

09:20 To Display custom fields on your page

09:39 Download & Install Elementor Pro Plugin

11:58 Choose a Design

13:42 To Add Custom Post Field

20:56 Create New Page for Listing

=== Part 1 : To Create a Custom Post Type ===

Step 1: Install Pods Plugin

To install the plugin, go to Dashboard ► Plugins ► Add New,

Now search for ‘Pods’ and click ‘Install & Activate’.

Step 2: To Create Post Type

Go to Pods Admin ► Add new ► Create new,

Now enter post type name in singular & plural label,

And then click ‘Next step’.

Now post type section is created in WordPress admin area,

So just click on it, & start listing your items,

To add items, click ‘Add new’

(So if you don’t find option to list your item,

Go to pods admin ► Edit pods,

under post type, click ‘Edit & Advanced option’

Now under support, select option that you want on your site & click ‘Save’)

Next fill up your item details & click ‘Publish’.

How you can add more details about your item?

To create your own fields, go to pods admin ► edit pods,

Now under your post type, click edit & add field,

Enter field details then click ‘Save Field & Save Pod.

Now in the same way you can create as many field as you want.

=== Part 2 : How to can display custom fields on your page===

You need to create design for our listing first, then add custom field.

Step 1 : Download ‘Elementor pro’ Plugin

To get Elementor pro plugin, click here ➜

Now choose your plan, & make payment,

Once you purchase, click ‘Download Elementor pro’.

Step 2 : To install Elementor pro plugin

To install the plugin, go to Dashboard ► Plugins ► Add New

Then click ‘Upload plugin’,

Now add the downloaded plugin and click ‘Install & Activate’.

In order to use the plugin, click ‘connect & activate’,

And then click ‘Activate’

Step 3 : Choose a Design

To choose a design, go to ► Templates ► Add new

Choose template type, & click ‘Create Template’

Now choose your design & click ‘Insert’

Now to add content to your design,

click ‘setting symbol ► Preview settings ► Dynamic content

Now select your post type & enter page title,

and Then click ‘Apply’.

So now you’ve successfully created design for our listing page.

Now to add custom fields,

Add icon box element just by drag & drop,

Now add the icon & field name,

And now in description click ‘Dynamic tags & pods field’

Near pods field, click ‘setting symbol & keys’,

Select the field, which want to display

Like wise you can add other fields.

To publish the page, click ‘publish’.

Now click ‘add condition’ & choose, location for your page,

And click ‘Save’.

Now if you add another item to the list,

The design will be automatically applied to it.

Next, let’s see how you can create a new page and list all your items

Go to Dashboard ► Pods Admin,

Now under post type click ‘Edit & Advance option’,

Now enable Archive page & click ‘Save’,

Go to ‘Template ► Add New’ ► Choose template type as Archive,

Enter template name & click ‘Create Template’,

Now choose design for your page & click ‘Insert’,

Now click ‘settings ► Preview Settings ► Select your Post Type ► Apply,

Once done, click ‘publish’.

So now you have successfully created a page.

Now add that created page to our menu.

So that’s it, guys,

Now you know how you can create listing page.


𝗚𝗲𝘁 𝘁𝗵𝗲 𝗯𝗲𝘀𝘁 𝘁𝗼𝗼𝗹𝘀 𝗳𝗼𝗿 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜
𝗩𝗶𝗱𝗲𝗼 𝗚𝗲𝗮𝗿 𝗪𝗲 𝗨𝘀𝗲 ➜
𝗢𝘂𝗿 𝗩𝗶𝗱𝗲𝗼 𝗘𝗱𝗶𝘁𝗶𝗻𝗴 𝗧𝗼𝗼𝗹 ➜

🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:
𝗪𝗲❜𝗿𝗲 𝗛𝗶𝗿𝗶𝗻𝗴:​
Want your website developed by us? Email us your requirements to

💬 𝗙𝗼𝗹𝗹𝗼𝘄 & 𝗖𝗵𝗮𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀:

Watch/Read More
Website Design

Beautiful Landing Page with Counter up animation effect using HTML CSS JavaScript [Video]

9+ Complete Front-end Responsive Website Design Get here - ------------------------- Enroll this complete course - -------------------- Join this channel to get Source code everyday : ----------------------

Website Design

- NEW RULE!!!! Super chats are ONLY for appreciation. It will not guarantee a review/redesign. - Submit your design projects for review: #negativespace-submissions (NOTE: To combat spam, we have a new system where you must self-assign a role in #news) Join that discord link and just post ONCE your portfolio URL. I will cover the first one's first, and I can't guarantee that I will get to them all! Also, if I already reviewed yours from last week, don't bother submitting again! Also, feel free to idle in the discord server. I'm there now! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: My personal FB account: Coursetro FB: Coursetro's Twitter: Join my Discord! ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn,, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Come to my discord server or add me on social media and say Hi!