(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:
-
You will first have to purchase and download your theme (in a zip folder) from Templatic.
-
Unzip the zipped file and place the GeoPlaces folder in your wp-content/themes folder.
-
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.
-
If everything goes well, you should see the following on the navigation bar of your admin page:
-
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:
-
First, navigate to your homepage; you should be greeted by a splash page that looks as follows:
-
Now select New York and you will be taken to a page with a Google Map that looks like the following screenshot:
-
GeoPlaces leverages on the Google Maps API to provide geographic capabilities to the theme.
-
Feel free to click on the map and other places, such as Madison Square Park.
-
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:
-
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.
-
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:
-
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:
-
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:
-
The geographically related fields are now filled up.
-
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?
-
Firstly, you need to log in to your site if you have not yet done so.
-
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.
-
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:
- Increasing Traffic to Your Blog with WordPress MU 2.8: Part2 [Article]
- WordPress 3: Designing your Blog [Article]
- Adapting to User Devices Using Mobile Web Technology [Article]