This tutorial teaches you how to build a custom directory site with WordPress and how Toolset plugins can help you.
We use a classified ads site to explain the process. The techniques we present can be successfully applied to any directory site, based on the items of your choice.
You can find directory sites for ads, houses, cars, recipes, courses, tours, and the like.
On directory sites, visitors can search items by using filters.
Users might also add items directly from the front-end and logged-in users can manage (list, edit, delete) the items they have added.
Site owners can also charge users for membership or for adding new items.
Although building a custom directory site might seem challenging, you don’t need to be an expert to create one.
Using Toolset plugins, you can build such directory sites without PHP coding.
Here’s what you need to build a custom directory site with WordPress.
You can use any theme you like.
Plugins you will need
- Toolset Types
- Toolset Views
- Toolset CRED
- Toolset Access
- Optional: WooCommerce, Toolset CRED Commerce (if you plan to charge money for submitting ads)
All the above plugins (except WooCommerce, which is a free plugin) are available in the Toolset package.
- HTML and CSS
- You need to be familiar with the following concepts:
- Custom Post Types
- Custom Fields
- Custom Taxonomies
What your site will include
There’s a lot to cover in a directory site.
The following questions (see Table 1) will help you to establish what you need for yours.
In our example answers, we used ads. Feel free to replace ads with the items of your choice. These can be houses, recipes, courses, trips, cars, etc.
Table 1: What you might need for a classified site and how Toolset helps
|Question||Example Answer||What you need to do|
|1. What kind of items will appear on the site?||Ad
||Set up the custom post types, fields, and taxonomy for the items on the site.
|2. What information will you show to visitors?||
|3. What front-end forms will you need?||
|4. How will your user register and log into your site?||
Part 1: Setting up the custom post types, fields, and taxonomy
First, we need to set up the custom post type that will appear on the directory site.
In our example, we are creating a directory site for “ads.” Of course, you can create directory sites for anything else.
Steps to follow
- Go to Toolset->Dashboard.
- Create a new Post Type for Ads.
- Use the post title to store the title of your ads.
- Use the editor to store your ad body.
- Return to the Toolset Dashboard. Now, add fields for that type.
- Click Create field group.
- Use the Add New Field button to add the following fields:
- Price (as Number)
- Ad Image (as Image)
- Contact email (as Email)
- Phone number (as Phone)
- Return to the Toolset Dashboard.
- Use the Create taxonomy button to add the “Ad category” taxonomy.You will use this to categorize your ads.
Now, when your taxonomy is ready, add the categories of your ads (terms).
- Go to Ads -> Ad categories.
- Add the following categories:
- Electronic devices
- Add a few example ads to your site.
If you need help creating custom post types, fields, or taxonomies, read the full explanation in Types documentation
Part 2: Displaying items on the front-end
Now, when your WordPress back-end is ready to store the items, it’s time to display them on the front-end.
In Table 2 below, you will find some example templates you could create for your site and learn how Toolset can help you.
Table 2: Example templates you might need for a directory site
|Template||What you need to do|
|Single Ad details||Create a Content Template for the custom post type that you set up.
Your template will display custom fields that belong to your post type.
|8 most recent ads in a grid||Create a View that lists your items.
When creating a View, you decide how your items are displayed (as a list, grid, table, etc.) and which fields to include for each item.
|Random featured ads in a slider||Create a View that lists your featured items in a slider.
Use filters based on your post field to select featured ads only.
|Custom search for ads||Create a Custom Search View.
Use custom fields and categories as filters.
|Category Tree||If you have divided your categories into subcategories, you can build a category tree.
Create two taxonomy views (one for first-level categories and one for subcategories) and include one within the other.
Part 3: Adding and editing items from the front-end
Most directory sites allow visitors to create front-end content submissions. To add and edit items from the front-end, you need to create relevant forms. Next, you need to establish who can access which forms.
Check Table 3 below to learn what front-end forms you might need and how Toolset can help you.
Table 3: Front-end forms you might need for your directory site
|What you will need||What you will need|
|Forms for submitting new ads||Create a Post Form for front-end content submission. Set relevant access privileges.
|Forms for editing ads||Create Post Forms for front-end content editing.
Establish who can edit the content. In most cases, you will allow the ad owners to edit their own ads.
You can also set an automatic expiration duration for all posts submitted through these forms.
Learn in: CRED training course, part 4: Setting automatic expiration for posts
Part 4: Handling user registration and account management
If you allow your users to edit items from the front-end, most likely you will also need front-end forms for user registration and editing profiles directly from the front-end.
Table 4.1 below summarizes what user forms you will need and how Toolset can help you.
|What you will need||What you will need|
|Front-end forms for creating new user accounts
|Create a User Form for registering users.
In your front-end form, you can also include additional custom fields.
Once created, you can add the form to any
page and custom styling.
|Front-end forms for editing user profiles||Create a User Form for editing user profiles.
Login form and account management
To allow users to log into your site, create a custom login form that fits the overall look of your site. After the user logs in, display links to the user’s resources.
The login form and user’s assets make up the “My account” page. Check Table 4.2 below to see what to cover in the account page and how Toolset helps you.
Table 4.2: Building the “My account” page with Toolset
|My account page||What you will need|
|To allow users to log into your site, create a custom login form that fits the overall look of your site.
|Once logged in, your users should manage their resources (list, edit, and delete items they create) directly from the front-end.
You can gather them in one place on the “My account” page.
Part 5: Charging fees for content submissions or membership
Often, directory site owners would like to make profits from the site.
- Users are allowed to add free ads that will expire after a pre-set duration and also long lasting ads that never expire but are paid.
- The site might offer courses. Some courses are available to everybody, while others are for premium customers only – customers who have paid for their membership.
Both cases can be handled with Toolset and the WooCommerce plugin.
Use the CRED Commerce plugin to charge fees for content submission and membership.
Check CRED documentation for details:
thank you for reading the tutorial, I really appreciate it.