Have you ever wanted to build a directory website but just didn’t know how to accomplish the task? If so, you will love this tutorial. Over the years, web technologies have been evolving and new infrastructure have come up that make it possible for anyone to design professional websites, even without have solid technical skills.
Today, I will show you how you can easily build a directory website like Yelp using WordPress, and make money from it. Before we start, you should know the basics of using WordPress since we’ll be building the site using a WordPress theme.
Why Build a Directory Website?
To make money, of course! Isn’t that what all websites are about? Anyway, there are a number of reasons why building a directory website is one of the easiest online ventures you can start. Some of these include:
- Easy to set up (we’ll set one in this tutorial)
- Free content (your site content will mostly consist of listings of businesses/products)
- Low barrier to entry (Anyone can do it. You just need a domain name, WordPress theme, and hosting)
- Untapped markets (You can set up a directory for nearly any niche, from pet sitters to local businesses)
With that said, let’s get into the tutorial
Tutorial Prerequisites
To complete this project, there are three things you will need. These are:
- A domain name. You can register one at Namecheap for under $10.
- Web hosting. There are many hosting services around. I recommend Scala Hosting, but you are free to use any that you prefer.
- WordPress theme. We will be using the ListingPro theme from Themeforest
Your total startup cost should be less than $100 for this project if you use the links I have given above.
With this said, let’s dive into the tutorial.
Further Prerequisites
Rather than bore you with a tutorial on how to buy a domain name and install WordPress on your hosting, I’ll like to a tutorial that will help you. Check How to Install a WordPress site in under 10 minutes.
I will wait for you.
Done?
After installing WordPress to your hosting account, head over to ThemeForest and purchase the ListingPro Theme (costs only $69).
And do you have a niche already? If not, subscribe to my newsletter to get a list of niches that will work well with directories.
Do you have a niche already?
Okay, now let the tutorial begin!
In this tutorial, I have decided to build a directory of locksmiths.
Installing ListingPro Theme
Log into the WordPress and upload the ListingPro Theme.
To upload the theme, follow the steps below:
- Hover your mouse cursor to the left hand side to the Appearance menu
- Select Themes from the sliding menu that will appear and click on it. This will take you to the upload window
- Click the Add New button on the open themes window
- On the next interface, click the Upload Theme button
- Click Choose File
- Navigate to where you have saved the ListingPro theme you purchased from Themeforest and select it
- On the resulting themes menu, click Install Now
Your new ListingsPro theme will be installed on your new site.
You are making progress.
Note: The theme can be found in your Themeforest account, if you have already purchased it.
After the theme has been installed, you will see it in your list of installed themes. You can see the theme by clicking on the Appearance menu on the left, and choosing Themes.
Now, hover to the ListingsPro theme to reveal the Activate button. Click on the button to activate the theme on your site.
On activating the theme, you will be redirected to an easy setup guide. I suggest you use the guide to make your work easier.
Click the Let’s Go button to get started with the set up.
On the next page, click Continue to install and activate the plugins required for the directory site.
The plugins will be installed and activated in a couple of minutes. The next step will be to install the “demo” content. This will make your website look like the demo at Themeforest.
This step is optional. If you know how to get your way around themes, you can skip it. However, I’d recommend you install the demo content because it will speed up your work. When the content is installed, you will only need to tweak the website based on your needs.
For this tutorial, we will install the demo content. To install the content, click Import Content.
When the content has finished importing, your website will be ready for you to view. This is how the website I am designing looks like at this stage:
At this point, your website is about 30 percent complete. Now, we need to do some edits to customize the website to our needs.
Configuring Listing Pro Theme
Go to your WordPress back end and select the Theme Options menu on the left hand side. From there, go through all the options on the sliding menu that will pop up and customize them to your requirements.
Below is an overview of what the various items on the Theme Options sliding menu will allow you to do:
General Settings
- Enable/disable reserve booking
- Enable/disable timekit booking
- Enable/disable front end menu
- Change the primary and secondary colors of the theme
- Use custom CSS and JS
- Change the currency symbol
- Rewrite the website listings’ and categories URL
After making any changes you would like, click the Save Settings button at the bottom. For this tutorial, the only thing I have changed on the General Settings is the color of the theme; from the default blue to a bright orange one.
Typography
This section will allow you to change the font type, size and color of the site. You can change the font size, type and color of headings, paragraphs and menus on this section.
For this tutorial, I haven’t changed anything on the Typography settings section. If you make any changes, make sure you click the Save Settings button at the bottom to effect the changes.
Header
In this section, you can do the following:
- Upload your logo and favicon
- Change the header
- Hide or show the “search button” at the header
- Change the header background color
For this tutorial, I have changed the logo and background header images to something more related to locksmiths. But you should change yours to something related to the niche you chose.
Banner Settings
In this section, you can:
- Replace the default homepage banner with a banner that is related to your niche
- Select between a Map or banner for the top header
- Select listings categories
- Customize search settings
For this tutorial, I have select Map View for the top header. I have also customized the search messages to be more about locksmiths. Click Save Settings at the bottom when you are done with your edits.
Map Settings
If you have selected tMap View in the Banner Settings, you will need to set up the Google Maps API key. The key is free. Watch the video below to know how to find the key.
After getting the key, put it on the Map settings area and click the Save Settings button.
If you chose to show the Banner for the top header, you can skip this step.
Listing General Setting
Here, you can do the following:
- Indicate the support URL for listings
- Choose the listings’ view page layout
- Customize settings for editing a listing
- Enable/disable listings review
- Show/hide leads’ form on a listings page
Go through the section and make any changes you want.
Search Filter Option
Allows you to enable or disable searching by Price, Open Time, Highest Rated, Most reviewed, and Categories options.
Search Settings
Here, you can enable or disable location searching on homepage and inner posts. You also have the option of allowing searches to be pre-populated on the homepage.
Payment Settings
Here, you can:
- Enable/disable paid submissions
- Set your directory currency
- Set pages such as Terms, Payment Failure, Payment Success, Thank You page, etc.
- Enable PayPal and/or Stripe checkout
The options are pretty self explanatory.
Email Management
In this area, you can customize the emails you will get as well as those that users will get when they submit listings and make payments. Enter the email where you prefer notifications to be sent to.
Invoice Options
Customize the logo as well as content of the invoices that will be sent to your users.
Ads Option
Customize the price, duration and appearance of ads purchased by business owners on your directory.
URL Config
Configure the pages for submitting listings, payment plans, editing listings and business owner.
Contact Page
Indicate your address, phone number, and Google Maps address. Also, customize the message that users get when they send you a message through the website.
Footer Section
At the Footer Section, you can:
- Change the footer color
- Indicate links to your social media pages
- Edit copyright information
Import/Export
Most people won’t need to do anything at this section. You can however export your content if you are developing the site on a local computer. If you are developing the site online, ignore this section.
Having gone through the above section, our site has started to take shape. This is how the website now looks:
At this stage, believe it or not, we are about 50 percent done with the website.
Now, let’s do some further editing and customization to make the site ready for business!
Website Posts
When we installed the demo content of ListingsPro, some dummy posts were installed. Remove the posts and publish those that are relevant to your niche. To remove the posts, hover to the left had side of your WordPress dashboard, click Posts and you will see a list of he posts. Delete the posts and publish news ones relevant to your niche.
Remember to include featured images in the posts. Here is how the posts look on the homepage:
Creating Listings
Let’s now create some listings. While in your WordPress dashboard, select the Listings menu on the left hand side to show all listings. This will show the listings that were imported in the demo content. We now need to edit the listings to real businesses in our niche. Simply click Edit on the listings to start editing. To add a new listing, click Add New from under the Listings menu.
Fill as much information about the listings as you can. This work will have to be manually done. If you are not sure where to get listings, here are some tips that will help you:
- Go to established directories and look for business listings for your directory. A good place to start would be Yelp.com
- Search on Google for “keyword” in “city”. For example, if you are making a directory for flower vendors and want to find those serving Chicago, you can search for “flower vendors in Chicago” on Google.
This work may take quite some time. You can hire a VA to help you if you do not have time to fill the listings. This is especially if you are making a nationwide directory. However, if you are making a directory for a small city, you can do the work on your own.
Back to our tutorial, here is an example of one listing I’ve filled:
You can see how the listing page looks like here.
Let’s go through an overview of the menu items under the Listings menu
Listings: Shows all listings on your directory
Add New: Create a new listing
Categories: Add category (e.g. services provided) of the business listings. You can also change the icons to be displayed to be relevant to your niche.
Features: Add special features of the business (e.g. do they accept credit cards?)
Tags: Assign tags that can help users identify a listing (e.g. you can assign a “24 hours” tag to a business that is open 24 hours)
Locations: Assign locations of businesses listed in your directory (e.g. assign states or cities). You can upload images to depict the various locations.
Form Fields: Determine the information that will be available on the forms
Go ahead and add some listings on your directory. You can add the listings a every few days and you will see your directory growing.
Monetizing Your Directory
If you would like to monetize your directory, you don’t need any extra plugins to install. ListingsPro has the monetization angle covered.
You can make money with your directory by charging users to submit ads. To do this, hover over to the Pricing Plan menu and click it. Edit the existing plans or create a new one as you see fit.
Here are the options for a premium plan that I have set for the website:
Ads
Now that you have set the pricing plan, you can start accepting free and paid ads. On the Ads menu on the let, click All Ads to see all ads. You can also create ads for users who may for one reason or another not be able to create the ads on their own. Simply collect their payment and create their ads.
You have three ad option on your directory website. These are:
- Get the ads to appear random
- Get the ad to appear on detail page
- Get the ad to appear on top of search page
Below is how my ad section is configured:
Reviews
In the Reviews menu, you can see all reviews left by users about the different businesses. Apart from this, you can add and edit the reviews.
Invoices
The Invoices section shows all invoices generated by the site.
Claims
This section allows you to see any users that have claimed the listings on your directory. You can also manually claim a listing for a user.
Editing Pages
Finally, it’s time to edit the homepage. You will need to have some content for your homepage. Simply go to the Pages menu in your WordPress dashboard and find the homepage. Click Edit to begin editing the page.
You can also edit other pages as you see fit.
Congratulations!
Phew! That’s it folks!
Now you have just used WordPress to make a directory website like Yelp. You can see the final site I made at Dr. Locksmith Inc. If you have any questions about this tutorial, leave a comment below.
I am also available for hire if you need the ListingsPro theme customized.
