The World’s Most Advanced And Scalable WordPress Directory Plugin

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.

What’s the best way to build a Directory Website using the Astra Theme?

The best way to create a directory website using the Astra Theme is by using the GeoDirectory Plugin and the Spectra Blocks Plugin. A great way to build a powerful and customizable online directory.

Here’s a step-by-step guide to building a Directory Website using the Astra theme and their Spectra Website Builder Plugin

1. Install the Astra theme
2. Install Spectra Blocks
3. Install and set up GeoDirectory
4. Design the Directory Website using the Astra theme and Spectra Block

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

In this tutorial, we will:

• Install and set up the theme and plugins
  1. Install the Astra Theme
  2. Install Spectra Blocks Plugin
  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 Astra 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 Astra Theme

First, you will need to install a Theme, and for this tutorial, you will install the Astra theme.

Go to Appearance >> Themes

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

2. Install the Spectra Blocks plugin

Now you will need to install the Spectra Blocks plugin. This plugin provides more options to design the page using Gutenberg blocks.

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

Last but not least, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we are done installing plugins for now.

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 Google Maps.

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. We will leave the default city unchanged.

GeoDirectory uses 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 UsersWP, a user registration plugin that enables users to register and log in to your website.

This is needed to allow users to add and edit their listings. It will also create user profiles where users can find their listings, reviews, and other relevant information.

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 in the installation wizard is to add 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 Astra Directory Website

Now that we have installed the theme, plugins, and completed the preliminary setup of GeoDirectory, we can start designing our Directory Website with Astra.

1. Astra 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 purpose.

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

The 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 web directory business is investing too much time and money before testing the product market fit.

You can design a logo in just five minutes with an app like Canva, which is surprisingly affordable and effective.

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 isn’t as perfect or original as you believe it should be.

If your project gains traction, you can always invest in improving it or make radical changes later.

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

After designing your logo, go to Appearance > Customize > Site Identity, click Select Logo, and upload your PNG file. Skip cropping (or crop the image as needed) 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 “Header” 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 links:

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

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out 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.

The Content

The Spectra block plugin provides many pre-built page templates. You can access them by clicking the Template Kits button at the top of the edit page screen.
You can use these page templates or a specific pattern for building your site pages.

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

We need a hero header on the homepage; let’s add a container block provided by the Spectra Blocks plugin.

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

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

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

Upload your image and select Repeat to No Repeat and Size to Cover.

The image needs an overlay, or any text on top won’t have sufficient contrast and will be difficult to read.
Select Overlay Type: Color, Color: #1E293B, and Opacity: 0.3

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

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 a simple example, such as “Find the Best Restaurant in Philadelphia.” You can add whatever slogan you want here. Don’t forget to center the text using the alignment option.

To add the GD search to the homepage header, drag the GD > Search block into the hero container.

Next, add some minimum height to this hero container. I will set the height and width to 800px, and also make the container’s width full width and its content width to Boxed.

Now the homepage header looks like this with the page title and some extra space.

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

Click on the page title, and you will see an Eye icon; click on it to hide the page title and remove the extra space.

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

Below the hero section, click the plus icon to add another container, then add the GD > Categories blocks there.

Now we will set up some necessary configurations in this GD > category block. We will set the Design type to Image Background, with 4 Row Items, and enable the use category image setting.

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

Each category has an option to set a default image

Now is the time to add some padding to this new container. So you can click on the outer container and set the required padding from the Style section. I am giving it 70px padding from top and bottom.

Now, quickly, we will add a few more containers. I will add recent listings below the category section using the GD > Listings widget.
The settings to be changed are:

In Filters > Post to Show = 4
In Sorting > Sort by = latest
In Design > Layout = Grid View (four columns)
Wrappers Styles > Margin Top = 5

Let’s add some maps there so users can sort out listings with different filters and check them out on the map.

Let’s use GD > Map with the following settings:

Map Type: Directory Map
Map Options: Enable all of them

Let’s add some style by clicking on the styles tab and setting the width to 100% and the height to 600px to ensure it’s well displayed.

We will also make the map container full-width to make it look wider and look good.

Click on the outer container of the map, and in the general settings, set Container Width: Full Width and Content Width: Full Width.

Now let’s add one more container to show recent posts. You can use the Post Grid block container provided by the Spectra Blocks plugin.

Congratulations! Your homepage is completed.

If you want, you can add multiple other containers or CTA.

2. Astra 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 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 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, in the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search to the 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 provide it with the height of 100vh.

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

Now, after this, the Listing Archive page is ready.

Astra’s free version has limited settings, so you might need the below CSS snippet to make the left container content equal in size to the correct map container. You can paste it into your theme customizer from wp-admin > Appearance > Customise

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

There is an even easier way. If you set your page to full width, you can add the GD > Simple Archive Block as explained in our tutorial 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. Astra 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 this default content and add a container with the setting Container width: Full Width and Content Width: Full Width.

Now let’s add an image slider at the top of the Listing Detail page. We will drag the GD > Post Image block into this container.

We will set the Image Limit to 10 and Show limit to 1, so only a single image gets displayed on each slide.

Now, let’s add another container below this one, where we’ll place the other required blocks of the Geodirectory Detail page.

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

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

Add the GD > Author Action widget in the primary sidebar. This widget will provide an Edit and 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 Astra 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, and 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 ad 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.

Develop your perfect directory site with this comprehensive resource: Crafting your directory website: A comprehensive guide.

The possibilities are endless.