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

ChatGPT Inside VSCode. Your new coding partner [Video] 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off! 👈 My upcoming "Advanced Frontends" Course-- Today, we're going to install a ChatGPT VSCode extension and use it to help us write HTML, CSS and JavaScript. We'll even get it to help us create a very small cryptocurrency app. 0:00 - Intro0:27 - Installing the Extension1:14 - Project Overview1:49 - Prompt 1 - Importing a font2:58 - Prompt 2 - Fix alignment issue3:55 - Prompt 3 - Delete and animate list items5:38 - Prompt 4 - Get cryptocurrency prices8:02 - Final ResultLet's get started!#chatgpt #vscode #ai - - - - - - - - - - - - - - - - - - - - - -Subscribe for NEW VIDEOS!Learn UI/UX: https://designcourse.comMy personal FB account: FB:'s Twitter: 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 to my discord server or add me on social media and say Hi!

Website Design

Live Webflow Build: Nike E-Commerce [Video]

Join us for this fun livestream where we'll use Webflow's new Figma Plugin & build Nike's E-commerce shop. Clone the Figma project here: Join The Webflow Masterclass: 29% OFF all Flux courses & bundles until Friday for our Spring Sale:

Website Design

Psd to Html part #1 | html and css | HTML | CSS | js | responsive web design | Designer Rina [Video]

Psd to Html part #1 | html and css | HTML | CSS | js | responsive web design | Designer RinaWebsite architecture incorporates various abilities and disciplines in the creation and upkeep of sites. The various spaces of website architecture incorporate web visual depiction; UI configuration; writing, including normalized code and restrictive programming; client experience plan; and site improvement.#designerrina#psdtohtml#webdesign#webdevelopment#web#development#design#howto#html#css#javascript#js#htmlandcss