Extending MyListing Theme Functionality for Wedding Officiant Directory Website

This site may contain affiliate links, which means I may receive a commission for any purchases made through those links, at no extra cost to you. It's probably enough to buy me a lunch or two, but not enough for a couple of goats, which is disappointing, because goats are adorable. More info here.
odheading

I’m currently using a WordPress theme called MyListing to create a directory of wedding officiants, and of course, there are limitations in how much the theme can be customized out of the box. One of the requests from some of the officiants who are signing up to be listed in the directory is to be able to display their Google My Business reviews on their listing pages. This isn’t an option with the theme, but the theme does allow using shortcodes so I began my quest to make this happen.

It took a while.

I pulled out a few gray hairs.

But I finally made it work. Here’s what the result looks like. Check out this officiant listing page and look for the Google Reviews in the lower right of the page. Nice, right?

Display Google Reviews

And here’s how to accomplish it:

1. Install Google Reviews Widget plugin from https://wordpress.org/plugins/widget-google-reviews/

2. Set up your own Google Places API key. (Instructions are in the widget settings). You only need to do this with your own Google account. It’s kind of a pain to do. I might have cussed a little during this process.

3. Once you have the key, go to the Shortcode tab of the settings in the Google Reviews widget, and copy the shortcode it gives you. You’ll replace 2 attributes of this shortcode later with field names from MyListing (place_name and place_id). The shortcode will look similar to this:

[grw place_photo=”https://maps.gstatic.com/icons/generic_business-71.png” place_name=”ABC Inc.” place_id=”dhIJTcVpDFr424ARO5jPnMU4zzz” reviews_lang=”en” pagination=”5″ text_size=”120″ refresh_reviews=true lazy_load_img=true reduce_avatars_size=true open_link=true nofollow_link=true]

4. Edit your MyListing Listing Type and add a text field called Google Places ID which is where your users will enter their own ID.

5. Edit the Listing Type > Single Page > Content and Tabs, and add a Shortcode field wherever you want it. Copy the shortcode you got from the widget, but delete the two values in the two attributes mentioned above. Instead, between the quotes, type an @ symbol, which will drop down a list of MyListing fields to choose from. Choose your business name or equivalent field for the place_name, and do the same for the place_id to grab the user’s entered place id.

6. You’ll need to hide the Reviews block for people who don’t enter a Places ID, or they’ll get an ugly 0 stars review block, which will really upset them. You need to use some javascript code to accomplish this.

This javascript is adding a new class name to the block if no place ID is set called .hide-this-block. So, add this script to a .js file in your child theme, enqueue in in your functions.php file, and then create a CSS for .hide-this-block { display: none; }

jQuery(document).ready(function(jQuery) {
if (jQuery.trim(jQuery(‘.wp-google-rating’).text().indexOf(“0.0”)) > -1) {
document.getElementById(“grev”).classList.add(“hide-this-block”)
}
});
 

I think actually, you could probably just place this script in the MyListing Theme Options Custom script area, but I did it this way before I thought of that, so it’s up to you try it or not.

That’s it! You’ll have to teach your users how to get their place ID. That’s the ugly part. It’s not hard, but users sometimes stumble over the easiest of instructions. I made a help page on the site for the officiants that uses similar instructions to these.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest