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.
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.
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.
I 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.
Store listing page template
Bringing it all together
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.
Want to discuss a project?
Talk to our Magento experts on 01785 279920