This tutorial is outdated. We're currently working on an updated version. In the meantime, for instructions on building a chat app using CometChat, please visit our documentation.
Do you want to start generating revenue from your WordPress site?
WordPress is best known as a blogging platform, but the easiest way to monetize your website is through user-generated content.
Today, some of the world’s most lucrative tech companies produce very little of their own content. Facebook, Twitter, LinkedIn, TripAdvisor and Trustpilot all found success by providing a platform for user-generated content, and then monetized that content using tools such as advertisements and subscriptions.
Want to break into this potentially lucrative market? One popular option is to create a business directory.
In this tutorial, I’ll show you how to create a business directory where tutors can offer their services to prospective students, and where students can find the teacher that’s the perfect fit for them.
Did you have a different industry in mind? You can use the instructions in this article to create virtually any business directory. With just a few tweaks, you could create a directory that helps people connect with plumbers, freelancers, accountants, or simply find the best restaurants, cafes, and bars in their local area!
What we’ll be building
To start, we need to give teachers a way to register with our website.
Once a teacher has created their account, they’ll be able to submit a listing by completing a form. This listing will then appear in our public directory.
Students can browse the directory, either by searching for relevant keywords, filtering by category, or scrolling through the entire directory.
When a student finds a listing that catches their interest, they’ll be able to click through for more information.
Out-of-the-box, students will be able to send their chosen teacher a message using a contact form but to provide a better user experience we’ll also give students the ability to communicate with teachers in real-time, by exchanging instant messages.
Make your life easier, with free WordPress plugins
You can quickly and easily add a business directory to your website, using the free Business Directory plugin:
Log into your WordPress account, if you haven’t already.
In WordPress’ left-hand menu, select “Plugins > Add New.”
Search for “Business Directory Plugin – Directories for WordPress.” When the plugin appears, select “Install Now > Activate.”
When prompted, give the following button a click: “Create required pages for me.”
The Business Directory plugin will now create a page where prospective students can view and search your website’s listings, and where tutors can register with your website and start submitting their own listings.
Customizing your Business Directory
By default, the automatically-generated directory page has the title “Business Directory.” You may want to change this title to something that better reflects your website:
In WordPress’ left-hand menu, select “Pages.”
Open the Business Directory page for editing.
Change the title text for example, you could use “Find a tutor” or “Connect with an expert.”
Click “Update.”
Reload the Business Directory page; it should now be using your updated title.
How to change the WordPress homepage
Since the directory will form the core of our website, we need to ensure it’s the first thing visitors see, by setting it as our homepage:
In WordPress’ left-hand menu, select “Appearance > Customize.”
Select “Homepage settings.”
In the “Your homepage displays” section, make sure “Static” is selected.
Open the “Homepage” dropdown and select “Business Directory.”
The preview window should now update to display the page you just selected. If you’re happy with your new homepage, then click the blue “Publish” button.
Try reloading your website - the business directory should now be the very first thing you see.
Add membership features to your website
Try loading your website in a browser or tab where you aren’t currently logged into your WordPress account, and then give the “Create a listing” button a click.
You should now be asked to log into your account, but there’s a problem - currently, there’s no way to register with the website. How are people going to submit listings, if they can’t even create an account?
You can quickly add the missing membership functionality, using the free Ultimate Member plugin:
In WordPress’ left-hand menu, select “Plugins > Add New.”
Search for “Ultimate Member,” and when the plugin appears, select it.
Select “Install Now > Activate.”
When the “Create Pages” button appears, give it a click.
Ultimate Member will now create all of the following pages: Account, Login, Logout, Members, Password Reset, Register, and User.
Connecting Business Directory and Ultimate Member
Next, we need to make sure the Business Directory plugin is using Ultimate Member for its login and registration functionality:
In WordPress’ left-hand menu, select “Pages.”
Find the “Login” page and click its accompanying “View” link; this page will now open in a new tab. Copy the login page’s URL and paste it somewhere accessible, such as a notepad app, as we’ll be needing it shortly.
In the left-hand menu, select “Pages.”
Find the “Register” page and click its accompanying “View” link. Copy/paste this page’s URL into your notepad app.
Now you have both links to hand, select “Directory Admin.”
Select “Manage options > Registration.”
Paste the “Login” page’s URL into the “Login URL” field.
Paste the “Register” page’s URL into the “Registration URL” field.
Click “Save Changes.”
Select “Settings” from WordPress’ left-hand menu.
Find “Membership” and then select its accompanying “Anyone can register” checkbox.
Click “Save Changes.”
Try clicking the “Create a listing” button again.
You should now be redirected to Ultimate Member’s login page, where you can log in to an existing account, create a new account or recover a lost password.
Help visitors navigate your site
Currently, a registered user can only access their account by selecting the “Create a listing” button and then clicking “Login.” This isn’t exactly a great user experience, so let’s make our website easier to navigate by creating a menu, and then displaying different options depending on whether the person is logged into their account:
In WordPress’ left-hand menu, select “Appearance > Menus.”
Give your menu a name, and then click “Create new menu.”
Click to expand the “Pages” section and then select the “View all tab.”
Select all of the following pages: Login, Logout, Password Reset, and then click “Add to menu.”
If required, use drag and drop to change the order these pages appear in your menu.
Click to expand the “Login” section, open the “Who can see this menu link?” dropdown and then select “Logged out users.”
Next, expand the “Logout” section, open the “Who can see this menu link?” dropdown and select “Logged In Users.” Find the “Select the member roles that can see this link” section, and select all of its checkboxes.
Expand the “Password Reset” section and set its dropdown to “Logged Out Users.”
When you’re happy with how your menu is setup, click “Save Menu.”
To place this menu on your website, click the “Manage Locations” tab.
Assuming you want this menu to appear across your site, open the “Top Menu” dropdown and select the menu you just created.
Click “Save Changes.”
Spend some time interacting with your new menu - the menu items should change depending on whether you’re logged in, or logged out of your account.
Add live chat to your WordPress website
Now, visitors will be able to browse your website’s listings, get more information about any listing that catches their eye, and get in contact with registered tutors using the attached contact form.
However, your typical Internet user is impatient and increasingly expects an answer right now. To provide your tutors and students with the best experience, who not let them communicate in real-time, by exchanging instant messages?
In this final section, I’ll show you how to add powerful live chat to your website, using the CometChat Go plugin.
If you haven’t already purchased CometChat Go, then you can grab your license now. We also offer a 7 day trial, so you can add CometChat Go to your website for free and see exactly what our plugin has to offer, before deciding whether it’s right for you.
To add live chat to your site:
Sign into the CometChat Client Area.
When prompted, select “Manage.”
In the menu bar select “API keys.”
Make a note of the following: Auth Key, API Key, and License Key.
Download the CometChat WordPress Plugin Zip File (note that this is a direct download link.)
In your WordPress account, navigate to “Plugins > Add new.”
Select “Upload Plugin.”
Click “Add New” and then select “Choose file.” Select the cometchat.zip file you just downloaded.
Click “Open,” followed by “Install Now > Activate plugin.”
In WordPress’ left-hand menu, select “CometChat.”
When prompted, enter your license key and then click “Install.”
Enter your Auth Key and API Key, and then click “Update.”
If you reload your website, then you’ll see that it already has live chat functionality.
Anyone who visits your website can now view a list of everyone who’s online, and send instant messages to any of these people in real-time.
However, we want to facilitate one-on-one conversations between prospective students and the teacher they’re interested in working with - not just whoever happens to be online at that particular moment!
To provide a better user experience, I’m going to add an “Instant chat with me!” link to every listing, so students can launch a private CometChat Go conversation with that specific teacher.
Creating a docked chat window
First, we need to add a docked chat window to the “User” page:
In WordPress’ left-hand menu, select “Pages” and open the “User” page for editing.
Copy and paste the following into this page:
[cometchat layout='docked' width='990' height='600']
Click “Update.”
How to edit WordPress plugin templates
Every time someone clicks the “Instant chat with me!” link, CometChat Go needs to identify the person behind this particular listing, and then launch a private chat session with that person.
Extracting the tutor’s name does require us to add some code to the Business Directory plugin, but I’ll be providing the exact code you need, so you can copy/paste it straight into the plugin’s template:
In WordPress’ left-hand menu, select “Plugins > Plugin Editor.”
Open the “Select plugin to edit” dropdown and choose “Business Directory Plugin.”
Give the accompanying “Select” button a click.
In the right-hand “Plugin Files” menu, select “templates,” followed by “listing-contactform.tpl.php.”
Scroll to the very bottom of this file and copy/paste the following:
[Instant chat with me!](javascript:jqcc.cometchat.launch({uid:'<?php echo $the_user_id; ?>'});)
Click “Update File.”
And that’s it! A live chat button will now appear on every listing.
Since we’ve just setup our website, chances are it doesn’t contain any listings yet, so if you want to see live chat in action then you’ll need to create a test listing.
Testing CometChat Go’s live chat
Imagine you’re a tutor who’s visiting this website for the very first time, and you’ve decided to create a post offering your services.
To create a listing, you’ll need to complete the following steps:
Select the “Create a listing” button.
Click “Register.”
Complete the subsequent registration form.
Navigate back to the website’s homepage and select “Create a listing.”
Complete the subsequent form, for example by adding a description of the services you’re offering, your business address and telephone number, your email, relevant tags for this listing, and any images you want to use. When you’re happy with the information you’ve entered, click “Complete listing.”
By default, Business Directory requires an admin to approve each listing, so:
Log into your WordPress account.
In the left-hand menu, select “Directory.”
Here, you’ll find a list of all published and unpublished listings; find the listing you just created and give its accompanying “Edit” link a click.
Review the information and if you’re happy for it to go live, click “Publish.”
Open a browser or tab where you aren’t logged into your WordPress account, and navigate to the listing you just created. Click to open this listing.
Scroll to the bottom of the screen, and you’ll find the “Live chat…” button; give it a click and it’ll launch a live chat with this specific tutor.
If you want to delete this test listing, then log into your WordPress account and navigate to “Directory > Directory.” Find the listing you just created, hover over it and then click “Trash.”
Get notified about new listings
Since all listings require admin approval, you may want to receive an email every time a new listing is submitted. To start receiving email notifications:
In WordPress’ left-hand menu, select “Directory Admin > Manage Options.”
Select the “E-Mail” tab.
Scroll to the “E-Mail Notifications” section.
Find “A new listing is submitted” and select its accompanying checkbox.
Select “Save Changes.”
You’ll now receive a notification every time someone submits a new listing.
Conclusion
In this tutorial, we setup a network for students and teachers, without writing any code.
If you’ve been following along, then tutors will now be able to register with your website and submit listings offering their services. Students who visit your website can browse these listings, and communicate directly with teachers using either the contact form or CometChat Go.
We’ve laid the foundation for a teacher and student network, but there’s lots more you can do with this website. How about adding a map so students can search for tutors in their local area? Or you could turn your directory into a complete learning hub by adding a blog, forum, education guides, and other resources that students and teachers will find helpful.
Have you used Business Directory, Ultimate Member and CometChat Go to create a learning network? Let us know in the comments below, or connect with us on Twitter or Facebook.
Jessica Thornsby
CometChat
