Adding Geographic Capabilities via the GeoPlaces Theme

Exclusive offer: get 50% off this eBook here
WordPress Mobile Applications with PhoneGap

WordPress Mobile Applications with PhoneGap — Save 50%

A straightforward, example-based guide to leveraging your web development skills to build mobile applications using WordPress, jQuery, jQuery Mobile, and PhoneGap with this book and ebook.

$9.99    $5.00
by Yuxian Eugene Liang | January 2013 | Open Source

In this article, by Yuxian Eugene Liang, the author of WordPress Mobile Applications with PhoneGap, talks about creating a location-based directory via the GeoPlaces theme. It covers the setting up and addition of sample geographic data into your WordPress site. We'll add geographic capabilities to our WordPress site by leveraging on the GeoPlaces theme.

The major topics we will cover in this article are:

  • Introduction to the GeoPlaces theme

  • Populating the site with sample data from GeoPlaces

  • Managing place listings from the frontend side as well as the admin side of the site

For a start, we'll be using a premium theme called GeoPlaces, by Templatic. At the time of writing, a single user license is priced at USD 99 while a developer license is priced at USD 179. For the rest of this article we will be using the GeoPlaces theme to do the bulk of the heavy lifting of geographic functionalities, since Google Maps are built directly into the GeoPlaces theme.

Before we move into this article officially, you might be wondering where it will lead us. To begin with, since our mobile app's content is dependent on our WordPress site, we need to add basic content (in this case, place listings and other article-like information) to the site.

(For more resources related to this topic, see here.)

Introducing the GeoPlaces theme

The GeoPlaces theme (http://templatic.com/app-themes/geo-places-city-directory-WordPress-theme/), by Templatic (http://templatic.com), is a cool theme that allows you to create and manage a city directory website. For a live demo of the site, visit http://templatic.com/demos/?theme=geoplaces4.

An overview of the GeoPlaces theme

The GeoPlaces theme is created as an out-of-the-box solution for city directory websites. It allows end users to submit places and events to your site. Best of all, you can even monetize the site by charging a listing fee. Some of the powerful features include the following:

  • Widgetized homepage

  • Menu widgets

  • Featured events and listings

  • Custom fields

  • Payment options

  • Price packages page view

Let's now move on to the setting up of the theme.

Setting up the GeoPlaces theme

We'll start with the installation of the GeoPlaces theme.

Installation

The steps for installing the GeoPlaces theme are as follows:

  1. You will first have to purchase and download your theme (in a zip folder) from Templatic.

  2. Unzip the zipped file and place the GeoPlaces folder in your wp-content/themes folder.

  3. Log in to your WordPress site, which you have set up, and activate the theme. Alternatively, you can upload the theme by uploading the theme's zip folder via the admin interface, by going to Appearance | Install Themes | Upload.

  4. If everything goes well, you should see the following on the navigation bar of your admin page:

  5. If you see the previous screenshot in your navigation, than you are ready to move on to the next step.

Populating the site with sample data

After a successful installation of the theme, you can go ahead and play around with the site by creating sample data. GeoPlaces themes come with a nifty function that allows you to populate your site with sample data. Navigate to wp-admin/themes.php and you should see the following:

Notice the message box asking if you want to install and populate your site with sample data. Click on the large green button and sample data will automatically be populated. Once done, you should see the following:

You can choose to delete the sample data should you want to. But for now, let's leave the sample data for browsing purposes.

Playing with sample data

Now that we have populated the site with sample data, its time to explore it.

Checking out cities

With our site populated with sample data, let's take our WordPress site for a spin:

  1. First, navigate to your homepage; you should be greeted by a splash page that looks as follows:

  2. Now select New York and you will be taken to a page with a Google Map that looks like the following screenshot:

  3. GeoPlaces leverages on the Google Maps API to provide geographic capabilities to the theme.

  4. Feel free to click on the map and other places, such as Madison Square Park.

  5. If you click on Madison Square Park you will see a page that describes Madison Square Park. More importantly, on the right hand side of the page, you should see something like the following:

Notice the Address row? The address is derived from the Google Maps API. How does it work? Let's try adding a place to find out.

Adding a place from the frontend

Here's how we can add a "place" from the frontend of the site:

  1. To add a place, you must first sign in. Sign in from the current page by clicking on the Sign In link found at the top right-hand side of the page.

  2. Sign in with your credentials. Notice that you remain on the frontend of the site as opposed to the administration side. Now click on the Add place link found on the upper right-hand side of the webpage. You should see the following:

  3. You will be greeted by a long webpage that requires you to fill up various fields that are required for listing a page. You should take note of this, as shown in the following screenshot:

  4. Try typing Little Italy in the Address field and click on the Set address on map button. You should notice that the map is now marked, and the Address Latitude and Address Longitude fields are now filled up for you. Your screen for this part of the webpage should now look as follows:

  5. The geographically related fields are now filled up.

  6. Continue to fill up the other fields, such as the description of this listing, the type of Google map view, special offers, e-mail address, website, and other social media related fields. With these steps, you should have a new place listing in no time.

Adding a place from the admin side

What you have just done is added a place listing from the frontend, as an end user (although you are logged in as admin). So, how do you add a place listing from the admin side of your WordPress site?

  1. Firstly, you need to log in to your site if you have not yet done so.

  2. Next, navigate to your admin homepage, and go to Places | Add a Place. You will see a page that resembles the Create a New Post page.

  3. Scroll down further and you should notice that the forms filled here are exactly the same as those you see in the frontend of the site. For example, fields for the geographic information are also found on this page:

Adding a city from the admin side

To add a city, all you have to do is to log in to the admin side of the site via /wpadmin. Once logged in, go to GeoPlaces | Manage City and click on Add City. From there you'll be able to fill up the details of the city.

Summary

We saw how to manage our WordPress site, covering topics such as populating the site with sample data, adding place listings, and adding a city. You should have a general idea of the geographic capabilities of the theme and how to add a new placelisting. Notice how the theme takes the heavy lifting away by providing built-in geographic functionalities through the Google Maps API. We also understood how themes and plugins can be used to extend WordPress.

Resources for Article :


WordPress Mobile Applications with PhoneGap:


WordPress Mobile Applications with PhoneGap A straightforward, example-based guide to leveraging your web development skills to build mobile applications using WordPress, jQuery, jQuery Mobile, and PhoneGap with this book and ebook.
Published: November 2012
eBook Price: $9.99
Book Price: $19.99
See more
Select your format and quantity:

About the Author :


Yuxian Eugene Liang

Eugene enjoys solving difficult problems creatively in the form of building web applications using Python/Django and JavaScript/JQuery. He also enjoys doing research related to the areas of recommendation algorithms, link analysis, data visualization, data mining, information retrieval, business intelligence, and intelligent user interfaces. He has recently started a personal blog at http://www.liangeugene.com

Books From Packt


PhoneGap Mobile Application Development Cookbook
PhoneGap Mobile Application Development Cookbook

PhoneGap Beginner's Guide
PhoneGap Beginner's Guide

WordPress Top Plugins
WordPress Top Plugins

WordPress Mobile Web Development: Beginner's Guide
WordPress Mobile Web Development: Beginner's Guide

WordPress Complete
WordPress Complete

WordPress 3 Plugin Development Essentials
WordPress 3 Plugin Development Essentials

WordPress for Education
WordPress for Education

WordPress 3 Complete
WordPress 3 Complete


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
N
g
G
a
k
V
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software