1. Documentation
  2. Themes
  3. City Guide

City Guide

Important: This theme was retired in February 2014. Documentation is no longer being updated.

Home page layout ↑ Back to top

The homepage has an About module, Latest Posts, and six widgetized areas.

City Guide overview

Setting up the Featured module ↑ Back to top

The prominent home page featured module is set up in the theme options.

Choose a WordPress page you created by inputting its page ID. The page content will then be pulled into this space on the home page. You can include a featured image or a Google Map (as we did on the demo) via the “Custom City Guide Settings” panels below the WYSIWYG editor on the WordPress page you’re editing.

Setting up the home page featured module

Setting up Google Maps ↑ Back to top

City Guide relies on Google Maps to allow geo-tagging of posts. From here you can decide whether to allow for automatic mouse scrolling on the maps. We turned this feature off in the demo, as the auto-scroll interferes with page scrolling.


Adding a map to a post ↑ Back to top

You can geo-tag posts with a location so a site visitor knows where you are, or where the post is related. Once you’ve set up Google Maps in the theme options, you are ready

When editing/adding a new post, you’ll see a “City Guide Custom Maps” panel below the WYSIWYG editor. Use this to search for a location to add to the post.

Adding a map to a post

You can enable/disable this map view on the single post page. If disabled, the post can still be plotted on the “Woo – Overview Map” widget (explained below).

Also specify which map view to use — map, terrain or satellite view. Preview the post with various zoom levels, and then select one you like most.

Setting up the overview map widget ↑ Back to top

The overview map, viewable on the home page of our demo, plots your journey around the world by taking all the locations linked to the various blog posts and displaying them on one map.

Go to Appearance > Widgets to find the “Woo – Overview Map” widget and assign it to the “Home Sidebar” widgetized area.

As seen in the screenshot below, you can choose to only display posts on your map that have been tagged with a specific tag. By default, it looks for all locations linked to blog posts if left blank. You can also set the height of the widget map on the home page.

When you click markers on the map, it takes you to the blog post(s) linked to that location.

Setting up the overview map widget

The “Center Coordinates” option allows you to set the map view of the widget. By default, the view of the map is focused on the last post published with a geo-location. If you set center coordinates, the map default view uses those.

Setting up the journey map widget ↑ Back to top

Go to Appearance > Widgets to find the “Woo – Journey Map” widget and assign it to the “Home Sidebar” widgetized area.

This widget displays a map that shows all posts tagged with a specific tag. This widget requires a tag to be specified for it to work properly, unlike the Overview Map widget above. The posts are viewable as markers on the map, connected via a polyline (with a color of your choice) that shows the route you took. The line connecting the posts is arranged according to blog post order.

Setting up a category map ↑ Back to top

With City Guide you can place category maps on the category archive pages. This is a great feature if you want to highlight only “Restaurants” or “Hotels” in your city/location.

In the category archive, the Google Map appearing at the top of the page will loop through posts and look for ones in the same category with a map location associated.

Enable “Category Maps” under the Category Maps theme options, specify a zoom level (test and preview to see which suits) and set a maximum number of posts to appear.

Setting up the Category Maps in the theme options
How the category maps appear on the category archive pages

Setting up color map markers for categories ↑ Back to top

Each City Guide category can have a color marker associated, then all posts in the category will appear with that color marker on the map – this differentiates listings that appear on a map. Go to the “Colored and Custom Markers” theme options and specify colors for the various categories, or add your own custom images to appear as markers on the map.

Customizing the post markers for specific categories on the Google Maps
An example of the different colored markers on the “Full Map” page template. To use the full map page template which shows all the posts on a large map, simply add a new page and set the “Full Map” page template to it.

Setting up the post ratings plugin ↑ Back to top

City Guide allows the rating of posts, in effect rating locations, whether they be shops, restaurants, etc. To set this up, install Post Ratings by Lester Chan.

Once activated, you can change the display content for the Post Ratings plugin.

A panel will appear in your WordPress admin the plugin is activated. We advise deleting “Ratings Templates” so it gels neatly with the theme, as seen in the demo.

The recommended templates are:

  • Ratings Vote Text: %RATINGS_IMAGES_VOTE%
  • Ratings Voted Text: %RATINGS_IMAGES%

You can tweak to your liking.

Widgets ↑ Back to top

Custom City Guide widgets ↑ Back to top

There are six widgetized areas — three in the sidebar and and three in the footer — and 10 custom widgets.

We recommend assigning maps to the Primary Sidebar, as they will be extremely small in the other sidebars.

  • Woo – Flickr
  • Woo – Twitter
  • Woo – Overview Map
  • Woo – Journey Map
  • Woo – Search
  • Woo – Custom Nav Menu
  • Woo – Adspace
  • Woo – Tasks
  • Woo – Category Loop
  • Woo – Tabs

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment