This article explains how to create a new meta field that specifies whether or not a store is a featured one, how to make them automatically show up first in the search results, and how to optionally make the featured store stand out by changing the background color.

All code used throughout this article needs to go in the functions.php inside your active theme folder.

1. Create the Featured Metabox Field
2. Include the Featured Data In the Returned Search Results
3. Show the Featured Stores First in the Search Results
4. Change the Styling of Featured Stores

Create the Featured Metabox Field

The new meta field that determines if the location is a featured one is created with the wpsl_meta_box_fields filter. This filter allows you to modify the content for existing tabs, or you can use it to create a new tab section.

The code below is based on the default code that creates the “Location” tab. The only difference is the “featured_dealer” section between line 6 and 9.

If the type 'type' => on line 8 is not included, then it will render as a normal text input field, but in this case a checkbox makes more sense, so we have to set it to 'type' => 'checkbox'

After you added the above code to the functions.php, the store page in the admin are should look like the image below.

If you’d like to place the “featured_dealer” field under a new “Featured” tab instead, then you can use the code below.

add_filter( 'wpsl_meta_box_fields', 'custom_meta_box_fields' );

function custom_meta_box_fields( $meta_fields ) {

    $meta_fields[__( 'Featured', 'wpsl' )] = array(
        'featured_dealer' => array(
            'label' => __( 'Featured', 'wpsl' ),
            'type'  => 'checkbox'
        )
    );

    return $meta_fields;
}

Include the Featured Data In the Returned Search Results

After creating the “featured” checkbox we need to make sure the set value is included in the returned search data.

How to do this is shown in the code below.

The field we created in the previous step was called “featured_dealer”, but when it’s saved to the database all fields are automatically prefixed with wpsl_, so to target the correct field we need to set the key value to wpsl_featured_dealer on line 5.

The name value on line 6 is the key under which the featured data is accessible in the location data. You can set this value to whatever you want, as long as you keep using the same value in the next sections.

Show the Featured Stores First in the Search Results

The last thing we need to do is to make sure the featured stores show up first in the search results.

We can do this with the wpsl_store_data filter. This filter allows you to modify the search results data just before it’s send back to the front-end and shown on the map.

The code below shows how to do this.

We first loop over the collected data ( line 9 ) and look for the “featured_dealer” value ( line 12 ). If a match is found, then we move it the new $featured_list array ( line 15 ), and remove it from the $stores array ( line 18 ).

The last step is to merge both arrays together ( line 26 ) so the values from the $featured_list are shown first.

Change the Styling of Featured Stores

If you want the featured stores to stand out in the search results, then you can do this by setting a custom CSS class in the search results template, and then target that class in your stylesheet to for example change the background color.

Include a Custom CSS Class in the Store Meta Data

The code below uses the wpsl_store_meta filter to set the value of the “custom_css” field to “wpsl-featured-dealer” for those locations that are set as featured.

You can replace “wpsl-featured-dealer” with whatever you want, but you do need to target the same value in your stylesheet.

Set the CSS Class in the Search Results Template

The next thing you need to do is overwrite the default search results template with the wpsl_listing_template filter, and replace it with the template below.

The only change is on line 7 where a check is performed for the custom_css value. If it’s set, then it’s included as the class value.

Create a CSS Rule To Set a Different Background Color

The last step is to target the used CSS class in your stylesheet.

The code below sets the background color to light blue. If you want to use a different background color, then you can use this site to find different HTML color codes ( the value after hex ).

Copy the CSS code, and place it in a stylesheet loaded by your theme.

The featured location will show up as shown below on the store locator page.