How to Create a Web Directory in WordPress (Step by Step)


Do you want to create a web directory in WordPress?

Web directories allow you to make money from content that’s submitted by the people who visit your website.

In this article, we will show you how you can create a web directory in WordPress, and even how to accept payments for posting premium web listings.

How to Create a Web Directory in WordPress (Step by Step) 264

Why Create a Web Directory in WordPress?

A web directory is like a catalog that lists businesses or individuals.

You can find information such as their location, business email address, and the services they offer.

An example web directory
How to Create a Web Directory in WordPress (Step by Step) 265

Yellow Pages, Angi, and Yelp are all examples of popular web directories that help people find a place or service.

To help visitors find what they’re looking for, these popular directories often divide their content using topics, categories and tags, interests, and other characteristics, as you can see in the following image.

The Yelp business directory
How to Create a Web Directory in WordPress (Step by Step) 266

Web directories are a popular online business idea and a great way to make money online from user-generated content.

Often, you’ll find tutorials that show you how to create a directory using a web directory theme. However, this locks you into the theme forever. Instead, we recommend installing a web directory plugin that you can use with any WordPress theme you want.

With that in mind, let’s take a look at how to create a web directory in WordPress. Simply use the quick links below to jump straight to the method you want to use.

Method 1: Create a Directory Using Business Directory Plugin

This method is easiest and is recommended for most users. We will be using the Business Directory plugin. This WordPress directory plugin has everything you need to create a simple business directory.

There’s also a free version of Business Directory plugin available, but you will need to upgrade to access the more advanced features.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

After activating the plugin, go to Directories » Settings. You will now see a popup asking your permission to create a new page.

The Business Directory plugin needs this page to work properly, so go ahead and click on ‘Create required pages for me.’

Creating a web directory using a plugin
How to Create a Web Directory in WordPress (Step by Step) 267

The plugin will now create a new paged called ‘Business Directory.’

By default, this page has all the controls visitors need to look through your different listings, and submit their own listings.

The Business Directory WordPress plugin
How to Create a Web Directory in WordPress (Step by Step) 268

To start, it’s a good idea to check the plugin’s settings by going to Directory » Settings.

Here, you’ll find different sections:

  • Listings
  • Email
  • Payment
  • Appearance.

We recommend selecting each tab and then looking through the settings, to see whether you need to make any changes.

For example, in ‘Listings’ you can change how many listings the plugin shows on each page.

The Business Directory settings page
How to Create a Web Directory in WordPress (Step by Step) 269

When you’re finished, don’t forget to click on ‘Save Changes’ to store your settings.

Business Directory has a standard form that it shows to visitors. You can customize that form by going to Directory » Directory Content.

In the left-hand menu, click on ‘Form Fields.’

Changing the fields in your online directory form
How to Create a Web Directory in WordPress (Step by Step) 270

This screen shows all the fields that make up the standard form.

To change where a field appears in your form, simply click on the little up and down arrows in the ‘Order’ column.

Changing the order of the fields in your form
How to Create a Web Directory in WordPress (Step by Step) 271

To remove a field, hover your mouse over it and then click on the ‘Delete’ link when it appears.

Finally, if you want to make some changes to a particular field then hover your mouse over it and then click on the ‘Edit’ link.

Editing the form fields in WordPress
How to Create a Web Directory in WordPress (Step by Step) 272

This opens a page where you can change the field label, mark the field as mandatory, add an optional description, and more.

When you’re finished, don’t forget to click on the ‘Update Field’ button to save your changes.

How to customize the form fields
How to Create a Web Directory in WordPress (Step by Step) 273

Next, it’s a good idea to create some categories that people can use when submitting their listings. These categories will also help visitors browse your directory and find what they’re looking for.

By default, this plugin has a single ‘General’ category, but you can add more by clicking on the ‘Categories’ tab. Then, go ahead and select ‘Add New Category.’

Adding new categories to your online directory
How to Create a Web Directory in WordPress (Step by Step) 274

In the popup that appears, type in a name for the category.

You can also organize your categories into child-parent relationships, similar to child pages in WordPress. To turn a category into a subcategory, just open the ‘Parent Category’ dropdown and choose a parent.

Organizing the directory categories
How to Create a Web Directory in WordPress (Step by Step) 275

To create the category, go ahead and click on ‘Add New Category.’

You can add more categories to your business directory, by repeating the same process described above.

Now, visitors can create a new listing by heading over to your Business Directory page and clicking on the ‘Add Listing’ button.

Adding listings to your WordPress website
How to Create a Web Directory in WordPress (Step by Step) 276

This takes them to a screen where they can type in all the information for the listing.

Then, they simply need to click on the ‘Complete Listing’ button at the bottom of the page to submit their listing.

Submitting listings to an online directory
How to Create a Web Directory in WordPress (Step by Step) 277

Every time a visitors submits a listing in this way, you’ll need to manually approve it. To do this, head over to Directory » Directory Content in your WordPress dashboard.

You will now see a list of pending listings.

Approving visitor submissions
How to Create a Web Directory in WordPress (Step by Step) 278

To take a closer look at a listing, simply hover your mouse over it and then click on the ‘Preview’ link when it appears.

This will open the listing in a new tab.

How to approve user-submitted content
How to Create a Web Directory in WordPress (Step by Step) 279

To make any changes to the listing, once again hover your mouse over the listing but this time click on ‘Edit.’

You can now make any changes you want. When you’re happy with how it looks, click on the ‘Publish’ button.

How to publish a business listing
How to Create a Web Directory in WordPress (Step by Step) 280

As a WordPress admin, you can also create listings in the dashboard. For example, you might want to create listings for your partners, so they don’t have to do the work themselves.

To create a listing, go to Directory » Directory Content and then click on ‘Add New Listing.’

Adding listings to an online directory
How to Create a Web Directory in WordPress (Step by Step) 281

This opens a screen where you can type in all the information.

When you’ve finished, click on ‘Publish’ to make the listing live.

How to publish listings to your WordPress website
How to Create a Web Directory in WordPress (Step by Step) 282

Accepting Payments for Directory Listings

The Business Directory plugin allows you to accept payments for publishing a listing. By default, the plugin only supports the Authorize.net payment gateway, but you can add other gateways like PayPal, Stripe, Payfast, as part of their Pro version.

To set up Authorize.net, go to Directory » Settings, and then click on the ‘Payment’ tab.

Adding a payment gateway to your WordPress website
How to Create a Web Directory in WordPress (Step by Step) 283

You can then go ahead and select ‘Authorize.net.’ Here, click on the ‘Enable Authorize.net’ switch so that it turns active.

This adds some new settings where you can type in the login ID and transaction key for your Authorize.net account.

How to enable the Authorize payment gateway
How to Create a Web Directory in WordPress (Step by Step) 284

Once you’ve done that, click on the ‘General Settings’ tab.

If you’re not ready to start accepting payments yet, then make sure to enable ‘Put payment gateways in test mode?’

Testing your payment gateway
How to Create a Web Directory in WordPress (Step by Step) 285

By default, the plugin accepts payments in dollars, but you can select a different currency using the ‘Currency’ dropdown.

You can also type in a different thank you message, which will be shown to users when they send you a payment.

When you’ve finished configuring the payment settings, don’t forget to click on ‘Save Changes’ to store your settings.

Before you can accept payments, you’ll also need to create at least one payment plan. To start, click on ‘Plans’ in the left-hand menu.

How to monetize your business directory
How to Create a Web Directory in WordPress (Step by Step) 286

The plugin comes with a free plan and a default plan, which is $1.00 for 365 days.

To change either of the plans, simply hover over it and then click on the ‘Edit’ link.

Adding plans to your web directory
How to Create a Web Directory in WordPress (Step by Step) 287

This takes you to a screen where you can make all kinds of changes to the plan.

This includes changing the price, or even creating different prices for specific categories.

How to edit your business directory
How to Create a Web Directory in WordPress (Step by Step) 288

When you’re happy with the changes you’ve made, don’t forget to click on the ‘Save Changes’ button to make your plan live.

Method 2: Creating a WordPress Directory with Formidable Forms

The second method to create a business directory is by using Formidable Forms.

It is the most advanced WordPress form builder plugin in the market and helps you to create lots of different forms including surveys, payment forms, booking forms, and more.

Formidable Forms also comes with a powerful ‘Visual Views’ feature that you can use to display user-submitted data on your website. Using this feature, you can easily create directories, real estate listings, job boards, event calendars, and more.

With that in mind, let’s create a business directory using the Formidable Forms plugin.

1. Create a Form to Collect Data for Your Directory

First thing you need to do is install and activate the Formidable Forms plugin. For detailed instructions, see our guide on how to install a WordPress plugin.

Upon activation, you’ll need to install Formidable Forms Lite. This free plugin provides the core foundation for the premium plugin’s more advanced features.

Once you’ve done that, go to the Formidable Forms » Global Settings page and select ‘Click to enter a license key manually.’

Enter Formidable Forms license key
How to Create a Web Directory in WordPress (Step by Step) 289

You can find the license key under your account on the Formidable Forms website.

After entering this information, go ahead and click the ‘Save License’ button.

Many website owners charge visitors to submit a listing. If you want to create a premium web directory and accept credit card payments, then you’ll need to install an addon and set up a payment gateway.

Formidable Forms can collect payments with PayPal, Stripe, or Authorize.net.

In this guide, we will show you how to accept payments using PayPal, but the steps will be similar for other payment gateways.

In your WordPress dashboard, go to Formidable » Add-Ons. In the ‘PayPal Standard’ section, click on ‘Install.’

The PayPal addon for Formidable Forms
How to Create a Web Directory in WordPress (Step by Step) 290

Later in this guide we’ll use ‘Visual Views’ to display all the information that visitors enter into our form.

With that in mind, find the ‘Visual Views’ addon and click on its ‘Install’ button, as we’ll need this addon later.

Installing the Visual Views addon
How to Create a Web Directory in WordPress (Step by Step) 291

Once you’ve done that, head over to Formidable » Global Settings.

Then, select ‘PayPal’ in the left-hand menu.

Setting up PayPal for your web directory
How to Create a Web Directory in WordPress (Step by Step) 292

On this screen, type in the email address that’s linked to your PayPal account. You can also change the currency and the URLs that will load after a visitor completes their payment or cancels their order.

After entering this information, click on the ‘Update’ button to save your changes.

How to build a web directory with WordPress
How to Create a Web Directory in WordPress (Step by Step) 293

Now you’re ready to create a form by heading over to the Formidable » Forms page.

Here, click on ‘Add New.’

Adding a new form to your WordPress website
How to Create a Web Directory in WordPress (Step by Step) 294

This will bring up a list of all the form templates that you can use.

In this guide, we’ll be creating a real estate directory so click on the ‘Real Estate’ category.

The real estate listing template
How to Create a Web Directory in WordPress (Step by Step) 295

You can now see all of the different templates within this category, including multiple mortgage calculator templates.

To preview a template, just hover your mouse over it and then click the little icon that looks like an eye.

Previewing a form template
How to Create a Web Directory in WordPress (Step by Step) 296

To use a template, just hover over it and then click on the ‘+’ icon.

One you’ve done that, type a title into the ‘Form Name’ field and enter an optional description. This information is just for your reference so you can use anything you want.

Then, click on the ‘Create’ button.

Creating a WordPress form
How to Create a Web Directory in WordPress (Step by Step) 297

This will open the template in the Formidable Forms editor.

From here, you can simply point and click to customize any field in the form. For example, you might click on the ‘Brief Blurb’ field and then type some new text into ‘Field Label.’

Customizing your web directory in WordPress
How to Create a Web Directory in WordPress (Step by Step) 298

You can also add more fields by selecting ‘Add Fields’ in the left-hand menu.

Then, drag any of the fields onto the form layout. For example, you may want to add a field where the visitor can type in their name.

Adding fields to a WordPress form
How to Create a Web Directory in WordPress (Step by Step) 299

To continue customizing the template, simply repeat these steps.

When you’re happy with how the form is set up, click the ‘Update’ button at the top right corner of the screen.

If you want to collect payments, then you’ll need to add an action to your form. To do this, click on the ‘Settings’ tab and then select ‘Actions & Notifications.’

After that, click on ‘PayPal’ to add the action to your form.

Adding actions to the web directory form
How to Create a Web Directory in WordPress (Step by Step) 300

Next, scroll to the ‘PayPal’ section.

We want to charge visitors a flat fee for creating a new listing, so click on ‘Set Amount.’

Adding a payment method to your web directory
How to Create a Web Directory in WordPress (Step by Step) 301

You can now type in how much you want to charge.

You can also choose whether to make this a one-off payment, a donation, or a recurring payment using the ‘Payment Type’ dropdown.

How to create a premium web directory
How to Create a Web Directory in WordPress (Step by Step) 302

If you select ‘Subscription’ then you can use the controls to specify how often the person will be charged.

In this way, you can earn money from your listings over the long-term. You can also offer customers a free trial.

Add recurring revenue payments to a web directory form
How to Create a Web Directory in WordPress (Step by Step) 303

Once you’ve finished configuring PayPal, don’t forget to click on ‘Update’ to save your changes. Now, visitors will need to make a payment before they can submit the form.

2. Publish Your Form in WordPress

When you’re happy with your form, it’s time to publish it on your website by adding it to any post or page.

We’re going to add the form to a new page by heading over to Pages » Add New in the WordPress dashboard. You can now give this page a name, upload a featured image, and add any other content that you want to show on the page.

After that, click on the ‘+’ icon and type in ‘Formidable Forms.’

The Formidable Forms WordPress block
How to Create a Web Directory in WordPress (Step by Step) 304

When the right block appears, give it a click to add it to the page.

Next, simply open the ‘Select a form’ dropdown and choose the real estate listing form.

Adding a form to your website using the WordPress block editor
How to Create a Web Directory in WordPress (Step by Step) 305

Formidable Forms will then add the form to the post, and show a preview in the block editor.

When you’re ready to make the form live, go ahead and publish the page.

After that, it’s a good idea to add the page to your WordPress navigation menu so people can find it easily. You may also want to send a message to your email list so your audience know they can now submit listings to your website.

3. Build Your Web Directory with Formidable Views

Next, you’ll want to create a web directory so the user-submitted content appears on your WordPress website.

You can do this using the Visual Views feature, so head over to Formidable » Views and then click on ‘Add New.’

How to create a business directory in WordPress
How to Create a Web Directory in WordPress (Step by Step) 306

A popup will now show the different layouts that you can use for your directory.

Just click on ‘Classic’ as this allows you to create a new layout from scratch.

The Formidable Visual Views addon
How to Create a Web Directory in WordPress (Step by Step) 307

On the next screen, open the ‘Use Entries from Form’ dropdown and choose the real estate form we created earlier.

Formidable Forms will give your view a name based on the form you’re using as the data source. However, you can change this if you want.

Choosing a data source
How to Create a Web Directory in WordPress (Step by Step) 308

When you’re happy with the information you’ve entered, click on ‘Create a view.’

You can now type in any information that you want to appear above and below the listings. For example, you may want to add your contact information at the bottom of the page or type out a short introduction.

To do this, simply click on ‘Add Before Content’ or ‘Add After Content.’

How to display user-submitted data on your WordPress website
How to Create a Web Directory in WordPress (Step by Step) 309

This will open a popup where you can type in any text that you want to show above or below your listings.

To the right, there are also some parameters that you can use. Formidable Forms will replace these parameters with real values on your website. For example, it will replace [siteurl] with your site’s URL.

Displaying data from user-submitted forms
How to Create a Web Directory in WordPress (Step by Step) 310

When you’re happy with the information you’ve entered, click on ‘Update View’ to save your changes and return to the main view editor screen.

Once you’ve done that, you’re ready to create the layout for the different listings on the directory page. To get started, click on the middle ‘+’ icon.

How to design a web directory page
How to Create a Web Directory in WordPress (Step by Step) 311

You can now type text into the main text editor, and select different parameters in the left-hand menu.

In the following image, we’re creating a simple layout that shows each property’s brief blurb, followed by the listing’s price and type.

Finally, we’ll show the full description.

Designing a web directory layout in WordPress
How to Create a Web Directory in WordPress (Step by Step) 312

In the following image, you can see an example of how this simple layout will look on your WordPress website.

To expand on this very simple layout, just keep adding more parameters and plain text following the same process described above.

A real estate listing created using Formidable Forms
How to Create a Web Directory in WordPress (Step by Step) 313

Chances are you’ll want to show a photo of each property. To do this, go ahead and click on the ‘Advanced’ tab of the ‘Customization’ box.

Then, click on ‘Show Image,’ which displays any images that visitors submit.

How to show a user-submitted image
How to Create a Web Directory in WordPress (Step by Step) 314

While you’re working on your layout, you can preview how it will look to visitors by clicking on ‘Update View.’

This takes you back to the main editor, which shows a preview of the layout you’re creating.

How to preview the directory listing layout
How to Create a Web Directory in WordPress (Step by Step) 315

When you’re happy with how the directory looks, you can add it to any page or post using the shortcode in the left-hand menu, under ‘View Name.’ Simply find this code and then click on its ‘Copy’ button.

For more details on how to place the shortcode, you can see our guide on how to add a shortcode in WordPress.

Once you’ve done that, simply visit the page or post to see the finished web directory.

An online web directory created using Formidable Forms
How to Create a Web Directory in WordPress (Step by Step) 316

We hope this article helped you create a web directory using WordPress. You may also want to see our expert pick of the best email marketing services for small businesses, and see our ultimate WordPress SEO guide to improve your rankings.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Web Directory in WordPress (Step by Step) first appeared on WPBeginner.



Source