Tutorial : WordPress – Add a 5-Star Rating Shortcode with Custom Colors

• Explanation:
  • Plugin Header: Defines the plugin name, description, version, and author.
  • Shortcode Function: Registers the [easycoding_star_rating] shortcode. The rating and color attributes specify the number of filled stars and the colour scheme.
  • Color Class: Adds a class based on the color chosen, which links to styles in the CSS file.
  • Enqueue CSS: Loads easycoding-star-rating.css so the plugin can apply custom styles.

Step 3: Write the CSS File (easycoding-star-rating.css)

1. Open easycoding-star-rating.css.
2. Add the following CSS code to style the stars based on the color attribute:

<?php
/*
Plugin Name: EasyCodingWithAI - Star Rating Shortcode
Description: A shortcode to display a 5-star rating with customizable colors.
Version: 1.2
Author: EasyCodingWithAI
*/

function easycoding_star_rating_shortcode($atts) {
    // Set default rating and color
    $atts = shortcode_atts(array(
        'rating' => 0,
        'color' => 'black', // Default color
    ), $atts);

    $rating = intval($atts['rating']);
    $color = sanitize_text_field($atts['color']);

    // Map color to CSS class
    $color_class = 'rating-' . $color;

    $output = '<div class="easycoding-star-rating ' . esc_attr($color_class) . '">';

    // Generate stars based on rating
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $output .= '<span class="star filled">★</span>'; // Filled star
        } else {
            $output .= '<span class="star unfilled">★</span>'; // Unfilled star
        }
    }

    $output .= '</div>';

    return $output;
}

// Register the shortcode
add_shortcode('easycoding_star_rating', 'easycoding_star_rating_shortcode');

// Enqueue the CSS file
function easycoding_star_rating_enqueue_styles() {
    wp_enqueue_style('easycoding-star-rating-css', plugins_url('easycoding-star-rating.css', __FILE__));
}

add_action('wp_enqueue_scripts', 'easycoding_star_rating_enqueue_styles');
?>

• Explanation:
  • Default Star Styles: Sets the star font size and applies low opacity to unfilled stars.
  • Color Classes: Each rating color class (rating-black, rating-red, etc.) applies a specific color to filled stars based on the shortcode’s color attribute.

Step 4: Test the Addon

1. Activate the Plugin:
   • Go to your WordPress Dashboard > Plugins, find EasyCodingWithAI – Star Rating Shortcode and activate it.
2. Test the Shortcode:
   • Add the shortcode to a post or page to verify it displays correctly.
   • Example: [easycoding_star_rating rating="3" color="yellow"] – This should display 3 filled yellow stars.

Examples of the Shortcode

Here are a few examples with different colors:

• [easycoding_star_rating rating="3" color="black"]
• [easycoding_star_rating rating="1" color="red"]
• [easycoding_star_rating rating="2" color="orange"]
• [easycoding_star_rating rating="3" color="yellow"]
• [easycoding_star_rating rating="4" color="green"]
• [easycoding_star_rating rating="5" color="blue"]

Each example will apply the specified color to the filled stars while keeping the remaining stars at a low opacity.