The World’s Most Advanced And Scalable WordPress Directory Plugin

Here’s an easy-to-understand guide on how to make a Directory Website using the Breakdance Website Builder plugin:

1. Install the Breakdance plugin
2. Install and setup GeoDirectory
3. Design the Directory Website using the Breakdance plugin

The Breakdance Plugin, when used with the GeoDirectory Plugin, is an excellent way to create a flexible online directory. With this combination, you can easily add location-based features, customize the layout, and include dynamic content for a user-friendly experience.

This system allows web developers and designers to build a high-quality directory website for specific industries or broader community needs.
Let’s look at the details of how to do this.

In this tutorial, we will:

• Install and setup the plugins
  1. Install the Breakdance Plugin
  2. Install GeoDirectory
  3. GeoDirectory Install Wizard
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Breakdance Directory Website
  1. Design The Website Logo
  2. The Home page design
     • The Navigation Menu
     • The Typography
     • The Content
  3. The Listings and Search page design
  4. The single Listing page design

Installing and setting up Plugins.

1. Install the Breakdance Plugin

You can buy the Breakdance plugin from the breakdance.com. You will get a plugin zip. To install it go to  Plugins >> Add new >> Click Upload plugin

Now after installation, we will disable the WordPress theme from the Breakdance >> settings >> Theme >> Disable theme

2. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it. We finished installing the plugins.

3. GeoDirectory Install Wizard

For the GeoDirectory plugin, you should complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

You can choose between two mapping systems on the wizard’s first step: Google Maps and OpenStreetMaps (which doesn’t require an API key).

In this tutorial, we select OpenStreetMaps.

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

Click on the Generate Key button and follow the steps of 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 of $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.

We will set Philadelphia as the default city.

You can use whatever location you need.

If you need to add listings to multiple cities, you will need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user management 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; we will do that later.

Design the Breakdance Directory Website

Now that we have installed the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Breakdance Suite of tools.

1. Design The Website Logo

First things first: we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

2. Breakdance Directory Home page design

You can create a new page or use one WordPress makes by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Navigation Menu

After creating and adding the logo, go to Appearance >> Menus and create your menu.

Add the links needed (from the left to the right column) and save.

In the Menu Settings > Display location section, you can check the “Main” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login
7. Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

The Typography

Let’s set global Typography settings from the Breakdance >> settings >> Global Styles >> Launch Breakdance

following are the Typography settings
Heading font: Poppins
Body Font: Poppins
Base size: 16px
Ratio: 1.2

Setup Header

Let’s set the site Header for that let’s go to Breakdance >> Header and click Add header.

here we will give a title to the header and we will select
Location: Everywhere
Priority: 1

Now Click the Add New button at the top left corner. You can create a header using these available block elements or you can click Library and use already-built header templates.

I am using one of the existing header templates from the library and I have uploaded the Logo and selected a menu there.

Now that our header is ready, we will come to the homepage content.

The Content

I will start building this page from scratch using the Breakdance plugin.

We need a hero header on the homepage for that.

Let’s first edit the Homepage in Breakdance by clicking on Edit in Breakdance button.

we will drag an empty section by Clicking on the Add button on the Top left.

From the section style tab set
Align: Center
Background Type: Image
Image Size: Full
Size: Cover
Repeat: no-repeat
Position: Center
Attachment: Scroll
Unset image At: Desktop
Height: Custom
Custom Height: 400px

Now let’s drag a Heading element with the following setting.

Text: Find The Best Restaurant In Philadelphia
Color: #FFFFFFFF
Font Size: 48
Font Weight: 600

we will add a shortcode block with the [gd_search] shortcode below it.

Now let’s add one more empty container below it with the following shortcode to display lists of categories.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3" rounded="rounded"]

we will give padding of 50px on Top and Bottom.

Now we need a recent listing section. we will add a shortcode element with the following shortcode.

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

Now let’s add one more shortcode to display the listing map.

[gd_map map_type="auto" post_settings="1" 
width="100%" height="425px" 
maptype="ROADMAP" zoom="0"]

In the end, we need a CTA for that I am using an existing CTA template.

Setup Footer

Now at the end let’s set up the site Footer and let’s go to Breakdance >> Footer and click Add Footer.

we can create a Footer from scratch or we can use any of the existing ones. I am using an existing Footer Template. we can easily customize these Footer menus based on our needs.
For now, I am keeping it as it is.

Congratulations! Your homepage is Completed.

2. Breakdance Directory Website Listings and Search page design

Listings page

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will create and customize the layout of these pages using Breakdance Builder.

Let’s go to the Breakdance >> Templates >> Add Template

In the next option, we will select the below settings and click the Add Template button.
Location: Archive/Post Type Archive
Condition: Post Type = Places

In the template, we will add an empty section and add the following settings for the section block.
Layout
Align: Center
Vertical Align: Center
Background:
Color: F5F8FFFF
Type: Gradient

Now let’s add the Archive Title block inside it.

Now you have two options and we’ll show you both:

The easier way to do this is with a single column and using the shortcode: [gd_simple_archive layout=”2″ height=”100vh” maptype=”ROADMAP” marker_cluster=”1″]

2) If you want to have full control of the design, we will need to add a column block with a two-column layout instead.

In the setting we will use Width: Full

Now we will drag the shortcode container and use the required shortcode inside it.

Now on the left container, we will use the GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

In the right column, use the GD > Map block, and we’ll leave all the settings at their default settings. However, we’ll set the height of the GD > Map block to 100vh.

[gd_map map_type="auto" post_settings="1" scrollwheel="1"  width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

Now we will add the following gd-archive-left-container class to the left section.

In the left column, we will add the following class gd-archive-left-column.

To give it a final touch we will add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
    height:100vh;
    padding-right:15px;
}

.gd-archive-left-column{
	overflow:hidden;
}

After this, the Listing Archive page is now ready.

Search page

Now we will create a template for the Geodirectory Search page so Let’s go to the Breakdance >> Templates >> Add Template >> Search Results

Now we will copy all the content of the GD Archive template to the GD Search template.

So now our GD Search and Archive page templates are ready.

4. Breakdance Directory Website single Listing page design

Let’s go to the Breakdance >> Templates >> Add Template

In the next option, we will select the below settings and click the Add Template button.
Location: Single/Places
Condition: Post Type = Places

We will add an empty section with 0 padding from all sides.

we will add the following shortcode to show an image slider.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

Now let’s add one more section and a two-column layout inside it.

Now let’s add all the required GD Detail page shortcodes on the left column one by one.

Which includes GD > Post Title, GD > Single Taxonomies, and GD > Single Tabs.

[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false'  mt=''  mr=''  mb='2'  ml=''  pt=''  pr=''  pb=''  pl='' ]
[gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

On the right column, we will add GD > Author Action and GD > Output Location block.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

Adding Premium Features to your Breakdance Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Learn the fundamental aspects with this essential guide: The essentials of creating a directory website.

The possibilities are endless.

Here’s an easy-to-understand guide on how to make a Directory Website using the Beaver Builder theme and Beaver Builder plugin:

1. Install the Beaver Builder theme
2. Install and setup GeoDirectory
3. Install the Beaver Builder plugin & Beaver Themer
4. Design the Directory Website using the Beaver Builder plugin

The Beaver Builder Theme, when used with the GeoDirectory Plugin and Beaver Builder Plugin, is an excellent way to create a flexible online directory. With this combination, you can easily add location-based features, customize the layout, and include dynamic content for a user-friendly experience.

This system allows web developers and designers to build a high-quality directory website for specific industries or broader community needs.
Let’s look at the details of how to do this.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the Beaver Builder Theme
  2. Install GeoDirectory
  3. GeoDirectory Install Wizard
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Beaver Builder Directory Website
  1. Design The Website Logo
  2. The Home page design
     • The Navigation Menu
     • The Typography
     • The Content
  3. The Listings and Search page design
  4. The single Listing page design

Installing Theme and Plugins.

1. Install the Beaver Builder Theme

We need to install a Theme, and for this tutorial, you will install the Beaver Builder Theme.

Go to https://www.wpbeaverbuilder.com and purchase the Beaver Builder Pro Plugin, including the Beaver themes & Beaver Themer plugin.

Download these products from the My Account page.

Go to Appearance >> Themes.

Select Add New, Install the Beaver Theme and Child theme, and Activate the Child Beaver Theme.

2. Install the Beaver Builder Pro & Beaver Themer plugin

Beaver Builder Pro and Beaver Themer are powerful WordPress plugins designed to enhance the website building and customization experience.

Go to Plugins >> Add new >> Click Upload plugin

Upload the plugin zip file and Activate both the plugins one by one.

You can Skip all steps of the Setup Wizard.

3. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it. We finished installing the plugins.

4. GeoDirectory Install Wizard

For the GeoDirectory plugin, you should complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

You can choose between two mapping systems on the wizard’s first step: Google Maps and OpenStreetMaps (which doesn’t require an API key).

In this tutorial, we select OpenStreetMaps.

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

Click on the Generate Key button and follow the steps of 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 of $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.

We will set Philadelphia as the default city.

You can use whatever location you need.

If you need to add listings to multiple cities, you will need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user registration and 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; we will do that later.

Design the Beaver Builder Directory Website

Now that we have installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Beaver Builder Suite of tools.

1. Design The Website Logo

First things first: we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

2. Beaver Builder Directory Home page design

You can create a new page or use one WordPress makes by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

Now set the logo from Appearance>> Customize >> Header >> Header Logo
set. Logo Type: Header and Upload Logo image.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus and create your menu.

Add the links needed (from the left to the right column) and save.

In the Menu Settings > Display location section, you can check the “Main” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login
7. Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

The Typography

Now let’s define the Typography for the website text font and size. I am setting a global Font Family, Font Weight, and Font Size that will be applied to all site text.

we will go to the Appearance > Customiser > General > Layout. we will set the following settings
Width: Full Width
Content Width: 1200

we will go to the Appearance > Customiser > General > Text.

Font Family: Outfit
Font Weight: Light
Font Size: 18
Line Height: 1.45

The Content

I will start building this page from scratch using the Beaver Builder plugin.

We need a hero header on the homepage for that.

Let’s first edit the Homepage in Beaver Builder by clicking on Launch Beaver Builder.

Now drag a row container by Clicking on the plus icon on the Top right.

From the Row style tab set
Width: Full Width
Content Width: Fixed
Minimum Height: 600px
Background Type: Photo
Background Photo Source: Media Library
Position: Center
Scale: Fill

Let’s now drag a header and the GD > Seach Block over the top of this row.

Let’s now add one empty row container, and we will add a GD > Categories block inside of it.

Set the GD > Categories block settings to the following
Design type: Image Background
Row Items: 4
Enable the Use Category Image option

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image

Now, we will add an empty row with 1 column layout.

with following settings
Color: rgba(234,240,255,0.64)
Width: Full Width
Content width: Fixed

Now, we will add a header element
Text: Recent Business Listing
Size: 42
Align: Center

Next, we will edit some settings in this GD > Listings block.

We will set: Sorting: recent
Grid: 4

We will add a row container with the following settings.
Width: Full Width
Content Width: Full Width

Add the GD > Map block inside of it and keep the settings to default.

Now, at last, we need a CTA at the bottom.

We will add an empty row with a two-column layout and the following settings.
Width: Full Width
Content Width: Fixed

Let’s now add a heading and content in the left column, and in the right column, we will add a button to send users to the add listing page.

Congratulations! Your homepage is Completed.

3. Beaver Builder Directory Website Listings and Search page design

Now, you need to design two essential pages for any directory.

The listings page (general archive, categories, tags) and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will customize the design of these pages a bit.

The listing and search pages are mostly identical, so we create it once and copy the layout on the other page.

We decided the Listing page layout would be the listings on the left and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Listings page

Go to Beaver Builder > Themer Layout > Add new and select
Title: GD Archive
Type: Themer Layout
Layout: Archive
Click on the Add Theme Layout button

On the next page, select Location: Place Archive.

After saving these settings, click on Launch Beaver Builder. We will add an empty row with 1 column layout.
Width: Full Width
Background color: #577196

We will add an Archive title to it.

Now, let’s add a row with a two-column layout.
Width: Full Width
Content Width: Full Width

Next, on the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

On the right column, we will drag the GD > Map block.

We will keep all the settings default for the GD > Map. Let’s give it some height, and I have decided to give it a height of 100vh.

Add the following style in the theme customizer from  Appearance => Customize => Add CSS.

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

After this, the Listing Archive page is ready.

Another option is to use the GD > Simple Archive block, as explained in this tutorial on building a Directory Website with Elementor.

For the search page, we repeat the same process.

Search page

Go to Beaver Builder > Themer Layout > Add new and select
Title: GD Search
Type: Themer Layout
Click on the Add Theme Layout button

Copy all the content of the GD Archive Themer Layout template and paste it into the GD Search Themer Layout template.

Now Go to Geodirectory > Settings > General > Pages and in the Search Page Themer Layout select GD Search

So now our GD Search and Archive pages are ready.

4. Beaver Builder Directory Website single Listing page design

Go to Beaver Builder > Themer Layout > Add new and select
Title: GD Details
Type: Themer Layout
Layout: Singular
Click on the Add Themer Layout button.

On the next page, select Location: All places

After saving these settings, click on Launch Beaver Builder. We will add an empty row with 1 column layout.
Width: Full Width
Content Width: Full Width
Padding: 0

First, add an image slider at the top of the Listing Detail page.

We will drag the GD > Post Image block in this container with the following settings

Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

Now let’s add a row with two columns layout.

Now, let’s individually add all required GD Detail page shortcodes on the left column.

Which includes GD > post Title, GD > Single Taxonomies, GD > Single Tabs, and GD > Single Next Prev.

We will add GD > Author Action and GD > Output Location block on the right column.

After doing it,, our Listing Detail page is complete.

Adding Premium Features to your Beaver Builder Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as Restricting the number of pictures for free listings while allowing more images for paid listings and more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Follow this tutorial for a step-by-step approach: Tutorial: How to create a directory website.

This generic tutorial can be adapted to any theme or page builder.

The possibilities are limitless.

Here’s a step-by-step guide to building a Directory Website using the Neve theme and Otter blocks plugin:

1. Install the Neve theme
2. Install and setup GeoDirectory
3. Install the Otter plugin
4. Design the Directory Website using the Neve theme and the Gutenberg Editor

The Neve Theme, when used alongside the GeoDirectory Plugin and the Otter Plugin, provides a comprehensive and adaptable platform for developing a sophisticated online directory.

Utilizing this combination, users can effortlessly incorporate location-centric functionalities, refine layout configurations, and add dynamic content blocks, guaranteeing a user-friendly and immersive interface.

This cohesive system empowers web developers and designers to construct a top-tier directory website that caters to specific industry demands or wider community requirements.

Let’s delve into the specifics of how this can be achieved.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the Neve Theme
  2. Install Otter plugin
  3. Install GeoDirectory
  4. GeoDirectory Install Wizard
     • Chosing the Map System
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Neve Directory Website
  1. The Home page design
     • The Logo
     • The Navigation Menu
     • The Typography
     • The Content
  2. The Listings and Search page design
  3. The single Listing page design

Installing Theme and Plugins.

1. Install the Neve Theme

We need to install a Theme, and for this tutorial, you will install the Neve Theme.

Go to Appearance >> Themes

Select Add New, Install, and Activate the Neve Theme.

2. Install the Otter plugin

The default Gutenberg plugin is not enough to style a template so we will install the Otter plugin.

This plugin provides customized blocks that are better than the default and will help you design the page templates.

Go to Plugins >> Add new.

Search for Otter. Install it and Activate it.

You can Skip all steps of the Setup Wizard.

3. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

4. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

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.

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

Click on the Generate Key button and follow the steps of 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.

We will set Philadelphia as the default city.

You can use whatever location you need.

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 registration 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 Neve Directory Website

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Neve Suite of tools.

1. Neve Directory Home page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Logo

First thing first, we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

After designing your logo, go to Appearance > Customize > Header, click the Change logo link, and upload your PNG file. Skip cropping (or crop the image as needed), in Logo Layout select the option Logo and click publish.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Main” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login
7. Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

The Typography

Now let’s define the Typography for the website text font and size. I am setting a global Font Family, Font Weight, and Font Size that will be applied to all site text.

we will go to the Appearance > Customiser > Typography > General > Body. we will set the 
Font Family: Inter 
Additional Font Varients: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
Transform: None
Weight: 400
Font Size: 16
Line Height: 1.7
Font Family: Arial, Helvetica, sans-serif

From Appearance > Layout > Pages set the Header Layout: Cover

The Content

I will start building this page from scratch using the Otter plugin.

We need a hero header on the homepage for that, let’s add a Row block provided by WordPress.

We will add a Section block with a full-size Layout.

Verticle alignment: Align the middle (shown in the screenshot) in the Section block settings and set the Section Structure settings to.
Minimum Height: Custom
Custom Height: 600

Next, check the block setting and set the Background image.

For the Hero Section, we will need an image, and we will download a free image from Pexels.com (Thanks, @rachel-claire).

Select Background overlay settings, set
Overlay Opacity: 50
Background Overlay Color: #000000 (Black)

Hero image overlay color settings

Now that we have made the hero image darker, we can add text.

Click the center of the image (a plus button is barely visible). This will allow you to select a new block. Add a Section block.
Click the center of the image again and add an “Advanced Heading” block.
In the Text block, add text like: “Find The Best Restaurant Philadelphia”.

Block select H1 as HTML Tag. Text Alignment Center. (shown in the screenshot.)

In the Advanced Heading block style settings
Font Size: 48
Font Transform: Capitalize
Text Color: #FFFFFF

At this point, we can add the search form to the hero section of our Neve directory website.
Click on the + button at the lower-right corner of the Title Section to add a new section.
In order to add GD search on the homepage header, Drag the GD > Search block inside the hero container.

Now let’s add the following settings to the parent Section block.
In the Structure settings set
Maximum Content Width: 1170
Horizontal Align: Center

Now we will add some space below the hero section. Let’s use a spacer block and set height = 40.

It’s time to add a few more required sections to the homepage, click on the plus icon and add a Section block with full-size Layout.

Change the Section block settings and update the Section Structure settings to
Maximum Content Width: 1170 and Horizontal Align: Center.

Now we will add an empty section below the hero header and add the GD > Categories block in that grid.

Set block options to the following
Design type: Image Background
Row Items: 4
Enable Use Category Image

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image

Now, let’s proceed to add the third section to our website. we will call it “Recent Business Listing“.
Click on the plus icon and search for ‘Advanced Heading‘ and once added, configure the text settings as follows: Set the HTML tag to H3 and align it to the center.

Add a GD > Listing block by clicking on the plus icon and then accessing the block settings. Make sure to enable the Show Advanced Settings option.

In the block Style tab, please update the Layout: Grid View (Four Columns).

Change the number of posts to show: 8 and ensure that you check the ‘Enable location filter‘ option and set the Sort By: Latest.

Now let’s add an empty Column with Content and Wide to 100.

Add the GD > Map block to it and keep the settings to default.

Congratulations! Your homepage is Completed.

2. Neve Directory Website Listings and Search page design

Listings page

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will customize the layout of these pages a bit.

The listing and search pages are mostly identical so we create it once and just copy the layout on the other page.

We decided the Listing page layout would be the listings on the left, and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template.

we will set the page settings to the following
Sidebar Layout: No Sidebar
Footer Widget: Default
Content Container: Full Width

Now, add a Section block with a 1:1 layout.

Now on the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

In the right column, drag the GD > Map block, and we’ll leave all the settings at their default settings. However, we’ll set the height of the GD > Map block to 100vh.

To give it a final touch we will add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Since the Neve theme has a minor compatibility issue with the GD > Archive page title. we will create a title container at the top of this page.

we will drag an empty section and set the block setting to
Background: #444444
Padding: 50 px, 20 px, 50 px, 20 px
we will drag the Archive title block inside it.

After this, the Listing Archive page is now ready.

Another option is to use the GD > Simple Archive block as explained in this tutorial on how to Build a Directory Website with Elementor.

For the search page, we repeat the same process.

Search page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Search page template

Remove all the content from this GD Search page template.

Copy all the content of the GD Archive page and paste it into the GD Search page.

So now our GD Search and Archive page is ready.

3. Neve Directory Website single Listing page design

Now to edit and customize the GD Detail page, You can go to Geodirectory > Settings > General > Pages > Click on edit GD Detail page template.

In this template, you will already find default content generated by Geodirectory.
we will remove all these default content and add a new Section block.

First, let’s add an image slider at the top of the Listing Details page.

we will drag the GD > Post Image block in this container with the following settings

Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

Now we will add one more Section block below it with a 2:1 layout.

We will change the Section block settings and update the Section Structure settings to Maximum Content Width: 1170 and Horizontal Align: Center

Now let’s add all the required GD Detail page shortcodes on the left column one by one.

Which includes GD > Post Title, GD > Single Taxonomies, and GD > Single Tabs.
On the right column, we will add GD > Author Action and GD > Output Location block.

Now let’s add a class( single-gd-section ) to this entire parent section to give it a final touch.

Finally, add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

After doing so, our Listing Details page has been completed.

Adding Premium Features to your Neve Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Begin building your site today with this detailed guide: Your guide to building a directory website. This is a generic tutorial that can be adapted to any theme or page builder.

The possibilities are endless.

Here’s a step-by-step guide to building a Directory Website using the Ollie theme for WordPress:

1. Install the Ollie theme
2. Install and setup GeoDirectory
3. Design the Directory Website using the OllieWP theme and the Gutenberg Editor

GeoDirectory is fully compatible with FSE Block Themes like Ollie, so we won’t need a page builder or an extra blocks plugin, in this case.

GeoDirectory offers a robust and flexible solution for crafting a dynamic online directory using any theme or page builder.

In this tutorial, we will show how to build a directory website with the OllieWP Theme in combination with the GeoDirectory Plugin.

This duo allows users to seamlessly integrate location-based features, customize layout designs, and incorporate interactive content blocks, ensuring an intuitive and engaging user experience.

With this integrated approach, web developers and designers can easily achieve a professional-grade directory site tailored to specific niche markets or broader community needs.

Let’s see how we can do that in detail.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the OllieWP Theme
  2. Install GeoDirectory
  3. GeoDirectory Install Wizard
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the OllieWP Directory Website
  1. The Home page design
     • The Logo
     • The Navigation Menu
     • The Content
  2. The Listings and Search page design
  3. The single Listing page design

Installing Theme and Plugins.

1. Install the OllieWP Theme

We need to install a Theme, and for this tutorial, you will install the OllieWP Theme.

Go to Appearance >> Themes

Select Add New, Install, and Activate the OllieWP Theme.

2. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

3. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

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.

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

Click on the Generate Key button and follow the steps of 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.

We will set Philadelphia as the default city.

You can use whatever location you need.

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 OllieWP Directory Website

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the OllieWP Suite of tools.

1. OllieWP Directory Home page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Editor > Pages > Home and click on the edit button.

The Logo

First thing first, we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

The Navigation Menu

After creating and adding the logo, go to Appearance > Editor, and create your menu.

Click on the menus on top and remove all existing ones.

Now let’s add a column block with a two-column layout.

In the left column add the site logo block.

Click on the main header container and from the block settings set the Background: #FFFFF

In the right column add the Navigation menu.

We added the following main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login/out

The Login/out block will only Login and Logout links based on the user login status.

The Content

I will start building this page from scratch using the OllieWP and Gutenberg blocks.

Go to Appearance > Editor > Design > Pages and click on the edit home page button.

we need a hero header on the homepage for that let’s remove all the content of this page and add a Cover block.

Next, check the block setting and set the Background image URL.

For the Hero Section, we need an image and we will download a free image from Pexels.com (Thanks, @rachel-claire).

we will add add following settings in this cover block

Content: 1200
Wide: 100
Opacity: 50
Padding & Margin: 0
Minimum Height of cover: 600

Now let’s add a header tag inside this cover block with the
Text: Find The Best Restaurant in Philadelphia

we will also give the header tag one additional class( heading-text-center ) to add some style to it.

Now let’s add the following style in the theme customiser.

.heading-text-center{
    text-align:center;
}

Now let’s add the GD > search block below this heading.

below it, let’s add some space using a spacer block with a Height of: 60

Now let’s add an empty column and put the GD > Categories block in it.

Set block options to the following
Design type: Image Background
Row Items: 3
Enable Use Category Image

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image

Below the hero section, add one more Column by clicking on the plus icon and add the GD > Listings blocks there.

Now we will do some needed settings in this GD > Listings block. we will set sorting: recent

Now let’s add an empty Column with Content and Wide to 100.

Add the GD > Map block in it and keep the settings to default.

Click on the Footer and OllieWP already provides a few prebuild Footer templates. I am selecting one of them.

Congratulations! Your homepage is Completed.

2. OllieWP Directory Website Listings and Search page design

Now you need to design two pages that are essential for any directory.

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will customize the layout of these pages a bit.

The listing and search pages are mostly identical so we create it once and just copy the layout on the other page.

We decided the Listing page layout would be the listings on the left, and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Listings page

Go to Appearance > Editor > Design > Templates and Click on Edit GD Archive page template

Remove all the content from this GD Archive page template.

Now let’s add an empty row.

Inside this add a two-column layout

Now on the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

On the right column, we will drag the GD > Map block.

we will keep all the settings default for the GD > Map. let’s give it some height and I have decided to give it the height of 100vh.

Add the following style in the theme customizer from  Appearance => Customize => Add CSS

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Now after this, the Listing Archive page is ready.

Another option is to use the GD > Simple Archive block as explained in this tutorial on how to Build a Directory Website with Elementor.

For the search page, we repeat the same process.

Search page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Search page template

Remove all the content from this GD Search page template.

Copy all the content of the GD Archive page and paste it into the GD Search page.

So now our GD Search and Archive page is ready.

3. OllieWP Directory Website single Listing page design

Now to edit and customize the GD Detail page, You can go to Appearance > Editor > Design > Templates and Click on Edit GD Single page template.

Add an empty column

Let’s first add an image slider at the top of the Listing Detail page. we will drag the GD > Post Image block in this container with the following settings

Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

Now let’s add an empty row with
Content: 1200
Wide: 100

add two columns inside of it.

Now let’s add all required GD Detail page shortcodes on the left column one by one.

Which includes GD > Single Taxonomies, GD > Single Tabs, and GD > Single Next Prev.

On the right column, we will add GD > Author Action and GD > Output Location block.

After doing it our Listing Detail page has been completed.

Adding Premium Features to your OllieWP Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Kickstart your directory website project with this advice: Start a directory website today.

The possibilities are limitless.

Here’s a step-by-step guide to building a Directory Website using the Generatepress theme and Generatepress blocks plugin:

1. Install the Generatepress theme
2. Install and setup GeoDirectory
3. Install the GenerateBlocks plugin
4. Design the Directory Website using the Generatepress theme and the Gutenberg Editor

Generatepress Theme in combination with the GeoDirectory Plugin and a GenerateBlocks Plugin, offers a robust and flexible solution for crafting a dynamic online directory.

This trio allows users to seamlessly integrate location-based features, customize layout designs, and incorporate interactive content blocks, ensuring an intuitive and engaging user experience.

With this integrated approach, web developers and designers can easily achieve a professional-grade directory site tailored to specific niche markets or broader community needs.

Let’s see how we can do that in detail.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the Generatepress Theme
  2. Install GenerateBlocks plugin
  3. Install GeoDirectory
  4. GeoDirectory Install Wizard
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Generatepress Directory Website
  1. The Home page design
     • The Logo
     • The Navigation Menu
     • The Typography
     • The Content
  2. The Listings and Search page design
  3. The single Listing page design

Installing Theme and Plugins.

1. Install the Generatepress Theme

We need to install a Theme, and for this tutorial, you will install the Generatepress Theme.

Go to Appearance >> Themes

Select Add New, Install, and Activate the Generatepress Theme.

2. Install GenerateBlocks plugin

The default Gutenberg plugin is not enough to style a template so we will install the GenerateBlocks plugin.

This plugin provides customized GenerateBlocks which are better than the default blocks and will help you design the page templates.

Go to Plugins >> Add new.

Search for GenerateBlocks. Install it and Activate it.

You can Skip all steps of the Setup Wizard.

3. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

4. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

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.

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

Click on the Generate Key button and follow the steps of 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.

We will set New York as the default city.

You can use whatever location you need.

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 Generatepress Directory Website

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Generatepress Suite of tools.

1. Generatepress Directory Home page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Logo

First thing first, we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

After designing your logo, go to Appearance > Customize > Header, click Logo > Select Logo, and upload your PNG file. Skip cropping (or crop the image as needed), in Logo Layout select the option Logo and click publish.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Main” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login
7. Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

The Typography

Now let’s define the Typography for the website text font and size. I am setting a global Font Family, Font Weight, and Font Size that will be applied to all site text.

we will go to the Appearance > Customiser > Typography > Body. we will set the Font Family: Poppines Category: sans-serif and Varient: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

The Content

I will start building this page from scratch using the GenerateBlocks plugin.

we need a hero header on the homepage for that let’s add a Grid block provided by the GenerateBlocks plugin.

we will set block alignment to wide.

In the Grid setting set the Layout setting to
Sidebar Layout: No sidebars
Footer Widget: Default
Content Container: Full Width
Disable Element: Content Title
Grid Item Width: 100

Next, check the block setting and set the Background image URL.

For the Hero Section, we need an image and we will download a free image from Pexels.com (Thanks, @rachel-claire).

On the spacing setting padding 100px on the Top and Bottom margins.

Now let’s add a header tag to add some text.

Text:: Find the best restaurants in Philadelphia
Size: Small
Appearance: Small Bold
Text Color: #FFFFFF

Inside the same Grid, we will add the GD > Search block with padding on top and bottom as 200px.

Now we will add an empty grid below the hero header and add the GD > Categories block in that grid.

Set block options to the following
Design type: Image Background
Row Items: 3
Enable Use Category Image

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image

There is no working setting I found in Generateblocks to make the grid into the content layout. we will add the home-container class to the Category parent grid.

Below the hero section, add one more Grid by clicking on the plus icon and add the GD > Listings blocks there.

Now we will do some needed settings in this GD > Listings block. we will set sorting: recent

Similarly, like the category block, we will add the home-container class to the Recent Listings parent grid.

Now let’s add an empty Grid and add GD > Map block in it and keep the settings to default.

Similarly, like others, we will add the home-container class to the GD > map parent grid.

Finally, add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.home-container{
	max-width:1200px;
	margin:auto;
}

Congratulations! Your homepage is Completed.

2. Generatepress Directory Website Listings and Search page design

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will customize the layout of these pages a bit.

The listing and search pages are mostly identical so we create it once and just copy the layout on the other page.

We decided the Listing page layout would be the listings on the left, and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Listings page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template.

we will set the page setting to the following
Sidebar Layout: No Sidebar
Footer Widget: Default
Content Container: Full Width

Now add an empty Grid with two columns.

Now on the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

On the right column, we will drag the GD > Map block.

we will keep all the settings default for the GD > Map. let’s give it some height and I have decided to give it the height of 150vh.

In order to make the archive page layout full-width. we will add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Now after this, the Listing Archive page is ready.

Another option is to use the GD > Simple Archive block as explained in this tutorial on how to Build a Directory Website with Elementor.

For the search page, we repeat the same process.

Search page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Search page template

Remove all the content from this GD Search page template.

Copy all the content of the GD Archive page and paste it into the GD Search page.

So now our GD Search and Archive page is ready.

3. Generatepress Directory Website single Listing page design

Now to edit and customize the GD Detail page, You can go to Geodirectory > Settings > General > Pages > Click on edit GD Detail page template.

In this template, you will already find default content generated by Geodirectory.

we will remove all these default content and add a new Grid.

Let’s first add an image slider at the top of the Listing Detail page. we will drag the GD > Post Image block in this container with the following settings

Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

Now we will add one more empty Grid block below it with a two-column layout.

we will add a class (single-details-container ) to this Grid from the block settings.

Now let’s add all required GD Detail page shortcodes on the left column one by one.

Which includes GD > Single Taxonomies, GD > Single Tabs, and GD > Single Next Prev.

On the right column, we will add GD > Author Action and GD > Output Location block.

Finally, add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

After doing it our Listing Detail page has been completed.

Adding Premium Features to your Generatepress Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Elevate your website with these key strategies: Key strategies for creating a directory website.

The possibilities are limitless.

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.

Quote from the FAQ section of the article: 7 Best WordPress Directory Plugins in 2023 (Ranked).

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

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Divi Theme.

1. Divi Directory Website Home Page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Settings > Reading > Homepage Settings and select your Home.

We will select the Posts page later.

The Logo

Avoid spending on a designer for your initial logo.

Many make the mistake of investing heavily before assessing the market fit.

Use apps like Canva for quick, affordable, and quality designs.

For an MVP, a Canva-designed logo suffices.

While initial perfection isn’t crucial, you can enhance the logo if your project succeeds.

Remember, an average logo isn’t the reason for project failures.

After designing your logo, go to Divi > Theme Options, click upload and select the logo you created with Canva.com.

Skip cropping (or crop the image as needed) and click Save changes in the upper-left corner of the screen.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Primary Menu” option.

In this example, we’ll only have the header navigation menu.

We added twelve links:

1. Home
2. About
3. Blog
4. Account
5. Profile (Visible for logged-in users)
6. Change Password (Visible for logged-in users)
7. Log out (Visible for logged-in users.)
8. Register (Visible for not logged in)
9. Login (Visible for not logged in)
10. Forgot Password? (Visible for not logged in)
11. Search Page
12. Add Listing

Links from UserWP Endpoints are dynamics, see parentheses above.

The Content

The Divi theme offers over 330 pre-made Layout packs.

For the purposes of this tutorial, I will choose a ready-to-use layout that allows for the creation of an attractive business directory without the tedious task of styling Divi modules.

For this tutorial, I chose premade Charter Divi Layout Pack.

Go to your homepage, click ‘Enable Visual Builder’, and then click ‘Browse Layouts’.

In the premade Layout library, select the ‘Charter Boat Landing Page’ and click ‘Use This Layout.

After the second text module, add the code module and click Add Shortcode.

Divi does not allow the use of Gutenberg blocks, but the creators of the GeoDirectory plug-in have implemented shortcode generator.

Thanks to which, you can easily add dynamic widgets using the Divi Code module.

So, the shortcode generator feature is your friend when creating a directory website in Divi.

Select “gd_search “(GD > Search)” from the drop-down list and click Copy shortcode.

The copied shortcode is in the clipboard. Paste the copied code into the code module. And click on the check mark icon.

Change the first text module content to “Search for”.

Change the header content in the content tab to Yacht Delivery. In the Design tab, change the h1 header font size to 70px and click the check mark.

Remove the “Book a Trip” button module.

So now our Hero section is completed.

In the next section, from the predefined Divi landing page template, change the content of the H2 header to “Listings Categories”.

Remove the text module under the heading (gold font) or change the content to your own, I will leave the Lorem Ipsum fragments to make the website design more interesting.

Delete the two-column row with photos and text, then add a new row with a code module. When adding, click ‘Add Shortcode’ in the same manner as you did for the search form.

Select “gd_categories “(GD > Categories)” from the drop-down list.

The options I changed in the shortcode generator to achieve the appearance of the category columns as shown below:

Filters tab:
Max cats to show per CPT: 3
Mark: Hide Empty
Card Design Tab:
Design Type: Image Background
Row positioning: Center
Card shadow: Large
Icon / Image Tab:
Mark: Use category image
Image size: Large

You can also copy the shortcode below and paste it into the code module.

Generated shortcode:

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image.

I also changed the category names to match the niche I chose for this tutorial.

We will use the next section to show the latest entries.

Change Our boats heading to the Latest Yacht providers. Delete the row after the heading and add a new section with Divi code module.

Similarly to the search form and categories, we need to generate a shortcode that will show the latest listings.

Select “gd_listings “(GD > Listings)” from the drop-down list.

The options I changed in the shortcode generator to achieve the appearance as shown below:

Filters tab:
Posts to show: 3
Design Tab:
Layout: Grid View (three Columns)

You can also copy the shortcode below and paste it into the code module.

Generated shortcode:[gd_listings post_type=”gd_place” post_limit=”3″ add_location_filter=”1″ sort_by=”az” title_tag=”h3″ layout=”3″ view_all_link=”1″ bottom_pagination=”1″ slide_interval=”5″ mb=”3″]

This section will not be needed, so delete it.

The next section will serve as our CTA section. Change the text to “Do you provide Yacht Delivery services?” In the design tab of the text module, change the size of the h2 header to 60px.

Edit button module text to add listing and set link to “/add-listing/places/”.

You can remove the next “FAQ” section, but I won’t, to make the project look more interesting.

I recommend populating the FAQ section with content related to the niche for which you are creating a business directory.

The more thematic content, the better for optimizing your website in search engines.

Similarly, with the next section, I will remove it in this guide, but you can use it to optimize your website for search engines.

I won’t remove the reviews section for a better homepage design. You can do as you wish.

Create Global footer

The homepage of the Divi Directory website is complete. Now, let’s create a global footer for our site.

Click save Section to library icon, in the section name field, write “global-footer” and click save to library. After all, Save Your Homepage layout with the Save button In the lower-right corner of the screen.

Delete the section we saved in the Divi library and save the project again.

Go to the WordPress dashboard, then click on Divi > Theme Builder, click Add Global Footer and select Build Global Footer.

Insert a new section, click Add From Library, choose the section we created before and click Use This Section.

The global footer section is built with photo, four text modules and social icons modules.

Change the content and links of text modules. I will use text modules to re-present the categories of my business directory on the website for easier navigation.

Enter the appropriate links in the Social Media Follow module.

Delete the empty section and save the global footer, then click close in the upper-right corner of the screen. 

Very important: when you return to the Divi theme Builder, click the Save Changes button.

The home page and global footer of the directory website are done.

Divi Directory Website Listings and Search page design

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default, but in this tutorial, we will make minor changes to the default pages.

We have to add a map, as well as a Text Module with a dynamic title.

Go to the ‘All Pages’ tab in the WordPress dashboard, find the ‘GD Archive’ page, click ‘Edit With Divi’, and then edit the existing content.

Delete the text module, add the two code modules.

Now, use the shortcode generator in the same way you did for generating shortcodes for categories or recent listings.

From the dropdown list, select, copy and paste the following shortcodes in order:

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

You can also paste the following shortcodes to code module.

In the first code module, we need to add the shortcode responsible for the map:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

Second code module:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"] <br>

[gd_notifications]

[gd_search bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_actions bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop layout=’2′ row_gap=” column_gap=” card_border=” card_shadow=” bg=” mt=” mr=” mb=” ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_paging show_advanced=” bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

Now, above the Divi code modules section, we need to add a new section with a Divi Heading Module.

To display the title of the archive pages, we will use Divi’s built-in option for displaying dynamic content.

In the content tab, hover over the heading field and click Use Dynamic content on the right. Select Page/Archive Title from the drop-down list.

Click check mark and save Your GD Archive Divi layout.

Search page

For the search page, we repeat a similar process, but as with creating the footer, we will use the Divi Theme Builder.

From the WordPress dashboard, navigate to Divi > Theme Builder. Click Add new template and then Build New Template.

You’ll see the Template settings. Under the Use on tab, find the Other section and select GD Search Results Page and click Create Template.

You’ll see a new Template responsible for the GD Search page.

Add Custom Body click Add from library in Your Existing page tab Click on GD Archive Layout and then use this Layout.

Click on the pencil icon and edit the Custom body. You do not have to do anything, just save Layout and save changes in Divi Builder Theme.

Just one more step and your directory website built with Divi will be fully functional.

Single listing page

A single listing page is responsible for displaying a single entry in your directory website.

Similar to the GD archive and Gd Search page, the page template was created by the GD install wizard.

Go to pages in Your WordPress dashboard and edit with Divi GD Details page.

Delete content and add two columns row as shown in the image below.

In the left code module, we will add shortcodes responsible for the post content and gallery.

In the right code module, we will add shortcodes that will be responsible for displaying post details such as phone number, address, social media links, and others.

You know how to use the shortcode generator, so generate, copy, and paste the following shortcodes. I have also prepared ready-to-copy shortcodes below.

Code module on the left

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

Code module on the right

[gd_output_location location="detail" list_style="wrap"]

Almost done!

Now, similar to when creating the GD archive page template, we need to add a Heading module that will be responsible for displaying the dynamic listing tittle.

Add a new Divi Heading module in the first column above the code module and set the Dynamic title as Page/Archive Title.

Click the check mark and save your layout. The single post page will look as follows.

Fine-tuning your Divi directory site

Your Divi directory website is almost ready, now we have set some options, tune up Your website.

Colors and Typography

The main color I chose for this website is a shade of navy blue. Hex code: #1e2d44.

Go to Theme Customizer > General Settings > Layout settings and change Divi theme accent color to: #1e2d44.

Now we have to change GeoDirectory plugin primary color.

In the theme customizer, click on AyeCode UI and set the primary color to: #1e2d44.

Now we need to set the global font. Go to Theme Customizer > General Settings > Typography and change the Header font to Cinzel.

As you can see, the font of the headers generated by WpGeodirectory did not change to the Cenzel font.

Go to the Additional CSS tab in the Theme customizer and paste the following CSS code.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

Change BootStrap Version

In the WordPress dashboard, click on Settings and AyeCode UI and change Version to BootStrap V5 and save.

Your Divi Directory website is done.

Maximize Your Divi Directory Potential with DiviGeo

This is a simple method to build a directory with GeoDirectory and Divi.

If you prefer not to tackle this project alone, or require something more sophisticated, don’t hesitate to reach out to me.

Visit my website, consider purchasing one of my pre-designed Divi Business GeoDirectory child theme DiviGeo, or hire me to create a unique website tailor-made for your needs.

Adding premium features to your Divi Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory, where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, or sell event tickets, or sell discount coupons.

Gain insights into the building process with these tips: Building a directory website: Tips and tricks.

The possibilities are Extensive.

How to Create a Directory Website with OceanWP?

Here’s a step-by-step guide to building a Directory Website using the OceanWP theme:

1. Install the OceanWP theme
2. Install and setup GeoDirectory
3. Install the Spectra Gutenberg Blocks Plugin
4. Design the Directory Website using the OceanWP theme and the Gutenberg Editor

OceanWP Theme in combination with the GeoDirectory Plugin and a Gutenberg Blocks Plugin, offers a robust and flexible solution for crafting a dynamic online directory.

This trio allows users to seamlessly integrate location-based features, customize layout designs, and incorporate interactive content blocks, ensuring an intuitive and engaging user experience.

With this integrated approach, web developers and designers can easily achieve a professional-grade directory site tailored to specific niche markets or broader community needs.

Let’s see how we can do that in detail.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the OceanWP Theme
  2. Install Spectra Blocks
  3. Install GeoDirectory
  4. GeoDirectory Install Wizard
     • Choosing the Map System (Google Maps or OpenStreetMap)
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the OceanWP Directory Website
  1. The Home page design
     • The Logo
     • The Navigation Menu
     • The Typography
     • The Content
  2. The Listings and Search page design
  3. The single Listing page design

Installing Theme and Plugins.

1. Install the OceanWP Theme

We need to install a Theme, and for this tutorial, you will install the OceanWP Theme.

Go to Appearance >> Themes

Select Add New, Install, and Activate the OceanWP Theme.

2. Install Spectra Blocks plugin

The default Gutenberg plugin is not enough to style a template so we will install the Spectra Blocks plugin. (check out this tutorial if you want to create a directory website with the Astra Theme and the Spectra Plugin instead)

This plugin provides customized Gutenberg blocks which are better than the default blocks and will help you design the page templates.

Go to Plugins >> Add new.

Search for Spectra Blocks. Install it and Activate it.

You can Skip all steps of the Setup Wizard.

3. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

4. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

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.

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

Click on the Generate Key button and follow the steps of 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.

We will set New York as the default city.

You can use whatever location you need.

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 OceanWP Directory Website

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the OceanWP Theme.

1. OceanWP Directory Website Home Page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Logo

First thing first, we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an initial MVP (minimum viable product), a logo crafted using Canva is adequate.

Canva offers a plethora of logo templates, and it’s okay if your first logo doesn’t epitomize perfection or originality.

As your project gains momentum, you always have the option to refine or completely revamp your logo.

Remember, a project’s success isn’t determined by the perfection of its logo.

Now go to Appearance > Customize > Header > Logo, click Select Logo, and upload your PNG file. Skip cropping (or crop the image as needed) and click publish, You can also set the logo max height and width if your logo is bigger in size.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Main” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Search Page
6. Login
7. Account > Profile > Forgot Password > Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account and profile links will only appear for logged-in users.

The Typography

Now let’s define the Typography for the website text font and size. I am setting a global Font Family, Font Weight, and Font Size that will be applied to all site text.

we will go to the Appearance > Customiser > Typography > Body. we will set the Font Family: Red Hat Text and Font Weight: Normal: 400

and in the Appearance > Customiser > Typography > main menu settings. we will set Font Weight: Medium 500, Font Size: 13px

Now we will go to the Appearance > Customiser > General Options > General Styling Primary Color: #ff914d and Hover Primary Color: #ff731c

The Content

I will start building this page from scratch using the Spactra Blocks plugin.

we need a hero header on the homepage for that let’s add a container block provided by the spectra blocks plugin.

Next, click Style from the top tabs. Select > Type Images as the Background Type.

For the Hero Section, we need an image and we will download a free image from Pexels.com (Thanks, @Kelly).

Click on the added section and select Full Width in the Content Width option as mentioned in the below screenshot.

From the style tab of the container block setting select Repeat to No Repeat and Size to Cover.

Drag and Drop a Heading Element inside the Hero Image.

It’s time to give a title to our Homepage Hero Image.

From the Style tab, change the text color to white (#FFFFFF) to improve the contrast and readability.

In this tutorial, I will use something simple like “Find the Best Restaurants in New York” You can add whatever slogan you want here.

Don’t forget to center the text using the alignment option.

In order to add GD search on the homepage header, Drag the GD > Search block inside the hero container.

Next, add some minimum height to this hero container. I will set it to 650 x 600 px in width and height and also make the container width: Boxed and content width: Boxed.

it’s time to remove this page title and extra space in the header section.

Click on the O icon on the right top of the page, just click on it. Inside that check General section set padding: disabled and inside Title selection Title: disabled

It’s time to add a few more required sections on the homepage, I will add a recent listings section now.

Below the hero section, add one more container by clicking on the plus icon and add the GD > Listings blocks there.

Now we will do some needed settings in this GD > Listings block. we will set sorting: recent

Now we will add a CTA to attract business owners to add their businesses. we will add an empty container and in the style setting.
let’s set a background.

Now Let’s add the container styles:

Overlay Type: Color
Image Overlay Color: #FF6900
Overlay Opacity: 0.3
Container Width: Full Width
Content Width: Boxed

Now we will also add a Call To Action block provided by spectra inside this container.

Typography for the CTA section.
Color: #fffff
Font Size: 32px

let’s add some style to the button.
Text Color: #000000
Background Color: #FFFFFF
Radius: 30px all sides
Padding: 10px, 30px, 10px, 30px

Let’s change the button text to Add Listing and the link to the Add Listing page link.

So now our CTA section is completed. we will add one more section the GD > Categories section below it.

Settings will be the following
Design type: Image Background
Row Items: 3
Enable Use Category Image

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image

There you go now let’s add the last section for social media link display. we will call it STAY IN TOUCH.

Add a new empty container with background #000000.

Now we will add a heading in this container with Alignment: Center and Heading: H3

I will add the text “Stay in Touch”
Color: #ffffff
Font Size: 24px

Let’s now add a paragraph below it to add some text.

Add some style
Text Color: #ffffff
Size: Small

Now we will add the social icon block below it.

In this social icon block add the following style
Size: 15px
Background size: 10px
Border Radius: 100
Color: #ffffff

Congratulations! Your homepage is Completed.

2. OceanWP Directory Website Listings and Search page design

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will customize the layout of these pages a bit.

The listing and search pages are mostly identical so we create it once and just copy the layout on the other page.

We decided the Listing page layout would be the listings on the left, and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Listings page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template.

Now add a container with two columns.

Now on the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

On the right column, we will drag the GD > Map block.

we will keep all the settings default for the GD > Map. let’s give it some height and I have decided to give it the height of 100vh.

Now just set the main container to full width by following below instructions given in the image below.

Now we will set the Archive page template to Full width

we will also adjust the header style section for all pages from the Theme Customizer > General Options > General Settings.
with Style
Heading Style: Centered
Padding: 20px
Background Color: #1e73be
Text Color: #ffffff

Now after this, the Listing Archive page is ready.

Another option is to use the GD > Simple Archive block as explained in this tutorial on how to Build a Directory Website with Elementor.

For the search page, we repeat the same process.

Search page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Search page template

Remove all the content from this GD Search page template.

Copy all the content of the GD Archive page and paste it into the GD Search page.

So now our GD Search and Archive page is ready.

3. OceanWP Directory Website single Listing page design

Now to edit and customize the GD Detail page, You can go to Geodirectory > Settings > General > Pages > Click on edit GD Detail page template.

In this template, you will already find default content generated by Geodirectory.

we will remove all these default content and add a new container.

Let’s first add an image slider at the top of the Listing Detail page. we will drag the GD > Post Image block in this container.

In this GD > Image block adjust the following settings.

Image Limit: 50

Show Limit: 2

Now let’s add one more container below this container. where we will add other required blocks of the Geodirectory Detail page.

Now let’s add all required GD Detail page shortcodes here one by one. Which includes GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

Now it’s time to add some sidebar widgets. so we will go to wp-admin > Appearance > Widgets.

Add GD > Author Action widget in the main sidebar. This widget will provide an Edit, Delete Listing option to the Listing Author.

Add one more widget GD > Output Location. This widget will show all major listing details that have been marked to be visible on the Detail page.

After doing this our Listing Detail page has been completed.

Adding premium features to your OceanWP Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Make your directory website stand out by following this guide: Create a professional directory website.

The possibilities are limitless.