Video Transcript

Today we will show you how to build a City Directory Website, with a free WordPress Plugin

Where users can register and login

and they can submit listings from a front-end form.

Where listings can be search near a zip code or street address

and results are returned ordered by proximity.

Finally, where users can review listings.

Let’s get started.

1) Assuming you already have WordPress installed, from the dashboard hover over the Plugins menu and click on add new.

2) In the search plugin form, type GeoDirectory and hit enter.

3) Install the GeoDirectory plugin by clicking on the Install Now button

4) activate the plugin.

5) We also need a Google Maps API key, creating it is very simple, a link to the Google maps API key tutorial is available here.

6) For this demo we created an API key in advance, that we will copy…

and paste in the required field.

7) Now GeoDirectory is installed and you can set the default location for your free city directory. In this tutorial we will use New York City.

8) For GeoDirectory to work correctly, we still need to change the default permalinks. We suggest to use the post name option.

9) Now you can import the dummy data and get some examples to work on

or import your final categories and listings through our CSV file import option. In this demo we’ll show you how to import via CSV file.

10) To do this, we need a CSV file for our categories

and one for the listings.

11) The sample file can be downloaded from the import and export options page.

12) We will also need images for the listings

and map icons for the categories.

13) A link to the documentation for Import and Export options is available here.

14) Let’s proceed with the import. 1st of all, we must import categories.

Once the import is completed, the system will tell you where to upload the image files, make sure to take note of the folder path.

15) Now we can import the listings too.

After the import is completed, the system will tell you where to upload the image files, it should be the same folder previously noted down, but you should always double check.

16) It’s time to import the map icons for the categories and images for the listings. We’ll do that using a FTP client and we need to upload them on to the folder previously noted.

17) Here are our categories with icons

and here are our listings, with images.

18) Finally we can install the Supreme Directory Child Theme, but first we need to install our free Directory Starter, the parent theme.

19) Install it, but don’t activate it. Click on return to theme installer.

20) Next we need to install the Supreme Directory Child theme, you can download it for free from the GeoDirectory official website.

21) Click on Upload Theme, Then Browse and select the zip file from your desktop and click Install Now.

22) Finally Activate it.

23) We are almost done. We still need to add the Directory links to the main navigation. This is done via : GeoDirectory, Design, Navigation and selecting the menu location where we want to add the links.

24) The links are now visible in the menu.

25) The Home Page content below the featured image, can be edited with your favorite page builder. We used Beaver builder lite for our demo and you can see how its back-end looks like.  It’s super easy to get the job done.

26) Search results and listings pages are already setup

and so are the listing details pages.

That’s about it. Features are endless and you can extend GeoDirectory with several premium add-ons. Like the Location Manager to extend the directory beyond the default location or the Payment Manager that allows to collect Payments for featured listings.

We hope you enjoyed this tutorial, thanks for reading!