Create a Custom Store Page Template

The default store page shows a map with the store location on it, the address details, and if enabled, the opening hours. You can change this by creating a single-wpsl_stores.php file in your theme folder and adjusting it to your needs.

This example works with the default Twenty Fifteen theme but should work with most other themes as well. If it doesn’t work, then take a look at the HTML structure of the single.php in your theme folder, and change the code below accordingly.

This template first shows the map, followed by the post content and the store address. The opening hours are not included.

If you do like to show the opening hours, then you can do this by including the code below anywhere between line 23 and 32 in the above template code.

Include Additional Content

If you have set a featured image, and you’d like to show it on the store pages, then you need to include the get_the_post_thumbnail function in the template code.

The code below shows the featured image in the medium resolution.

echo get_the_post_thumbnail( $queried_object->ID, 'medium' );

Other supported formats are thumbnail, large and full. The image sizes can be configured in the Settings Media Screen.

Category Names

Including the category names in the template is done with the code below.

Place it anywhere between line 20 and 32 in the page template, and the used categories will show up.

If you want to include a directions link that sends the user to Google Maps with the destination already filled in, then you can copy the code below, and include it between lines 21 and 33 in the single-wpsl_stores.php template code.

Custom Meta Data

Showing custom data requires you to first grab the required value with get_post_meta, and then simply echoing it to show it on the page.

The meta value that’s used in the code below is based on this article. You can easily change it by replacing wpsl_appointment_url with the name of the meta field you wish to use.

As you can see here, when the meta fields are created they are called phone, fax, email, url and appointment_url, but once they are saved they are prefixed with wpsl_.

So if you want to grab the values of those fields with get_post_meta, then you have to use wpsl_phone, wpsl_fax, wpsl_email, wpsl_url and wpsl_appointment_url as the key value.

The Comments Form

Using comments on store pages requires you to complete the following steps.

    1. Add Comment Support
    2. Bulk Enable Comments
    3. Include the Comments Template

 

Add Comment Support

The first thing you need to do is to add comment support for the custom post type used by the store locator. You can do this by copying the code below and pasting it in the functions.php inside your active theme folder.

Reload the admin area, open a store location, and a new “Discussion” section should show up below the “Store Details” section.

Comments Options

If it doesn’t show up, then scroll back to the top of the page, click on “Screen Options” in the top right corner, and make sure to check the “Comments” checkbox.

Bulk Enable Comments

Now that the discussion box shows up, you can enable the comments by ticking the “Allow comments” checkbox for all existing stores.

You could do this manually on every store page, but if you have lots of them, then it’s much easier to run a SQL query that bulk enables all the comments at once.

The code below does exactly that. Place the code in the functions.php inside your active theme folder, reload the page, and remove it again. The SQL query only needs to run once to enable the comments for all the existing store pages.

// Remove after reloading the page.
add_action( 'init', 'switch_on_comments_automatically' );

function switch_on_comments_automatically() {

    global $wpdb;

    $wpdb->query( "UPDATE $wpdb->posts SET comment_status = 'open' WHERE post_type = 'wpsl_stores'" );
}

Include the Comments Template

The last step involves including the code that loads the comments template in the single-wpsl_stores.php.

Copy the code below, and place it wherever you want the comments form to show up in the single-wpsl_stores.php template.

comments_template( 'comments.php' );

It’s possible you see this error after reloading a store page.

Theme without comments.php is deprecated since version 3.0.0 with no alternative available. Please include a comments.php template in your theme.

You can fix this by copying the comments.php from, for example, the /wp-content/themes/twentysixteen/ folder (or any other theme folder that has a comments.php) to your own theme folder.

If you choose to include all the used code examples, then the final template code will look like this.

<?php
/**
 * Example of a single WPSL store template for the Twenty Fifteen theme.
 * 
 * @package Twenty_Fifteen
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
               <header class="entry-header">
                    <h1 class="entry-title"><?php single_post_title(); ?></h1>        
                </header>
                <div class="entry-content">
                <?php
                    global $post;

                    $queried_object = get_queried_object();
                    
                    // Add the map shortcode
                    echo do_shortcode( '[wpsl_map]' );
                    
                    // Add the content
                    $post = get_post( $queried_object->ID );
                    setup_postdata( $post );
                    the_content();
                    wp_reset_postdata( $post );
                    
                    // Add the address shortcode
                    echo do_shortcode( '[wpsl_address]' );
                    
                    // Show the appointment url
                    $appointment_url = get_post_meta( $queried_object->ID, 'wpsl_appointment_url', true );

                    if ( $appointment_url ) {
                      echo '<p><a href="' . esc_url( $appointment_url ) . '">' . __( 'Make Appointment', 'wpsl' ) . '</a></p>';
                    }
                    
                    // Create the directions link.
                    $address       = get_post_meta( $queried_object->ID, 'wpsl_address', true );
                    $city          = get_post_meta( $queried_object->ID, 'wpsl_city', true );
                    $country       = get_post_meta( $queried_object->ID, 'wpsl_country', true );
                    $destination   = $address . ',' . $city . ',' . $country;
                    $direction_url = "https://maps.google.com/maps?saddr=&daddr=" . urlencode( $destination ) . "";

                    echo '<p><a href="' . esc_url( $direction_url ) . '">' . __( 'Directions', 'wpsl' ) . '</a></p>';
                  
                    // Include the comments template
                    comments_template( 'comments.php' );
                ?>
                </div>
            </article>
        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Shortcodes