Star Rating in Page Header with {{custom_field.name}}

Hi there,

How does your HTML code work? Does it take a variable (1,2,3,4,5 stars etc..) and build the number of stars?

If so, you could create a shortcode:

add_shortcode( 'star_ratings', function() {
    ob_start();

    $stars = get_post_meta( get_the_ID(), '_your_star_rating_field_name', true );

    if ( $stars ) {
        ?>
            Your HTML with $stars variable in here.
        <?php
    }

    return ob_get_clean();
} );

Then you can use [star_ratings] in your Hero.

Let me know :)

Hey again and thanks for your answer!
No, sorry - I have just done a very simple HTML code and styled it with CSS...

<div class="review rating">
	<div class="review subject">4 / 5</div>
	<div class="stars">
		<span class="filled-star">
		</span>
		<span class="filled-star">
		</span>
		<span class="filled-star">
		</span>
		<span class="filled-star">
		</span>
		<span class="empty-star">
		</span>
	</div>
</div>

And then I added some basic CSS-styling to display it on the front end.

.filled-star:before {
    content: "⭐";
    padding: 10px;
    margin: -10px;
}
.empty-star:before {
    content: "⭐";
		filter: saturate(0.1);
    padding: 10px;
    margin: -10px;
}

If you have a code example with variables please link it and I'll try to learn :) I guess that's better practice than my code.

I got help from my master coder friend which recoded the snippet to look like this.
I'll mark the thread as Solved but if anyone has any comments on improvements, please let me know!

add_shortcode( 'star_ratings', function() {
    ob_start();

    $stars = get_post_meta( get_the_ID(), 'review_stars', true );

    if ( $stars ) {
		$starsInt = (int)$stars;
        ?>
            <div class="review rating">
				<div class="review subject"><?php echo $stars; ?> / 5</div>
				<div class="stars">
					<!-- if 0 stars -->
					<?php if($starsInt === 0) { ?>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
					<?php } ?>
					<?php if($starsInt === 1) { ?>
						<span class="filled-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
					<?php } ?>
					<?php if($starsInt === 2) { ?>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
					<?php } ?>
					<?php if($starsInt === 3) { ?>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="empty-star">
						</span>
						<span class="empty-star">
						</span>
					<?php } ?>	
					<?php if($starsInt === 4) { ?>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="empty-star">
						</span>
					<?php } ?>
					<?php if($starsInt === 5) { ?>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
						<span class="filled-star">
						</span>
					<?php } ?>
						
					<!--<span class="filled-star">
					</span>
					<span class="filled-star">
					</span>
					<span class="filled-star">
					</span>
					<span class="filled-star">
					</span>
					<span class="empty-star">
					</span>-->
				</div>
			</div>
        <?php
    }

    return ob_get_clean();
} );

Looks good! :)

hy Marcus,
I tried to implant your code but unfortunately it doesn't work for me !

How and where did you implant Code?

Hopefully you can read my message.
best regards
lil

Hi there,

the code Marcus provided here is a PHP snippet that creates a shortcode. Adding PHP: https://docs.generatepress.com/article/adding-php/

Once the code is added you can the display the review stars anywhere with the [star_ratings] shortcode

You will also need to include the CSS in Customizer > Additional CSS provided here

Hello David,
thank you very much for your message
i have implanted css and PHP snippet but unfortunately it doesn't work on my Site, i implatet php code and css code with copy paste! what could I have done wrong?

lil

For it to work you have to:

1. Create a Custom Field named: review_stars in your post
2. Add the [star_ratings] shortcode to the post