If you’re a WordPress developer or site owner looking to embed live Google reviews without relying on third-party services like Trustindex or Elfsight, this blog is for you!
In this tutorial, I’ll show you step-by-step how I integrated real-time Google reviews dynamically using a custom-coded solution for one of my clients. All you need is access to your WordPress theme files and a free Google Places API key.
✅ What We’ll Achieve
By the end of this guide, you’ll be able to:
- Fetch Google reviews using the Google Places API
- Display them beautifully using a swiper carousel
- Use a simple WordPress shortcode like
[google_reviews place_id="YOUR_PLACE_ID"] - Avoid the limitations and branding of third-party plugins
📦 Prerequisites
- A self-hosted WordPress website
- Access to
functions.phpor a custom plugin - A Google Places API key
- Basic knowledge of editing theme files
- (Optional) Elementor or any page builder that supports shortcodes
🗝️ Step 1: Get Your Google Places API Key
- Visit the Google Cloud Console.
- Create a new project or select an existing one.
- Go to APIs & Services > Library.
- Enable the Places API.
- Go to Credentials, then Create Credentials > API key.
- Copy your API key. (Later, consider storing it in
wp-config.phpfor security.)
🆔 Step 2: Find Your Google Place ID
- Go to Place ID Finder.
- Enter your business name and select your location.
- Copy the Place ID — we’ll use it in our shortcode later.
💻 Step 3: Add This Code to Your Theme’s functions.php
Paste the following snippet into your theme’s functions.php file or a custom plugin:
function enqueue_swiper_assets() {
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', array(), null);
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);
wp_enqueue_script('custom-swiper', get_template_directory_uri() . '/custom-reviews.js', array('swiper-js'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_swiper_assets');
function get_google_reviews($place_id) {
$transient_key = 'google_reviews_' . md5($place_id);
$cached_output = get_transient($transient_key);
if ($cached_output !== false) return $cached_output;
$api_key = "YOUR_API_KEY"; // Replace this
$url = "https://maps.googleapis.com/maps/api/place/details/json?place_id={$place_id}&fields=reviews,user_ratings_total&key={$api_key}";
$response = wp_remote_get($url);
if (is_wp_error($response)) return "Error fetching reviews";
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (!isset($data['result']['reviews'])) return "No reviews found";
$reviews = array_slice($data['result']['reviews'], 0, 6);
$total_reviews = $data['result']['user_ratings_total'] ?? count($reviews);
ob_start();
?>
<div class="google-reviews-wrapper">
<div class="review-header-section">
<img src="https://spicevenue.com/wp-content/uploads/2025/02/ti-verified.svg" alt="Verified" class="verified-icon">
<h3>Based on <?php echo esc_html($total_reviews); ?> Reviews</h3>
</div>
<div class="google-reviews-carousel swiper">
<div class="swiper-wrapper">
<?php foreach ($reviews as $review): ?>
<div class="swiper-slide review-card">
<div class="review-header">
<img src="<?php echo esc_url($review['profile_photo_url']); ?>"
alt="<?php echo esc_attr($review['author_name']); ?>" class="review-profile">
<div>
<strong><?php echo esc_html($review['author_name']); ?></strong>
<p class="review-date"><?php echo date("F j, Y", $review['time']); ?></p>
</div>
</div>
<div class="review-rating">
<?php for ($i = 0; $i < $review['rating']; $i++): ?>
<img src="https://spicevenue.com/wp-content/uploads/2025/02/spicevenuestar.svg" alt="Star" class="star-icon">
<?php endfor; ?>
</div>
<p class="review-text"><?php echo esc_html(mb_strimwidth($review['text'], 0, 120, "...")); ?></p>
</div>
<?php endforeach; ?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<?php
$output = ob_get_clean();
set_transient($transient_key, $output, 12 * HOUR_IN_SECONDS);
return $output;
}
function display_google_reviews_shortcode($atts) {
$atts = shortcode_atts(array('place_id' => ''), $atts);
return get_google_reviews($atts['place_id']);
}
add_shortcode('google_reviews', 'display_google_reviews_shortcode');
🧩 Step 4: Create the JavaScript File for Swiper
In your active theme folder, create a file called custom-reviews.js and add:
document.addEventListener('DOMContentLoaded', function () {
new Swiper('.google-reviews-carousel', {
slidesPerView: 1,
spaceBetween: 20,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
640: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
},
});
});
🎨 Step 5: Add Some Basic CSS (Optional)
Add this to your theme’s stylesheet or in Customizer > Additional CSS:
.google-reviews-wrapper {
max-width: 1000px;
margin: 0 auto;
}
.review-card {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.review-header {
display: flex;
align-items: center;
gap: 10px;
}
.review-profile {
border-radius: 50%;
width: 50px;
height: 50px;
}
.review-rating .star-icon {
width: 20px;
margin-right: 2px;
}
.review-text {
margin-top: 10px;
}
📌 Step 6: Use the Shortcode Anywhere
Now simply paste the shortcode wherever you want to show reviews:
[google_reviews place_id="YOUR_PLACE_ID"]
This will dynamically pull in the latest 6 reviews and display them in a responsive slider.
🔐 Bonus: Store the API Key Securely (Recommended)
Instead of hardcoding the API key, you can define it in your wp-config.php:
define('GOOGLE_API_KEY', 'your-api-key');
Then update your function like this:
$api_key = defined('GOOGLE_API_KEY') ? GOOGLE_API_KEY : '';
🚀 Final Thoughts
This method is:
- 100% customizable
- Lightweight (no bloated plugins)
- Easy to integrate
- Great for SEO (as content is server-rendered)
If you found this helpful, feel free to explore other WordPress and API integration guides on my blog.
Happy coding!
— Ashin Iqbal
