How to Create a Directory Website with Divi theme?

The easiest way to build a Directory Website using the Divi WordPress theme is to implement the following 3 steps:

1. Install the Divi theme
2. Install and setup GeoDirectory
3. Design the Directory Website using the Divi theme

Before I describe the details of how to create a business directory step by step, I would like to quote a post published on September 11, 2023, on the official Elegantthemes blog, the developers of the Divi theme.

Is GeoDirectory the best WordPress plugin for creating a business directory website with the Divi theme?

On the Elegant Themes blog, an article titled “7 Best WordPress Directory Plugins in 2023 (Ranked)” was published.

GeoDirectory plugin took the top spot in the ranking. In the article’s content, the author justifies why GeoDirectory is the best WordPress plugin for creating a directory website.

I encourage you to read this article. Below is a quote from the FAQ section of the mentioned article.

What is the best directory plugin for WordPress? GeoDirectory is the best WordPress directory plugin. It offers customizable listings, advanced search, user reviews, Google Maps integration, monetization options, and great theme/plugin compatibility. You can create feature-rich directory websites easily with GeoDirectory.

My first WordPress site, created in 2013, was a business directory without any dedicated plugins.

I recall when the creators of WP GeoDirectory, Paolo Tajani, and Stiofan O’Connor, forked the “GeoPlaces” theme from Templatic and fixed all its issues.

They enhanced its performance and subsequently introduced GeoTheme over 10 years ago.

Later, adapting to the evolving WordPress ecosystem and drawing from their experiences, they shifted from theme development.

Building on its foundation, they crafted the GeoDirectory plugin, which facilitates the creation of directory sites of nearly any kind.

I’ve tested most of the plugins and themes for WordPress that allow for the creation of a directory website.

Both the aforementioned entry and my 11 years of experience confirm that WP GeoDirectory is the best plugin for this purpose.

Step-by-step guide on how to create a directory website using the Divi theme and the GeoDirectory plugin

Let’s see how we can build a Directory Website with GeoDirectory and the Divi theme in detail.

In this tutorial, we will:

Table of Contents

• How to Create a Directory Website with Divi theme?
• Is GeoDirectory the best WordPress plugin for creating a business directory website with the Divi theme?
• Step-by-step guide on how to create a directory website using the Divi theme and the GeoDirectory plugin
• Installing Theme and Plugins.
• 1. Install the Divi theme
• 2. Install GeoDirectory
• 3. GeoDirectory Install Wizard
• Choosing the Map System (Google Maps or OpenStreetMap)
• Setting the default city
• Adding extra features
• Adding Dummy Data
• Design the Divi Directory Website
• 1. Divi Directory Website Home Page design
• The Logo
• The Navigation Menu
• The Content
• Create Global footer
• Divi Directory Website Listings and Search page design
• Search page
• Single listing page
• Fine-tuning your Divi directory site
• Colors and Typography
• Maximize Your Divi Directory Potential with DiviGeo
• Adding premium features to your Divi Directory Website

Installing Theme and Plugins.

1. Install the Divi theme

First, you will need to install a Divi Theme

Go to Appearance >> Themes >>

Select Add New, Upload Theme, Install, and Activate the Divi Theme.

2. Install GeoDirectory

Now you need to install the GeoDirectory plugin.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it.

Done, once the Divi theme and GeoDirectory plugin are active, we can move on to the next step.

3. GeoDirectory Install Wizard

If you appreciate Divi Builder for its simplicity, you’ll surely appreciate the Setup Wizard built into the Geo Directory plugin.

Choosing the Map System (Google Maps or OpenStreetMap)

Now you have to complete the Setup Wizard to configure. You can choose between two mapping systems on the wizard’s first step. Google Maps and Open Street Maps (which doesn’t require an API key).

In this tutorial, we select OpenStreetMaps.

Select OpenStreetMap and click continue.

In case you wish to select Google Maps, do the following extra steps.

Click on the Generate Key button and follow the steps in this doc to generate a valid API key.

The essential steps are:

1. Enable the Keys.
2. Create or select an existing project.
3. Get the Key.
4. Activate a billing account.
5. Restrict the API key (so it can only be used from the URL of your website)

About point four: it is a requirement. However, you only get charged if you pass the threshold, which is $200/month.

This free credit is more than enough for 99% of directories.

Setting the default city

After that, you will set the default location. This is the city for which the directory is created. GeoDirectory uses Philadelphia as the default City.

Considering the niche I chose for this tutorial, we will set the default city to Split in Croatia.

You can drag the map marker to use whatever location you need, or use advanced settings by clicking “Show Advanced”.

If you need to add listings to more than one city, you will need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user login plugin that lets users register and log into your website.

This is needed to allow users to add and edit their listings. It will also create user profiles where they can find their listings, reviews, and so on.

We will also install Ninja Forms so that all listings have a contact form that sends emails directly to the listing owners.

AyeCode Connect is not mandatory for this tutorial. It is mainly needed if you want to add GeoDirectory premium add-ons and install them directly from the WordPress Dashboard.

Adding Dummy Data

The last step to complete the installation wizard is adding some dummy listings. This will also add listing categories that you can edit later according to your needs.

You will not add sidebar widgets and menu items right now, as we will do that later.

Design the Divi Directory Website

Continue reading on original source: Building a Directory Website with Divi