[Resolved] Star Rating in Page Header with {{custom_field.name}}

[Marcus Lindblad]

Hi!

I am currently playing around with the Page Header and trying to find a way to add star ratings to some of my posts.

I found that you could use {{custom_field.name}} in the page header which makes it really scalable.

Problem:
I’ve created a little bit of HTML code to display the stars in the page header, but how can I make it so that I can control the amount of stars from every post? (With Custom Fields or something similar)

[Tom]

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 🙂

[Marcus Lindblad]

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.

[Marcus Lindblad]

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();
} );

[Tom]

Looks good! 🙂

[Lilia]

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

[David]

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

[Lilia]

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

[David]

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

[Author]

Posts