Building WordPress Directory Website With BeaverBuilder

Building a Directory with BeaverBuilder

Building a WordPress directory has never been easier and the functionality of Beaverbuilder is opening up the options of building a beautiful functional directory so easy. The days of coding and messing with css is a thing of the past and using a page builder like Beaverbuilder is allowing a much faster and effeciant way of developing websites.

The tools i have used are:

Beaverbuilder Theme

BeaverBuilder Page builder Plugin

Beaver Themer

I  also use a couple of great third party plugins to add more features with Beaverbuilder:

Ultimate Addons For Beaver Builder   as well as PowerPack

Setting up your Template for Pages

When you are editing a page in the backend you have the options to add custom fields for each page.  I have added custom fields for a directory website i built that list travel destinations and the information I want to display on my page.

I added custom fields for  address, website, hours, Things to do ,  Facts, I even have custom fields to display below sidebar, above sidebar, above keywords and so fourth. The options are endless and you can create as many as you like.

1. Create Custom Fields on the first page

2. Create a New  Template in Beaver Themer ( You will create your page layout on this page when builder is active) What is awesome is you can drop a title  module  and select the title area to pull the data from your custom field(this is key)!

I like to use  UABB and use Infobox module for most of my content.  If you look to the right of your title you will see a + sign, click on it and the above window will open, this is where the magic happens. All you do is click on  Post custom field and  it will open a window that says key(below). All you do is type in the name of your custom field and save it!

3. Create a template in your Beaverbuilder child theme. I named mine Custom Field Page Page Template (page_custom_field_page.php) I also created a template to display the child pages on the parent page! Display Child Page Page Template (page_display_child_page.php) I assigned each template to the page i wanted, one for the parent pages, and one for  parents child where i display custom fields!

You will have to access the folder in your hosting account and create these new files in the beaverbuilder child theme folder.

Once you create the file you will need to add the code to display your template to display the custom field data.

View PHP code i used in page_custom_field_page.php

View PHP code i used for the page_display_child_page.php

Once you have added the code to display the template you create in themer layouts, you will save. Once saved you should be able to go to the page you created and find the  page attributes and assign the template to that page. (Remember if you import many pages into wordpress with your data in an excel file, you can bulk assign the template)

If you use this code be sure to change  'fl-theme-layout',
'p' => 7855 <---------  to  the correct page template you are going to use! You will find the page number when you click edit page layout in the  url.


How long did it take to build my directory?

What to expect?

I built a 1,500 page directory about 5 years ago and used PHP and alot of time to build my first large directory website.  I used spreadsheet to display my data and imported it into wordpress. This made importing the content fast and easy! Of course you learn things and get better at preparing in hind site. I was fairly happy using the old php and css method, but i wanted more! I wanted to take full control of my design and functionality!

After sitting for a few years and debating to transform this large directory website from Genesis to BeaverBuilder, it happened fast! Over the course of  2-3 days,  I was able to style the site the way I wanted it! I would discovery tools and ways to do what I wanted and it has been pretty easy to figure out! With very little PHP and CSS and have been able to achieve my goals building my directory.

One thing I wanted implement into my directory is maps! Instead of  having to code, it was easy and the same method as i used to pull the data from a custom field. I used the Beaverbuilder maps module and assigned the address custom field to it, wow magic!

Another function i wanted was to add a featured image to each listing, which was same method, i just used the photo module and assigned the feature image to it!

I started using BeaverBuilder a couple years ago and now have around 50 websites i have built for clients. So i know BeaverBuilder is a solid framework and possesses some powerful tools.  BeaverBuilder gets better and better every update and I can't wait to see what the future holds!

Need help building your wordpress directory with BeaverBuilder? Contact us today!

Leave a Comment