Reviews and Rating – Google Business

Bubbles

Just a few of the best reviews styled as speech bubbles without the summary at the top.

[reviews_rating theme="bubble" summary=false limit=3 min=5]

[reviews_rating theme="bubble columns three" summary=false limit=3 min=5 excerpt=150]

Bubbles, centred and filled

This time it is filled speech bubbles, centrally aligned with the summary hidden.

[reviews_rating theme="bubble center fill" summary=false limit=3 min=5]

[reviews_rating theme="bubble center fill columns three" summary=false limit=3 min=5 excerpt=150]

Columns and colours

Various responsive column layouts that appear when the screen is wide enough. Some of these customisations will require a little CSS.

You can set your preference of colour scheme using the parameter: color_scheme.

[reviews_rating theme="bubble columns two center fill" color_scheme="cranberry" summary="name, rating, stars, count" avatar=false review_item_order="text first"]

• Cranberry
• Coral
• Pumpkin
• Mustard
• Forest
• Turquoise
• Ocean
• Amethyst
• Magenta
• Slate
• Carbon
• Copper
• Coffee
• Contrast

[reviews_rating theme="columns two" summary=false limit=2 excerpt=120]

[reviews_rating theme="bubble center fill columns three" class="blue" place_id="ChIJ37ukkHcFdkgRbQDodKaNszs" summary=false date=false sort="shuffle_variable" limit=3 min=5 review_text_min=140 review_text_max=290 excerpt=120 name_format="last initial" avatar="/wp-content/uploads/Generic-Avatar-Blue.svg"]

[reviews_rating theme="bubble columns four" class="pink" summary="icon, name, rating, stars" icon="/wp-content/uploads/Colourful-Star-Logo.svg" limit=4 excerpt=110 stars="rgba(240, 20, 120, 0.9)" stars_gray="rgba(180, 90, 120, 0.3)" name_format="last initial"]

[reviews_rating theme="bubble columns four" class="pink pink-bubble" summary=false attribution=false limit=4 min=4 excerpt=110 name_format="first only" date="M Y" avatar="/wp-content/uploads/Generic-Local-Guide-Avatar-Magenta.svg"]

[reviews_rating theme="narrow center" class="red" summary="icon, name, rating, stars, count" icon="/wp-content/uploads/Red-Star-Logo.svg" limit=0 stars="css"]

The three, four column and stars="css" shortcodes have some additional CSS to alter the fill, overall rating and review stars:

.google-business-reviews-rating.bubble.fill.blue .listing .text {
    background-color: #005CAF;
}
.google-business-reviews-rating.bubble.fill.blue .listing .text::before {
    border-bottom-color: #005CAF;
}
.google-business-reviews-rating.bubble.fill.blue .listing .text a {
    color: #FFFFFF;
}
.google-business-reviews-rating.pink .rating,
.google-business-reviews-rating.pink .listing .rating {
    color: rgba(300, 20, 120, 0.9);
}
.google-business-reviews-rating.pink-bubble .listing .text {
    box-shadow: 0 0 0 2px rgba(300, 20, 120, 0.9) inset;
}
.google-business-reviews-rating.pink-bubble .listing .text::before {
    border-bottom-color: rgba(300, 20, 120, 0.9);
}
.google-business-reviews-rating.red .rating,
.google-business-reviews-rating.red .rating .star {
    color: rgba(255, 20, 20, 0.9);
}
.google-business-reviews-rating.red .rating .star.gray {
    color: rgba(165, 100, 100, 0.4);
}

Review item order and design

There is a lot of flexibility with this plugin’s appearance. You can select a number a ways to display the review items. Adjust the review text length or excerpt for consistency in columns.

[reviews_rating summary="icon, name, rating, stars" review_item_order="inline" limit=2]

[reviews_rating theme="columns two" summary=false review_item_order="text first author switch" id="5,3"]

[reviews_rating theme="bubble center columns two" summary=false review_item_order="text first" limit=2 offset=2 excerpt=130 date=false]

[reviews_rating theme="bubble center columns two" place_id="ChIJK092aEpzbqoR1exlPQa0ccI" summary=false review_item_order="author switch" sort="relevance_asc" limit=2 offset=1 excerpt=130 date=false]

[reviews_rating summary="rating, stars, count" review_item_order="text first author switch" limit=1 offset=3]

[reviews_rating summary=false avatar=false date="M jS, Y" review_item_order="text first inline" limit=2 excerpt=null review_text_max=400 review_text_inc="impressive, interesting, worthy, great, different, love, awesome"]

Tiles

Enclose each review in its own tile using this newly introduced theme in version 4.

[reviews_rating theme="tile center" summary="rating, stars, count" limit=2 excerpt=190]

[reviews_rating theme="tile columns three center" summary="rating, stars, count" limit=3 excerpt=90]

[reviews_rating theme="tile columns two" color_scheme="coffee" summary="name, stars, count" review_text_height="4.4em" date="F j, Y" attribution=false limit=2]

[reviews_rating theme="tile columns two bubble fill" color_scheme="slate" summary=false review_text_height="5.1em" date="F j, Y" attribution=false limit=2]

There are so many colour combinations for this set of themes, so create your own CSS to fill the tile background to a colour of your choice.

[reviews_rating theme="tile columns two bubble fill" color_scheme="slate" summary=false review_text_height="5.1em" date="F j, Y" attribution=false limit=2]

.gmbrr.slate.tile.fill .listing li {
    background-color: #142232;
    box-shadow: none;
}

As each tile encloses a review, this works very well with the carousel functionality.

Carousel

Browse across multiple review with the view parameter.

[reviews_rating limit=3 view=1 excerpt=180]

[reviews_rating theme="bubble columns two center" limit=6 view=2 excerpt=150]

[reviews_rating theme="bubble tile columns three fill" class="bullet-square" color_scheme="copper" summary=false review_item_order="text first" name_format="capitalize last initial" date=false attribution=false limit=9 view=3 loop=4 interval=7 excerpt=75]

The following two instances are placed in a narrow parent element.

[reviews_rating theme="tile" color_scheme="forest" summary=false name_format="first only" review_text_height="6.8em" date="F Y" attribution=false limit=6 view=1 loop=true interval=6]

The next Shortcode is a variation on the previous example with the improved review_item_order parameter (available from version 4.0).

[reviews_rating theme="bubble center" color_scheme="turquoise" summary=false review_item_order="text, avatar, name, rating" review_text_height="6.8em" attribution=false limit=6 view=1 loop=true interval=6 bullet=false]

[reviews_rating theme="tile columns two tile center" class="bullet-diamond" summary="rating, stars, count" date=false limit=12 view=4 loop=4 interval=4 excerpt=125]

[reviews_rating theme="tile columns two center" class="bullet-square-rounded" summary="rating, stars, count" date=false excerpt=false review_text_height="4.4em" limit=12 view=4]

[reviews_rating theme="bubble columns three center" summary=false date=false excerpt=false attribution=false review_text_height="6.9em" limit=15 view=3 draggable=false cursor=false]

Please make your feature requests in the WordPress.org forum.

Badges

A few examples of badges to get you started; some of these will require a little additional styling.

[reviews_rating theme="badge" limit=0]

[reviews_rating theme="badge narrow" vicinity=false limit=0]

[reviews_rating theme="badge tiny fill" limit=0]

[reviews_rating theme="badge tiny" class="no-outline" link="write review" limit=0]

[reviews_rating theme="badge tiny narrow" class="fill stripe contrast" place_id="ChIJ1WJvwhoQdkgRZ2SW87_Wxhk" name="Google Reviews" summary="name, rating, stars" html_tags="h3" limit=0]

[reviews_rating theme="badge tiny narrow" class="no-outline" place_id="ChIJ37ukkHcFdkgRbQDodKaNszs" count=false limit=0]

[reviews_rating theme="badge fill" class="deutsch" place_id="ChIJ37ukkHcFdkgRbQDodKaNszs" limit=0 html_tags="h3" name="Google Bewertungen" icon="/wp-content/uploads/German-Flag.svg" vicinity=false review_word="Bewertungen" reviews_link="Unsere Bewertungen" write_review_link="Eine Rezension schreiben"]

There is a little custom CSS here because the width of badges will vary according to their content:

.google-business-reviews-rating.badge {
    max-width: 400px;
}
.google-business-reviews-rating.badge.narrow {
    max-width: 300px;
}
.google-business-reviews-rating.badge.deutsch .button {
    color: #FFFFFF;
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
}

This final two badges have additional CSS to fix it to the bottom corners of the screen – provided the screen width and height are both greater than 700 pixels (otherwise it remains in place within the content). You can switch the overall position through changes to left and right.

[reviews_rating theme="badge tiny no-outline" class="fixed bottom left" color_scheme="amethyst" count=false limit=0]

[reviews_rating theme="badge tiny fill" class="fixed bottom right" limit=0]

@media (min-width: 700px) and (min-height: 700px) {
    .google-business-reviews-rating.badge.fixed.bottom.left {
        position: fixed;
        left: 20px;
        bottom: 20px;
        width: auto;
        z-index: 300;
    }
    .google-business-reviews-rating.badge.fixed.bottom.right {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: auto;
        z-index: 301;
    }
}

Buttons and links

Give visitors a chance to leave their own reviews, view existing reviews in Google and find the specific location in Google Maps.

[reviews_rating_link reviews_link]Read our reviews[/reviews_rating_link]

[reviews_rating_link write_review_link]Write your review[/reviews_rating_link]

[reviews_rating_link maps_url]Google Maps Location[/reviews_rating_link]

[reviews_rating_link write_review_link class="button"]<span class="google-icon white first"></span> Write your review[/reviews_rating_link]

[reviews_rating_link reviews_link class="button button-transparent"]Read our reviews <span class="google-icon last"></span>[/reviews_rating_link]

[reviews_rating_link maps_link class="button button-white"]<span class="google-icon black first"></span> Find us on Google Maps[/reviews_rating_link]

You may need to add some of your own styling to apply the button designs. Check your theme for details or add something similar to this:

.entry-content .button {
    color: #ffffff;
}
.button-transparent {
    color: #cd2653;
    border: 2px solid #cd2653;
    background-color: transparent;
}
.button-white {
    color: #000000;
    border: 2px solid #ffffff;
    background-color: #ffffff;
}