Among the various types of online advertising, classified advertisement is probably the earliest-developed type that still exists. Over the years, the classified websites have improved its interface and features, but they are still based on the basic features which are:

  • Allows users (sellers) to register an account, post a product or service with detail information;
  • Allows the audience (buyers) to search and view the products.

One of the most reputed websites in classified advertising is Ebay.com. I'm going to show you how to create a classified ads website in WordPress using Meta Box which follows Ebay’s model.

Create a classified ads website in WordPress using Meta Box which follows Ebay’s model.
A product page on Ebay.com

Before Get Started to Create a Classified Ads Website

In short, I will do with the key points below:

  1. Use Meta Box to create custom fields that allow users to input data from the frontend;
  2. Use a Page Builder to create the layout in the frontend;
  3. Automatically get data from the custom fields and show them on the product page.

And, we need the following tools:

1 . Meta Box plugin and its extensions including:

2 . Elementor Page Builder (Pro version): this plugin allows you to create a website by dragging and dropping elements to the wanted position, customizing them to get the best looking without coding. Instead of Elementor, you also can use Beaver Builder (Pro version) in the same way.

Create the Listing Submission Page to Create a Classified Ads Website

We normally log in to the admin area in WordPress and input data of product information in the backend. However, users cannot access the admin page on a classified ads website. So, we must create a page for them to add product details which they want to sell. I call this page is “listing submission page” temporarily.

We’ll create custom fields for product details as in the last post of creating a product page in WordPress, but show those fields in the frontend.

Step 1: Create Custom Fields to Input Product Details

In this step, we create all the fields we need for product details in a field group.

In the admin dashboard, go to Meta Box menu > Custom Fields > Add New.

Set the Title and ID for the field group, and then, click Add Fields. You will see a list of available field types (up to 40 fields) so just choose the ones you need.

Create custom fields with UI on the backend

I am going to create 10 custom fields for 10 types of product information on Ebay.com as the followings:

  1. Category
  2. Condition
  3. Product images
  4. Description
  5. Brand
  6. Quantity
  7. Payment
  8. Shipping
  9. Dimension
  10. Price
  • Create a field for “Category”

Product categories in classified ads websites usually are the post categories. E.g:

Create a custom field for “Category”
Product categories

So, I will create a field for “Category” in a type of Taxonomy Advanced.

In the setting of this field, choose “Category” in the Taxonomy box and “Select Tree” in the Field type box. These things make all the items and sub-items in the taxonomy named Category display in a hierarchy listing, and allow sellers to choose one of the items.

Set the custom field for “Category” in the type of Taxonomy Advanced

  • Create a field for “Condition”

Condition of a product might be new, like new, used, … for the physical products such as laptop, mobile, clothes, toys, and so on.

I chose the Select type for this field in order to allow sellers to choose one of the provided conditions. In the field settings, I put the name of conditions into the Choices box.

Create a custom field for “Condition”

Services and other non-physical products absolutely have no condition. As a result, I set this field to be hidden when the product is set in the services categories.

From the field settings area, move to the Advanced tab, choose “Hidden when All” and set “Category In 1” (1 is the ID of the wanted category) in the Conditional Logic section.

Choose “Hidden when All” and set “Category In 1” for custom field of condition

Pay attention that the conditional logic settings are available only when you installed the Meta Box Conditional Logic extension.

  • Create a field for “Payment”

As the same with the field of “Condition”, I chose the Select type for this field and put all the payment methods’ names into the Choices box.

  • Create a field for “Shipping”

This field is Select as well and the options in the Choices box are the shipping methods. A seller sometimes has more than one shipping method, so you may want to check the Allow to select multiple choices box.

Create a field for “Payment”

  • Create fields for “Dimension”

Every physical product usually has 3 dimensions which are width, height, length. So, I will create 3 fields in a type of Number for these ones. At the same time, I set the Conditional Logic section to be the same with the “Condition” field to not display with non-physical products.

Create custom fields for “Dimension”

If you possess the Meta Box Group extension, you can use it to group these 3 fields for neatness.

  • Create fields for “Price”

You should create two fields for the prices, one for the original price, and one for the promotion price. Both of them are number fields.

  • Create fields for “Product images”, “Description”, “Brand”, and “Quantity”

These fields are ordinary so just create them in the right field types:

  • Image: choose Image Advanced
  • Description: choose WYSIWYG
  • Brand: choose Text
  • Quantity: choose Number

After creating the wanted custom fields, you may drag and drop them to rearrange their position. And, remember to save the settings.

Step 2: Create a Blank Page

In the admin dashboard, go to the Pages menu > Add New.

Name the page, set its permanent link, etc. and press Publish.

Create a Blank Page
Create a blank page

This page will be used as the listing submission page.

Step 3: Show the Custom Fields on the Listing Submission Page

Each field group created by Meta Box has a correspondent shortcode which is generated automatically. We will use this shortcode in this step.

In the admin dashboard, go to the Meta Box menu > Custom Fields. You will see a list of field groups created by Meta Box and their shortcodes. Copy the shortcode of the field group you want, then paste it into the content of the listing submission page.

Add shortcode into the content of the listing submission page to show custom fields in frontend
Add shortcode into the content of the listing submission page

Remarks:

  • In the first step, I said that you should include all the custom fields into a field group. Actually, you can separate them into different field groups. But, make sure that you paste all the shortcodes of their field groups to the listing submission page.
  • On Ebay.com, I don’t see the introduction as a long post on the product page. It means that there is no need to use Content Editor section of WordPress. So, I hide it by deleting the field post_fields of the shortcode.
[mb_frontend_form id='product-details' post_fields='title, content']

becomes

[mb_frontend_form id='product-details' post_fields='title’]

If your website has it, don’t take this action.
Then, save the page and go to the page in the frontend. Your fields will display as a kind of this:

The listing submission page after the establishment
The listing submission page after the establishment

Now, the seller can go to this page and input their product details without login to the admin area.

Create the Product Page in the Frontend to Create a Classified Ads Website

It is possible to create this page manually as the instruction in the last post about creating a product page. But, you would better use a Page Builder (Elementor in this case) to build this page. It helps you to execute without touching any line of code.

Step 1: Create a Template for Product Page

In the admin dashboard, go to the Templates menu > Add New. A new popup will appear.

Create a Template for Product Page
Create a template for the product page

Choose “Single” in the Select the type of template you want to work on box and “Post” in the Select Post Type box. Then, name this template and press Create Template.

Step 2: Set a Preview for the Product Page

Currently, the product page is blank. We should create a preview for it with details from a specific product.

In the edit page screen of Elementor, click on the gear button (means Settings) at the bottom left corner. Go to the Preview Settings tab and choose one product to show on the preview.

Set a Preview for the Product Page to create a Classified Ads Website
Create a preview for the product page

Step 3: Show All the Product Details

Product details were input by the seller on the listing submission page via custom fields created by Meta Box. We are going to call the value of all those fields and display them on the product page.

Way to get the fields’ values is the same so that I will do an example with the Condition field.

Firstly, create a new widget on the product page. In its Edit heading section, choose Dynamic > Meta Box Field in the Title section.

Show All the Product Details in the product page

Secondly, in the Settings tab of the Title section, go to Field and choose the name of the field which you want to get its value. Here I chose “Condition”.

choose the name of the custom field which you want to get its value

Finally, in the Advanced tab, set the prefix, suffix, and the showed value when the field is blank.

If your field is a number as the “Width” field, its value will be a number and show on the page with that number only. Provided that its value is 85. So, we may set this Advanced tab like this:

  • Before: set it is “Width:”
  • After: set it is “cm”
  • Fallback: set it is “Width: -- cm”

After that, the field’s value will display as Width: 85cm. In the event the field is blank, its value will be shown as: Width: -- cm.

Do the same with the other fields and rearrange them to get the best layout. This is my product page after finishing:

The product page of my classified ads website
The product page of my classified ads website

To Wrap Things Up

As you can see, create a classified advertising website is pretty easy with the combination of Meta Box and Elementor. Even when you are a layman, you can do it without any obstacle. You can also try styling custom fields to have a better look for your site.

However, this is an example to show how to create a classified advertising website in WordPress. So, I did some principle actions to build the frame of the website, and skip the trivial things. If you want to embellish your website, please dig in the Elementor plugin.

Hope this post will help you to save your time and effort to develop a classified ads website, even an e-commerce website and get more users to go shopping on your site. Enjoy it!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

Leave a Reply

Your email address will not be published. Required fields are marked *