Building a store listing page in WordPress

Today I’m going to use a number of WordPress techniques to demonstrate the process of building a content managed store listing page. I’ll take you through registering a post type, creating a metabox to save each store’s location and phone number, and finally writing a template to list out these stores including an interactive map displaying multiple markers.

The complete page showing our map with multiple markers

Store post type

In WordPress, a post type represents an object, for our example we’re going to register a ‘store’ post type. A new menu item will appear in the WordPress dashboard with an interface similar to that of posts and pages, the two main built-in WordPress post types.

Our store post type

Our store post type

Metabox

A metabox typically displays input fields which, when used in conjunction with a post type allow you to store information about an object. For example, our store post type will use a metabox to save both the stores location and its phone number.

There are a number of frameworks which streamline the metabox building process. Custom Metaboxes and Fields for WordPress, or CMB for short is one of these frameworks. Written by Andrew Norcross, Jared Atchison and Bill Erickson, CMB makes it easy to build metaboxes and comes with a number of common fields to input text, select dates and upload files.

CMB can be extended further with custom field types. The process of building your own reusable field types is well documented and with a little effort it’s possible to build some handy additional fields for speeding up your WordPress development as well as improving user experience.

CMB Field Type: Google MapsI wrote a map field type for CMB which can be installed as a WordPress plugin. The field features an autocompleting search box allowing the user to quickly locate their desired location. A marker is placed on the map once a search result is selected. The maker can also be dragged to set an exact location. The field stores the latitude/longitude values in post meta which can then be used for a number of purposes. In our example we’ll be displaying a map on our front-end. However, the latitude/longitude values could also be used within a store finder context to lookup stores by distance or to provide directions.

To get this working, you’ll need to grab a copy of CMB and the map field type from GitHub. Include CMB within your theme or functionality plugin, activate the map field type plugin and then define your metabox, associating it with our store post type.

Our store metabox

Our store metabox

Store listing page template

Template

In our template file, we’re going to write a WP_Query to retrieve all the stores, loop through each store and output the store title and telephone number. The store location latitude/longitude values will be set as data attributes on each containing list item for use later by our JavaScript.

JavaScript

You’ll first need to enqueue the Google Maps API JavaScript and then our script below which initialises the map and loops though each list item, adding a marker to the map.

Bringing it all together

The complete page showing our map with multiple markers

The complete page showing our map with multiple markers

So I’ve gone through registering a store post type, a metabox to collect information about each store and then outputting all this information in a page template. I’ve included example code where appropriate to get you started.

Of course, you may need to do some further legwork to get this setup within your project. I mentioned functionality plugins earlier. The concept is simple, as you go about your WordPress travels, you’re often advised to paste snippets into your active theme’s functions.php file. While this does get you going fast, you end up with a jumble of snippets which tie you down to your theme. A functionality plugin separates the presentation from the functionality, allowing you to change theme far easier than before.

At iWeb, we’re big fans of Bill Erickson’s Core Functionality plugin and use a modified version as a base for our WordPress projects. The plugin provides an organised structure for defining post types, metaboxes, taxonomies and general site functionality.

Let me know in the comments if you found this useful or have any feedback! And as always, remember to check out the iWeb Solutions site for Magento e-commerce development and content management solutions.


Share this article

Posted in Development, Uncategorised, WordPress

Tagged

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Contact us now

Email alerts

Get the latest eCommerce news, reviews and expert advice in your inbox.