How to Build a Directory Listing Website Using Beaver Builder and GeoDirectory (Step-by-Step Guide)

Looking to create a directory website with a professional design and rich functionality—without writing a single line of code? This guide will walk you through how to build a full-featured directory website using Beaver Builder and GeoDirectory, just like in our video tutorial.

1. Set Up WordPress + Install GeoDirectory
2. Install Beaver Builder and Theme
3. Build Key Pages Using Beaver Builder
       * Header & Footer
       * Homepage
       * Archive Page
       * Search Page
       * Single Listing Page
4. Join Landing Page with Add Listings
5. Final Touches

Step 1: Set Up WordPress + Install GeoDirectorytep

Step 1: Set Up WordPress + Install GeoDirectory
First, ensure your WordPress site is live. Then:

• Go to Plugins > Add New, search for GeoDirectory, install, and activate it.
• Run the setup wizard to configure basic settings and import demo data.
• Install recommended free GeoDirectory add-ons.

Step 1 Full Video Tutorial (Watch & Follow Along)

2: Install Beaver Builder and Themer

• Upload and activate the Beaver Builder Pro and Beaver Themer plugins.
• These tools help you design and control every part of your website visually.

Step 2 Full Video Tutorial (Watch & Follow Along)

Step 3: Build Key Pages Using Beaver Builder

 Header & Footer

• Use Beaver Themer Layouts to create sticky, site-wide headers and footers.
• Customize layout, colors, logo, and menus.
• Add dropdown menus and adjust hover states and background styles.

Header and Footer Full Video Tutorial (Watch & Follow Along)

 Homepage

• Add a GD Map for listings.
• Below that, insert a GD Search bar.
• Add GD Category blocks to show directory categories.
• Display featured or latest listings using GD Listings.
• Add a blog section and an “Add Listing” call-to-action.

 Archive Page

• Create a custom archive layout for Places (or other CPTs).
• Add a title, search bar, and listing loop with pagination.
• Include a map on the side to visualize listings.

Homepage Full Video Tutorial (Watch & Follow Along)

Archive Page Full Video Tutorial (Watch & Follow Along)

 Search Page

• Use a similar layout as the archive page.
• Add GD Search, Loop Actions, Listings, Pagination, and Map.
• Assign the layout in GeoDirectory → Settings → Pages.

 Search Page Full Video Tutorial (Watch & Follow Along)

 Single Listing Page

• Design from scratch with a slider, rating, favorites, and tabs for info.
• Include location maps and Ninja Form for contact.

Single Listing Page Full Video Tutorial (Watch & Follow Along)

Step 4: Join Landing Page with Add Listings

• Create a “Join” page with sections: Hero Title, Description, and “Join Now” button.
• Add Pricing Boxes for Free & Premium listing packages.
• Configure packages in GeoDirectory CPT → Settings → Packages.
• Connect buttons to the respective “Add Listing” forms.

Step 5: Final Touches

• Update your navigation menu to include the Join page.
• Customize page colors, layout spacing, and responsiveness.
• Test the Add Listing flow for both free and paid users.

Full Video Tutorial (Watch & Follow Along)
For a complete visual walkthrough, watch our detailed video guide:
 Click here to watch on YouTube (edited) 

YouTube | Buddydevelopers

Complete Guide | How to Create a Directory Listing Website using Beaver Builder and GeoDirectory