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

Home Forums Support Star Rating in Page Header with {{custom_field.name}}

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #994063
    Marcus

    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)

    #994189
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #994311
    Marcus

    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.

    #994378
    Marcus

    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();
    } );
    #994700
    Tom
    Lead Developer
    Lead Developer
    #1060358
    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

    #1060390
    David
    Staff
    Customer Support

    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

    #1060732
    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

    #1060745
    David
    Staff
    Customer Support

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.