How to create a directory site with WordPress

Toolset lets you build custom directory and classifieds sites with WordPress. You have full control over everything in the site, without being limited to what a theme offers.

You can find directory sites for ads, houses, cars, recipes, courses, tours, and much more. In fact, any site that lists things and offers visitors to search is a directory.

Toolset lets you build directory sites for anything. You can start from scratch (and follow the instructions here) or use one of our reference sites as a starting point.

Key features of reference sites (that you can build with Toolset)

  • Display any kind of data, with its fields and taxonomy
  • Build powerful searches that allow visitors to find exactly what they need
  • Build detailed navigation to browse in categories
  • Display listings as tables, grids, sliders or on Google Maps
  • Create forms for front-end user registration and front-end listing submissions
  • Create user accounts, where site members can manage their own items
  • Charge payments (if you need) for registration and for submitting listings

With Toolset, you can build even the most complex directory sites without writing PHP.

Building a directory site from scratch

You can use any theme that you prefer. We recommend using simple themes, because you’re going to create much of the functionality with Toolset.

We’re going to use almost all Toolset components in directory sites. This includes Types, Views, CRED, Access and Layouts. We can also use WooCommerce if we want to charge money for registering or adding items to the 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

Adding new post type
Adding new post type

  1. Go to Toolset->Dashboard.
  2. Create a new Post Type for Ads.
    1. Use the post title to store the title of your ads.
    2. Use the editor to store your ad body.

Adding group of custom fields
Adding group of custom fields

  1. Return to the Toolset Dashboard. Now, add fields for that type.
  2. Click Create field group.
  3. Use the Add New Field button to add the following fields:
    1. Price (as Number)
    2. Ad Image (as Image)
    3. Contact email (as Email)
    4. Phone number (as Phone)

Adding custom taxonomies
Adding custom taxonomies

  1. Return to the Toolset Dashboard.
  2. Use the Create taxonomy button to add the “Ad category” taxonomy.You will use this to categorize your ads.

Ad categories - WordPress back-end
Ad categories – WordPress back-end

Now, when your taxonomy is ready, add the categories of your ads (terms).

  1. Go to Ads -> Ad categories.
  2. Add the following categories:
    • Books
    • Electronic devices
    • Miscellaneous

Example ads - WordPress back-end
Example ads – WordPress back-end

  1. 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

Example Page with Ad details built with Toolset plugins
Example Page with Ad details built with Toolset plugins
Create a Template Layout for the custom post type that you set up.

Your template will display custom fields that belong to your post type.

Learn in:

Toolset training course, part 1: Creating templates for displaying post types

8 most recent ads in a grid

Page displaying 8 most recent ads in a grid
Page displaying 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.

Learn in:

Toolset training course, part 3: Adding lists of content

Random featured ads in a slider

Page displaying random featured ads in a slider
Page displaying 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.

Learn in:

Toolset training course, part 5: Sliders

Custom search for ads

Custom search for ads
Custom search for ads
Create a Custom Search View.

Use custom fields and categories as filters.

Learn in:

Toolset training course, part 7: Custom Search

Category Tree

Category Tree built with Toolset plugins
Category Tree built with Toolset plugins
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.

See details:

Taxonomy View with a Taxonomy View for a Child

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

Form for submitting new ads
Form for submitting new ads
Create a Post Form for front-end content submission. Set relevant access privileges.

Learn in:

CRED training course, part 1: Building Forms for Content Submission

CRED training course, part 2: Customizing the Form Content

Forms for editing ads

Form for editing ads
Form 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.

CRED training course, part 5: Building forms for content editing

CRED training course, part 9: Listing items that belong to the logged-in user

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

User registration

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

Front-end form built with the CRED plugin for creating new user accounts
Front-end form built with the CRED plugin 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.

Learn in:

CRED Training Course, part 6: Building forms for creating user accounts

Front-end forms for editing user profiles

Front-end form built with the CRED plugin for editing user profiles
Front-end form built with the CRED plugin for editing user profiles
Create a User Form for editing user profiles.

Learn in:

CRED training course, part 8: Building forms 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

Toolset allows you to display your custom login form.
Toolset allows you to display your custom login form.
To allow users to log into your site, create a custom login form that fits the overall look of your site.

Learn in:

CRED Training Course, part 7: Building the “My account” page with a login form

Toolset allows you to create a custom “My account” page displaying the assets of the logged-in user.
Toolset allows you to create a custom “My account” page displaying the assets of the logged-in user.
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.

Learn in:

CRED Training Course, part 7: Building the “My account” page with a login form

Part 5: Charging fees for content submissions or membership

Often, directory site owners would like to make profits from the site.

Examples:

  1. 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.
  2. 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:

Questions?

Agnes Bury, tutorial author
Agnes Bury, tutorial author

I look forward to hearing your feedback. If you are not a Toolset customer yet, feel free to send me your questions using the presales questions form. I’ll be happy to answer. If you’re already a Toolset client and you need help, use the technical support forum.