GR Review Developer Documentation & Theme Builder Integration Guide (Gutenberg, Elementor, PHP & CSS)

This technical reference guide provides copy-paste code snippets, template hooks, and block patterns for developers, designers, and theme builders integrating GR Review – Reviews Widget for Google into WordPress themes, child themes, headless builds, and popular page builders.

1. Gutenberg Block Pattern (Copy-Paste Block Markup)

You can paste this clean Gutenberg block pattern directly into the WordPress Block Editor (Code Editor mode) or register it in your theme's functions.php file:

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"30px","bottom":"30px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="padding-top:30px;padding-bottom:30px">
    <!-- wp:heading {"textAlign":"center","level":2} -->
    <h2 class="wp-block-heading has-text-align-center">What Our Verified Clients Say</h2>
    <!-- /wp:heading -->

    <!-- wp:paragraph {"align":"center","style":{"color":{"text":"#64748b"}}} -->
    <p class="has-text-align-center has-text-color" style="color:#64748b">Rated 4.9★ based on real Google Business reviews</p>
    <!-- /wp:paragraph -->

    <!-- wp:shortcode -->
    [grreview_google_reviews id="preset_dental" layout="carousel" theme="light"]
    <!-- /wp:shortcode -->
</div>
<!-- /wp:group -->

How to Register as a Theme Pattern in PHP

add_action( 'init', function() {
    register_block_pattern(
        'mytheme/google-reviews-slider',
        array(
            'title'       => __( 'Google Reviews Carousel Section', 'mytheme' ),
            'description' => __( 'High-converting social proof section powered by GR Review', 'mytheme' ),
            'content'     => '<!-- wp:shortcode -->[grreview_google_reviews id="preset_dental" layout="carousel"]<!-- /wp:shortcode -->',
            'categories'  => array( 'testimonials', 'featured' ),
        )
    );
} );

2. Elementor Page Builder Integration

GR Review integrates seamlessly with both Elementor Free and Elementor Pro:

Open your Elementor editor.
Drag a Shortcode widget into any section or column.

Enter the shortcode:

[grreview_google_reviews id="preset_dental" layout="grid"]

For Elementor Header / Popups: Use the compact badge layout to display an unobtrusive aggregate rating pill:
```
[grreview_google_reviews id="preset_dental" layout="badge"]
```
For Global Footer: Embed the sticky floating drawer shortcode across all pages:
```
[grreview_google_reviews id="preset_dental" layout="floating"]
```

3. PHP Template Tags for Custom Themes

For theme developers building custom page templates, header files (header.php), single post templates (single.php), or footer files (footer.php):

Safe Theme Wrapper

<?php
/**
 * Safely render Google Reviews Widget in theme template
 */
if ( shortcode_exists( 'grreview_google_reviews' ) ) {
    echo do_shortcode( '[grreview_google_reviews id="preset_dental" layout="carousel" theme="light"]' );
}
?>

Dynamic Post Meta or Options Integration

<?php
// Pull dynamic widget preset or custom place ID from custom fields or ACF
$widget_id = get_post_meta( get_the_ID(), 'custom_review_preset', true );
if ( empty( $widget_id ) ) {
    $widget_id = 'preset_dental'; // fallback default
}

echo do_shortcode( sprintf(
    '[grreview_google_reviews id="%s" layout="carousel" min_rating="4"]',
    esc_attr( $widget_id )
) );
?>

4. Custom CSS Variables & Theming Hooks

The GR Review widget engine uses CSS Custom Properties (Variables), making deep brand customization simple without modifying core plugin files:

/* Custom Brand Overrides in your child theme style.css */
.grr-widget-container {
    --grr-radius: 12px;        /* Card border radius */
    --grr-accent: #2563eb;      /* Brand CTA and active dot color */
    --grr-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); /* Custom card shadow */
}

/* Force Custom Font Family */
.grr-widget-container,
.grr-card,
.grr-header {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Custom Star Color */
.grr-star-full,
.grr-star-half {
    fill: #f59e0b !important;
}

5. Full Shortcode Parameter Reference

Parameter	Accepted Values	Default	Description
`id`	preset_dental, preset_bakery, preset_law, or Custom Widget ID	`preset_dental`	Preset identifier or custom synced widget profile.
`layout`	carousel, grid, list, badge, floating	`carousel`	Visual presentation layout format.
`theme`	light, dark	`light`	Background color mode (supports Dark Mode).
`min_rating`	1, 2, 3, 4, 5	`4`	Filter out low-rating reviews automatically.

Download & Interactive Studio

The official plugin is 100% free, GPL-compliant, and available on the WordPress Plugin Directory:

Download GR Review on WordPress.org → Test in Online Playground →