How to create best directory site and monetize it

There are many types and ways to set business directory. Today we will explain how to create user submit business directory with locator. You can use such directory for many purposes. For example, users can add information about their services, products, deals, etc. Also, I will show how to create search filters and map filters + extended post layout.

This tutorial is made for our products. You must have one of our wordpress theme to use information from this tutorial

You can see also our video for many tips from this article.

Sometimes, this tutorial will look like too much things to setup and hard to understand, but it describes different functions and extended customization. Usually, you don’t need to setup all of these things, just 2-3 steps. To make process more easy, I divide all functions on several logical parts.

For example, you want to create a directory of private language learning schools. Each school will have such info: language, hourly rate, availability for distance learning, location. Also each teacher has contact information, image, description and name.

So, what functions you should have for such directory? In most cases, these are: user submit, directory or catalog of all teachers and search filters, so, other users can easily find teacher with search filters, teacher profile, contact form for each school.

First of all, we need to configure our field. All data will be stored as custom fields, so, you must be familar with them. Check codex if you don’t know how custom fields are working.

I recommend to divide all your fields on two types. Those which you will use for search filters and for additional data (for example, for video, screenshots, maybe contact information). For search fields – we will use bundled MDTF plugin. We have separate docs for plugin, but let me show you some examples.

Search filters

MDTF has filter section, filters and filter categories. Each filter is like label-value pair. For example, {English language -> yes or no} is filter. Filter section is like set of filters with common heading. For example, Language section.

filter

According to our example, we will have such structure

  1. Filter section – Language with 4 filters (each language as filter)
  2. Filter section – Distance learning with 1 filter
  3. Filter section – Hourly rate with 1 filter

Now, create filter category. All search filter section must be in one category. If you have different products on site (for example, directory of teachers, directory of schools, etc) and each product has it’s own set of filters, you can create different filter categories. In our example, we will add only one category – teachers

So, create 3 filter section. Place filters in each section. When you create each filter, there is a field “Item meta key”. it’s very important info, copy it each time, because you need to use the same key for comparison charts and for user submit later. Create the same fields and types, which you will use later for user submit form.

langmdtf

Now, important settings for each field. Sometimes you already has some plugin which added custom field data to post. So, if you want to use data from existed custom field – you can Reflect value from meta key.

langmdftype

For numeric field like price – use range slider type.

Note. If each post has price (for example, it can be hourly rate of each teacher) – I recommend to use Post offer section  panel. Then, you can reflect key rehub_main_product_price. Also, don’t forget to set your price pattern in theme option – localization.

Ok. All filters and sections are ready, now, it’s time to place search form to our sidebar or page.

MDTF has two possible ways: as widget in sidebar or as shortcode (you can place it in any place of site).

For example, we will add form as widget. Go to Appearance – Widget and add MTDF widget to sidebar. Add title, choose teacher category, other settings can be default, except three most important part: Results output page link, Results output template, Custom reset link/url.

Results output page link is a link of page where users can get search results after filtering. Reset link – in most cases the same as output page link. Output template – is theme template which will be used for design of output. Other words, output link – is where to show, output template – is how it will look.

Rehub theme has tons of different ways to show search results. As list, grid, columns, as custom table, charts, list of reviews, etc. You can know all of them from docs

Most easy way is to add content module on page with visual composer For Re:direct theme, you can use Post with small thumbs or Posts grids in columns module. Just put it on page and copy link of this page.

If you want to configure everything which will show on page – I think it’s better to use table constructor

Now, save this page and copy page link.

Return to MDTF widget settings. And place this link of page where you have post module to Result output page and in Custom reset link/url. For output template place word self 

Tip. If you want to have search filters not across whole site, but just on one page – place MDTF widget in MDTF sidebar area instead Sidebar area. Then, on output page, choose MDTF output page template in page attributes

After all, I will have such widget

filterwidget

Instead of widget, you can create shortcode. Logic is the same. One good feature of shortcode is that you can choose design and you can hide/show some filters.

hourlyshort

Tip
Usually, even if I add form in widget, I also make shortcode form and choose defaultmobile template for shortcode. Then I place shortcode in top of page. Such shortcode will be visible only on mobiles. I do this, because sidebar is under content on mobiles, so users will not see it. Such tip allows me to show duplicate search form before content on mobiles.

If you want to show sidebar only for specific pages, you can use plugin Woosidebar. Install it from Rehub->Plugins.

back to menu ↑

Adding additional data for post, screenshots, videos

Sometimes you need more data for post. For example, it can be set of screenshots or videos, some contact details, text data. So, you can install additional plugin which can control custom fields. One of my favorite is ACF. They have good docs how to add fields, so, you can use it.

For adding screenshot section and video section, you can use bundled Section of theme. Inside posts, you can add them in right panel

If you need to add this data from Frontend Form – use bundled RH Frontend PRO plugin, add custom field in form with key “rh_post_image_gallery” and type of field “Image gallery”. To add video links – add field “rh_post_image_videos”, type of field is textarea. Each video link must be from separate line. Theme supports autogeneration of previews and video frames for youtube and vimeo links.

 

back to menu ↑

Creating specification parts

Ok, now we added all functions to control meta data, it’s time to add some content. Add several posts and fill all search filters and additional data. Now, we will work on making specifications and better post layout. For this, install and activate our unique plugin WPSM Specification Fields. You can find this plugin in Rehub->Plugins tab. Note, that link is available only for official buyers and you need to register your license in Rehub->Registration tab.

After activating, you will find 2 tabs in wordpress panel: Specification and Layout tabs. Layout tabs also have subtab – Assign layout. 

Specifications are like sections on your site which shows different part of information which are based on meta fields, taxonomies, etc.

directory3

Each line of specification part has different type. Divide each logical part with Section heading and line dividers.

Meta values

The most important type is meta value. As I wrote early, when you create meta panels or search fields, you must copy it’s key. Here we will use these keys. You can control also labels, customize font for each line of meta keys.

directory4

Also, each meta line has several types of meta values.

Single value – is like text value. If you use textfield, textarea, single value select field – you need this type

True/false – is for checkboxes, radiobuttons or any other type of fields which can have true/false value. On frontend such value will be rendered as icon.

Multiple ACF meta value – if you use ACF, you will find that some of their fields can have multiple choices. For example, multiple select field, multiple choice checkbox. If you use “single value” type for such data – you will see just word “Array” on your site, because data is stored as array in such fields. So, you need to use this type to get data from such meta field.

Post author user meta – this is if you need to show some of additional user meta values (for example, to show contact data). Each wordpress user has some default meta keys: first_name, last_name, nickname, description

Post author buddypress user meta – the same as previous, but will get data from Buddypress Xprofile field (use it if you use Buddypress).

Note
For geting data from MDTF you can use special MDTF field type, which gets data from whole section. Just choose title of MDTF section and plugin will use it’s ID. This is help you to save a lot of time

Photo and video group

As I recommended early, if you want to add separate specification part with video and screenshots as on my demo, you need to use Photogroup and video group. If you add screenshots in field “rh_post_image_gallery” like described above – just choose Photogroup and add rh_post_image_gallery field. Fo video group – use field rh_post_image_video.

After user submit screenshots and video urls, you will see them in right panel inside post, so, you can change or delete them.

Photo and video group also support other plugins. For example, Photogroup also supports fields which store data as Attachment ID or as arrays of urls, multidimensional arrays with pairs url and title

Map section

This is simple field which generates map based on location OR on longitute, latitude. If you use map field from MDTF and use medafi_rhmap key as I recommended, you can use here longitude meta key as medafi_rhmap_longitude and latitude key as medafi_rhmap_latitude

Pros and cons

This field can be useful if you want to create benefits/pros and cons/featured list. Such lists must be added from textarea and each item must be added as new line. Plugin will generate something like

directory5

back to menu ↑

Creating Post layout

Once you created specifications parts, you can use them inside a post. Each specification part has shortcode in the end. If you copy shortcode to post, plugin will render this part for current post. You can also grab specification from another post. For this – add postid. Example, [wpsm_specification_builder id=63 postid=12]

But I have much better sollution for you instead of copying shortcode to each post. it’s time to create Layout Tabs. Example of such tabs

directory6

So, create tabs and place specification shortcode in content of tab

directory2

directory7

As you see, I inserted shortcode to special field. This field supports any shortcode, you can use even those which are not from plugin.

For example, theme has shortcode

which generates review box. You can use it to create separate review tab.

You can also create separate price comparison tab from our plugins Content Egg. We have tutorial for this  In this tutorial we used woocommerce, but with help of layout tabs, you can use the same for posts. So, you have unlimited possibilities, because all themes and plugins have many own shortcodes.

After creating tabs, you need to assign tab layout to post. You can assign different tabs for different post types. Settings are simple – you need to choose post layout and choose post type. Important thing is how to show them. You can add before post content, after and place inside content (content of post will be inside first tab)

Tips and problems

  1. Sometimes, when you choose icon field – icon helper is hidden. Try to save draft of such tab layout and choose again
  2. Autocontents. As you see from screenshot, I placed list of content parts. This is work of our another good function of theme – autocontents shortcode. To do the same, place shortcode

To create autocontents from h2 heading of post. If you want to show list as line, use

back to menu ↑

Adding User submit

First of all, install and activate RH Frontend PRO plugin. You can find this plugin in Rehub->Plugins tab. Note, that link is available only for official buyers and you need to register your license in Rehub->Registration tab. You can use any other plugin for user submit with support of meta fields. For example, WPUF plugin. Logic of settings will be the same for any plugin. You just need to use the same meta keys as you set in MDTF and ACF.

Create form. Plugins detects some default post data and taxonomies such as title, content, categories. Configure them. I prefer to disable Excerpt field.

According to our data for each teacher, I think submit form must have such fields:

Title – will be used for teacher’s name

Feature post image – will be used for teacher’s photo

Post body – will be description

Meta data

To add meta data, use next part

directory8

After adding key and label, you must choose correct type of field. it must be the same as you set in MDTF or ACF. I mean, if you set checkbox in MDTF, you also need to choose checkbox type in form. For example:

Language. Language field can be as select field or as sets of checkboxes.

checks

If your search criteria has only one value among set of values – use select. In our case, each teacher can have lessons for several languages, so, it’s better to have set of checkboxes. For example, you will have checkboxes for next languages: english, german, french, spanish, greek, italian, etc

How to synchronize data for MDTF and submit form

To do this, use the same meta keys which you used in MDTF or ACF. Also, post must have correct MDTF category field. Here steps how to make this.

First of all, you must find MDTF category ID for your filters which you want to assign to post.

You can know it here

mass_filter_id

Then, in form, you need to add hidden field. For this, add custom key with any label and key as meta_data_filter_cat Make this field as text field and disable checkbox in Enabled and Required

Then add fallback value as ID of MDTF category

directory10

directory11

How to add user submit for main offer of post

If you want to have main offer in post like on demo

directory9

You need to add custom field with key rehub_offer_product_price

User can add price with currency, theme will clean this price when you save post. To make this correct, you must have correct price pattern. Set it in theme option – localization. If you want to have search filter for this field – add range slider to MDTF filters and reflect field rehub_main_product_price 

How to add screenshots and video fields to user submit

If you need to add screenshots or video section –  add custom field in form with key “rh_post_image_gallery” and type of field “Image gallery”. To add video links – add field “rh_post_image_videos”, type of field is textarea. Each video link must be from separate line. Theme supports autogeneration of previews and video frames for youtube and vimeo links.

For map, you can add map field with key medafi_rhmap if you want to synchronize it with MDTF or use any of keys if you want just show map in post.

back to menu ↑

How to add locator and map search to site

If  you want to add locator to site, I recommend to install plugin Geo My WordPress which is compatible with theme (from 6.2.3 version of Rehub).  After setup, you should enable Post locator Add-on (if you want to add location to posts or Member addon if you want to add locations to users).

Setting for Geo My wordpress

First of all, go to Settings and enable Post types where you want to have location panel and add your google API key. Then, go to Forms and create new form. There are some important settings in form.

Page load results

Page Load features – this setting tab allows to change what will be rendered on first visit of page with form (other words, what you will see before search). If you want to place search form and search results on the same page – enable this option. If you plan to show search form in one page and results on another – disable this option

Search form tab

In search form template use one of template with Custom: prefix. This is special template for theme and it will have good design.  Also, don’t forget to choose correct post types. Also, if you want to add categories or tags in search form, use these options.

postlocator

Tip. In Distance Units – use only one of types. This prevents including in search form additional not useful select

Search results tab

Also, use one of template with Custom: prefix. Currently, there are Custom:list and Custom:table. List has predefined design, if you want to customize output template – use custom table template.

Use Results page – Same page if you want to see results on the same page. Use another page in cases when you use search form, for example, in global widget.

All other settings of form are not important and can be by default. You can play with them if you want.

How to use Custom:table output template and customize output

In search results – choose next template

postlocator2

Now, create page and choose Top:Table constructor in page attributes as template for page. Now you can customize your template. Here some docs about table constructor. Don’t forget that you can use shortcodes in table content. All Geo My WordPress shortcodes will work. You can see some examples in Geo My WordPress – Shortcodes.

Important thing – you must enable this option to prevent duplicate table

postlocator3

How to show search form and results on the same page

For this – use shortcode

Where 3 is ID of form. And enable Page Load features in Page load results. In search results tab, enable In results for Display map. 

How to divide form and results pages

You can see example here

For this – when you use location form, disable Page Load features in Page load results. In search results tab, enable Using shortcode for Display map. Create 2 pages – one will be for search form, second – for results. Choose second page in Results Page.

Now, to show search form – add shortcode

with ID of form. To show results and map, use shortcodes

You can place there shortcodes in different rows and add styling with visual composer. For example, to center search form on page, add class text-center to custom classes in row settings. To show map as full width of browser – use next type of row

postlocator4

Adding location field from frontend

If you want to add location from frontend, use RH Frontend PRO bundled plugin (get it from Rehub->Plugins) and add custom field with key medafi_rhmap. Such key will allow you to use data from location field also in search filters. Map field of plugin is already synchronized with location field of Geo My WordPress (from version 3.22 of plugin, if you have more old version – download actual version from Rehub-Plugins, delete old version and install new one)

Adding map in MDTF search results

MDTF has also option to sort data by location. But if you want to add this  for user submit, you need to change key for map in MDTF settings. When you added map filter type in MDTF – save filter, then change name of key to medafi_rhmap

directory2

Map search filter in MDTF is simple. it works after somebody make search. Check docs about this field and don’t forget to place map shortcode on page where you have search results. Also, to make map working, you need to set page ID in MDTF settings – advanced settings – Include Google Map JS on pages where you will use MDTF output with map.


How to add big header store locator form on homepage

custom_form_2

If you want to have the same module on page – do next. Use visual composer for page, enable “Page for layout builder” in page attributes, save draft of post, then enable next setting

form3

Click on classic mode button in visual composer and place next code

Click now to Backend editor button and configure vc module (upload your own image, change text). I use here

but you must use your own shortcode with correct ID. For settings of GMW Form – they are next

 

form_set1

form4

As you see, I disable page load features and use big fields form template. In Search results – choose page where you want to show results and choose output template. Page for results must have

in gmw map use your form ID

 

back to menu ↑

User registration, popup and profiles

Theme has very powerful user functions. In most cases, you don’t need additional plugins, just use theme functions. Docs for user functions. Sometimes, you may need to have powerful user profiles with friendship, badges, reputation, private messages. For such cases, use supported BuddyPress plugin. Check docs for more details. You can show author box in end of post if you enable this in theme option – global enable/disable. Or place shortcode

This can be used as vendor card in post.

back to menu ↑

Adding contact form with vendor

Currently, possible several ways.

Adding contact form with vendor of post

For this, install and activate free plugin Contact form 7.

Each author of post will be as vendor. By default, contact form will send data to admin of site, but you can add also several recepients, for example, you can send email also to author of post (vendor). For this, in settings of form add next shortcode

directory12

Check another mail tags which you can use in contact form.

After setup of form, copy it’s shortcode and use in Post Tab layout or place it in sidebar

Adding private message button for Buddypress

You can also add contact button which will go to private messages of Buddypress (so, you need to have BP activated + enabled Private Messaging in Settings – Buddypress. Next, add shortcode of button. You can find it in shortcode generator of theme. Instead of link of button, add name “buddypress”. Example

How to add contact form in sidebar

By default, if you set shortcode in sidebar, it will show on whole site. But what if you want to show it only on single pages? No proble, use widget Rehub: Show only in post. Everything that you add to this widget will be visible only on single pages.

back to menu ↑

Monetizing directory site

There are several common ways to monetize such sites. You can use just ads (check theme’s ads blocks in theme option – ads option). You can make paid submissions. You can create paid membership, etc.

Paid membership

There are several good plugins for creating paid membership. One of my favorite is S2Member plugin. One of good function of plugin – it allows to hide part of site by link. Also it has free version. Another good plugin is Ultimate Membership PRO ($30). You can use any plugin with theme. Just make sure that plugin can hide part of site based on link and hide content from non logged users. This gives you ability to get payment to access submit form for users. Or, you can take money from users, for example, for access to contact form with vendors. There are endless possibilities, if you have any unique idea, contact us and we will help to integrate it in theme or site

Paid packages submissions

From 3.0 of RH Frontend PRO version, you can sell post sumbit packages. For this, you need to have woocommerce. Then, go to plugin settings – Payment tab and follow instructions

How to create best directory site and monetize it
4.3 (86%) 10 votes

Want to get unique wordpress tips?

We won't rent or sell or spam your email. We promise!

Leave a Reply

10 Comments on "How to create best directory site and monetize it"

Notify of
avatar
Sort by:   newest | oldest | most voted
toma
Guest

Your theme need more child themes with some simple ideas for Niches, i am working in website for WordPress themes and plugins, may be i ll think to add this in my project.

Ahmed
Guest

can i let user put more than place in submit page ?

laura
Guest

Hi, I like the theme to create a directory of companies / business of my city. Is it possible to use this theme for this subjetct instead of using it for apps???

Thank you!
Laura

D
Guest

Love your work and your revendor theme.
Is it possible that you go more into travel for the future updates?
time based bookings, multi vendor support, places directory?

all the best!
d

Dreych
Guest

Geo My wordpress
on search form tab : taxonomies option is not displaying anything ? is there something wrong ?

wpDiscuz