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

Auth Does NOT Have To Be Hard [Video]

One of the scariest things to work on is auth and permissions. If you mess one thing up you code destroy your entire company, leak user data, or cost your company millions of dollars, but auth doesn’t have to be scary. In this video I talk about how auth works at a high level, go over examples of working auth, and finally show you how to implement the features talked about in this video in a real server. 📚 Materials/References: Password Authentication Video: PassportJS Authentication Video: HTTP Status Codes Video: JWT Explanation Video: JWT Implementation Video: 🌎 Find Me Here: My Blog: My Courses: Patreon: Twitter: Discord: GitHub: CodePen: ⏱️ Timestamps: 00:00 - Introduction 00:38 - Authentication vs Authorization 01:59 - How Authentication Works 03:57 - How Authorization Works 04:52 - Server vs Client Validation 06:45 - Live Example 09:13 - Code Example #Auth #WDS #Authentication

Website Design

Can You Name All 3 Test Types? [Video]

Why I Love End To End Tests: 🌎 Find Me Here: My Blog: My Courses: Patreon: Twitter: Discord: GitHub: CodePen: #Shorts