View Categories

[trip_rating_summary] Shortcode

The Trip Rating Summary shortcode displays the average rating widget for any trip, making it easy to showcase traveler ratings in hero sections, sidebars, landing pages, or anywhere you want to highlight your trip’s reputation. This compact widget provides quick credibility at a glance.

Basic Usage #

To add a rating summary to a page or post, insert the shortcode:

[trip_rating_summary trip_id="1234"]

Replace 1234 with the ID number of the trip whose rating you want to display.

Note: The trip_id option is required unless you place the shortcode directly on a trip’s page, where it will automatically detect the current trip.

Available Options #

Customize which elements appear in your rating summary and choose from three different layout styles to match your design needs.

Trip Selection #

trip_id – Specify which trip’s rating to display.

  • Format: trip_id="1234" (use the trip’s ID number)
  • Default: Auto-detects the current trip when used on a trip page
  • When to use: Include this option when placing the rating summary on pages other than the trip’s own page, or when featuring a different trip’s rating

Example:

[trip_rating_summary trip_id="2487"]

Display Elements #

show_average – Toggle the numerical rating display.

  • Options: true or false
  • Default: true
  • What it does: When set to true, shows the average rating number (e.g., “4.8/5” or “4.8”). Set to false to hide the numerical rating and rely on visual elements only.

Example:

[trip_rating_summary trip_id="2487" show_average="false"]

show_stars – Toggle star icons.

  • Options: true or false
  • Default: true
  • What it does: When set to true, displays visual star rating icons (filled and half-filled stars based on the average). Set to false to hide star graphics.

Example:

[trip_rating_summary trip_id="2487" show_stars="false"]

show_count – Display the number of reviews.

  • Options: true or false
  • Default: true
  • What it does: When set to true, shows how many travelers have reviewed the trip (e.g., “Based on 47 reviews”). Set to false to hide the review count.
  • When to use: Hide the count if you have few reviews or want a cleaner, more minimal display.

Example:

[trip_rating_summary trip_id="2487" show_count="false"]

show_breakdown – Toggle the detailed rating bars.

  • Options: true or false
  • Default: false
  • What it does: When set to true (and using format="detailed"), displays horizontal bar graphs showing the distribution of ratings across all star levels (how many 5-star, 4-star, 3-star, etc.). Set to false for a simpler overview without the breakdown.
  • Note: This option only works with the detailed format.

Example:

[trip_rating_summary trip_id="2487" format="detailed" show_breakdown="true"]

show_schema – Toggle structured data for SEO.

  • Options: true or false
  • Default: true
  • What it does: When set to true, includes schema markup (structured data) that helps search engines understand and display your ratings in search results. Set to false only if you have a specific reason to exclude this SEO benefit.
  • Recommendation: Keep this set to true for better search engine visibility.

Example:

[trip_rating_summary trip_id="2487" show_schema="true"]

Layout Formats #

format – Choose the visual layout style.

  • Options: compact, detailed, or minimal
  • Default: compact
  • What it does:
    • compact – Balanced layout showing key information in a moderate amount of space
    • detailed – Expanded layout with more spacing and room for the rating breakdown (when show_breakdown="true")
    • minimal – Ultra-streamlined display with just essential elements, perfect for tight spaces like hero sections or badges

Example:

[trip_rating_summary trip_id="2487" format="minimal"]

Styling Options #

class – Add a custom CSS class to the rating summary wrapper.

  • Format: class="your-class-name"
  • Default: tre-rating-shortcode
  • When to use: When you want to apply custom styling to a specific rating summary instance
  • What it does: Appends your chosen class name to the rating container, allowing you to target it with CSS

Example:

[trip_rating_summary trip_id="2487" class="banner-rating-pill"]

Complete Example #

Here’s a fully customized shortcode perfect for a hero section badge:

[trip_rating_summary trip_id="2487" format="minimal" show_count="false" class="hero-rating-pill"]

This shortcode:

  • Displays the rating for trip #2487
  • Uses the minimal format for a clean, compact design
  • Hides the review count to keep focus on the rating itself
  • Applies the “hero-rating-pill” CSS class for custom styling
  • Shows the average rating number and stars by default

Custom Styling Example #

You can create eye-catching rating displays by adding CSS to your theme. Here’s an example that creates a vibrant pill-shaped badge with a gradient background, perfect for hero sections:

Where to add this code: Go to Appearance → Customize → Additional CSS in your WordPress dashboard, or add it to your theme’s stylesheet.

.hero-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #2c7be5, #6db8ff);
  color: #fff;
  border-radius: 999px;
}

.hero-rating-pill .tre-rating-number {
  font-size: 1.6rem;
  font-weight: 700;
}

This CSS:

  • Creates an inline pill shape that flows naturally with surrounding text
  • Centers rating elements vertically with 10px spacing between them
  • Adds comfortable padding (10px vertical, 18px horizontal)
  • Applies a vibrant blue gradient background from deep blue to sky blue
  • Makes all text white for contrast
  • Creates perfectly rounded edges (999px radius) for the pill effect
  • Enlarges and bolds the rating number (1.6rem, weight 700) to make it stand out

Usage Tips #

For hero sections and banners: Use minimal format without count:

[trip_rating_summary trip_id="2487" format="minimal" show_count="false" class="hero-badge"]

For detailed review pages: Show the full breakdown:

[trip_rating_summary trip_id="2487" format="detailed" show_breakdown="true"]

For sidebar widgets: Use compact format with all elements:

[trip_rating_summary trip_id="2487" format="compact"]

For number-focused displays: Hide stars and show just the rating:

[trip_rating_summary trip_id="2487" show_stars="false" format="minimal"]

Format Comparison #

Minimal Format – Best for tight spaces, badges, and hero sections where you need maximum impact with minimum space. Shows only essential elements.

Compact Format – Best for sidebars, cards, and general-purpose placement. Balances information with space efficiency.

Detailed Format – Best for dedicated review sections and landing pages where you have room to show the full rating distribution with breakdown bars.

Summary #

The Trip Rating Summary shortcode ([trip_rating_summary]) gives you a flexible way to showcase traveler ratings anywhere on your WordPress site.

Whether you need a subtle badge in your hero section, a detailed breakdown on a landing page, or a sidebar widget, this shortcode adapts to your space and design requirements with three distinct formats.

By displaying average ratings, star visuals, review counts, and optional rating breakdowns, it builds immediate trust with potential travelers. The included schema markup ensures search engines can display your ratings in search results, giving you valuable SEO benefits that help your trips stand out.

What are your Feelings