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

Are you looking to create a business web directory? Web directories are a popular online business idea, allowing you to monetize your website with user-generated content.

Angie’s list, a popular web directory that helps homeowners find reliable contractors and service providers. They’re worth over 9 billion dollars.

Whether you’re looking to create a niche web directory to make money online, or a partners directory to list your vendors, you can easily do it in WordPress.

In this article, we will show how to easily create a web directory in WordPress. We will cover how to accept payments for your premium web directory listings.

What is a Web Directory?

A web directory is like a catalog that lists businesses or individuals with details such as contact information, services, features, etc.

Web directories allow users to browse through a catalog of links divided into topics, categories, and interest areas. A perfect example of a web directory is Yellow Pages or Angie’s List.

They are most commonly used to help people find a place or service they are looking for.

Another web directory example is Yelp which allows people to find great local businesses like restaurants, dentists, beauty salons, doctors, etc.

While there are several web directory themes for WordPress that allow you to create a web directory, we don’t recommend them because you will get locked into the theme forever.

This is why we will only show you plugin methods, so you can use it with any theme design that you want.

Having that said, let’s take a look at how to create a web directory in WordPress.

Method 1: Creating a WordPress Directory with Formidable Forms

Formidable Forms is the most advanced WordPress form builder plugin in the market. It helps you to create a simple contact form as well as advanced forms like surveys, payment forms, registration forms, and more for your WordPress site.

The plugin comes with an exclusive feature called ‘Views’ which lets you display any data submitted via a form on the front-end of your website. Using this feature, you can easily create directories, real estate listings, job board, event calendars, and more.

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 Formidable Forms plugin. For detailed instructions, see our guide on how to install a WordPress plugin.

Once the plugin is installed and activated, go to Formidable » Forms and click on ‘Add New’ button.

Now you can choose how you want to create a form. You can start with a blank form, with a template, or import one from an XML file.

We will choose the template method because it is the quickest way to make an advanced form. Formidable Forms offers more than 20 pre-made form templates out of the box.

For example, we will choose ‘Real Estate Listings’ to create a real estate directory. Click the ‘Create Form’ to get started.

You will see a popup box where you will be asked to enter your form name and description.

After that, it will load the pre-built real estate submission form.

You can review and customize the form using the simple drag and drop interface. Once done, click on the ‘Update’ button.

If you want to create a premium web directory with paid listings, then you’ll need to connect your form with a payment gateway.

Formidable allows you to collect payments with PayPal, Stripe, and Authorize.net.

In this example, we will show how to integrate PayPal to accept payments. Go to Formidable » Add-Ons from your dashboard and install the ‘PayPal Standard’ addon.

Once the addon is installed and active, visit Formidable » Global Settings and click the PayPal option. Update your PayPal email address and other settings.

After that, open your respective form editor again, and click the ‘Settings’ option at the top.

Next, click on the ‘Form Actions’ tab and then select the PayPal icon to add a new action.

Now you need to configure the PayPal settings. Add a payment amount, choose a payment type (one-time payment, donation or subscription), select currency, and then add a return URL and cancel URL.

Once done, don’t forget to Update your form.

Now that payment option is integrated, your users will need to make a payment before submitting a real estate property via your form.

2. Publish Your Form in WordPress

The next step after building a form is to publish it on your website, so users can submit their business details using it.

Visit Pages » Add New from your dashboard to create a new page. After that, name your page and add the Formidable Forms widget to the editor.

Next, select your form.

After that, it will load the pre-built real estate submission form into your page editor.

You can also add some helpful content to the page. Once done, go ahead and publish your page.

Now you can add the submission form page to your WordPress navigation menu, or send an email campaign to your email list to get more form submissions.

The process of collecting data via a form may take some time, so it is better to make a plan before starting. Alternately, you can also create entries manually from your dashboard or import from a CSV file.

3. Build Your Web Directory with Formidable Views

After you have gathered plenty of information, you can create a web directory with the Formidable Views.

Navigate to Formidable » Views from your dashboard and click on the ‘Add New’ button.

After that, enter a title for your view and choose the form which contains the data you want to display.

Next, you should choose the view format. You can show all entries in a list, a single entry, list the entries with a link to the single entry page, or insert entries into a calendar.

For this tutorial, we will choose ‘Both (Dynamic) – list the entries that will link to a single entry page’ option.

If you want to add a Search bar in your web directory, add the following shortcode into the ‘Before Content’ box.

[frm-search]

After that, you need to add content to your directory listing in the following format.

<div class="listing_info"> 
<a href="[detaillink]"><img src="[home-image size=thumbnail]" alt=""/></a>
</div> 
<div class="listing_list">
<strong><a href="[detaillink]">[MLS ID]</a></strong>
<strong>[address]</strong> <strong>$[listing-price]</strong> [blurb] 
[bedroom] Bedrooms | [bathroom] Bath |[sqft-living] sq. ft.</div> 
<div style="clear:both;"></div>

In the above code, you need to replace home-image, MLS ID, address, listing price, blurb, bedroom, bathroom, and sqft-living with the respective field IDs/keys from your form.

You can find the field IDs/keys in the Customization box on the right-hand side of the page.

For example, if we want to show the photo uploaded via ‘Main Photo Upload’ field as the home image, we need to replace the ‘home-image’ with the field ID ‘63’.

After that, add the following code to into Formidable » Styles » Custom CSS to customize the appearance of your web directory.

 .listing_info{float:left; width:235px; margin-right:10px;} 
.listings_list img{width:370px;float:right;}

Once done, you can publish your view and preview it.

After that, create a new page for the web directory and add your Formidable View to it.

Here is how your real estate directory would look with the default Twenty Nineteen theme.

You can further customize and style your Formidable directory by either using custom CSS, a drag & drop WordPress page builder plugin, or a styling plugin like CSS Hero.

Method 2: Using Business Directory Plugin

The second method is by actually using a Business Directory Plugin. Remember while the main plugin is free, a lot of functionality will require you to purchase the PRO version of the plugin.

Start by installing and activating the Business Directory Plugin. Upon activation, the plugin will ask your permission to create a new WordPress page and add the business directory shortcode inside it.

Click on the ‘Create required pages for me’ to create your directory page.

Once done, the Business Directory plugin will add a new page called ‘Business Directory’ automatically.

You should not delete or hide this page because it is the primary page the Business Directory plugin uses to show a directory on your website.

Next, you can manage the plugin settings from the ‘Directory Admin’ menu in your dashboard.

Go to Directory Admin » Manage Options to configure your plugin’s main settings. The ‘General’ settings include permalink settings, directory search options, reCAPTCHA, registration options, and more.

As you can see in the screenshot above, there are settings for Listings, Email, Payment, and Appearance. You can review all of them one by one and make changes as per your requirements.

After that, visit Directory Admin » Manage Form Fields to customize your form fields. From here, you can add or edit fields which would appear on your directory submission form.

Next, you will need to create a few categories for your directory.

You can do this by going to Directory » Directory Categories. You will be required to create at least one category, so your users can use this category when submitting their listing.

Once you have created the categories, you can go ahead and create a new listing by visiting Directory » Add New Listing.

Now you would see the Add New Listing page which looks similar to the Classic WordPress editor. Enter your listing title, and add a short description about your listing.

After that, scroll down to ‘Directory Listing Fields/Images’ section and add your business details including website address, phone number, email, etc.

To add images, you will need to click on the Images link first. Then, you can upload images from your computer or simply drop in the image box.

Next, you will need to choose an appropriate category for your listing.

Once done, you can go ahead and publish your directory.

Now you can preview your web directory page on your website. Your web directory would look like the screenshot below with the default WordPress theme Twenty Nineteen.

As a site administrator, you can create a listing manually from your dashboard. Your users can also submit a listing in your directory using a form. The submission form can be accessed by clicking on the ‘Create A Listing’ button.

The user-submitted listing items will be saved in the Directory » Directory page as pending listing, so you can manually review and check the listing for quality.

Once done, they will appear on your business directory page.

Accepting Payments for Directory Listings

Business Directory Plugin allows you to accept payments for listings in your web directory. By default, the plugin only comes with Authorize.net as the payment gateway.

Other payment gateways such as PayPal and Stripe are available as separate add-ons which you can purchase from the plugin’s website.

To enable payment options in your business directory, you need to go to Directory Admin » Manage Options page and click on the ‘Payments’ tab.

In the payment settings page, the first option on the Payment Settings screen is the checkbox to turn on payments. If your site is not fully ready yet, then you can click the checkbox next to Put payment gateways in test mode? option.

Next step is to choose your currency and add a thank you message for payments.

Once you are done configuring payment options, then click on the save changes button to store your settings.

Now you can connect your directory with a payment provider. If you have not installed any other payment gateway add-on plugin, then you will only see Authorize.net as the default payment gateway option.

Click on the Authorize.net link and then enable it by entering your login ID and transaction key.

Since you are requiring payments, you will need to set up listing fees. This can be done by going to Directory Admin » Manage Fees. There you can create different listing plans, set up fees and listing duration for each plan and save your changes.

That’s all! Your web directory is now ready to accept paid listings. We recommend you to explore other options in the plugin’s settings for further optimization of your web directory.

We hope this article helped you create a web directory using WordPress. You may also want to see our guide on how to create a team directory in WordPress.

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.