0

All, have a movie review site that I assign a score to. Currently I'm using a widget which works fine...but I changed all of my scores to a 5 star rating system (3.5/5, 5/5, etc.) so the widget that was using it based on percentages to fill the progress bar (a score of 70 would fill 70% of the bar and so forth) now only displays 3.5% of that bar.

What I want to do is use the stars in font awesome, which I do have working on my site, instead.

But I'm having trouble modifying the widget code to suit my new needs.

I'm wondering if I need to make a case for each one or if there's an easier way? What I mean by "case" is by saying (and I'm saying this in English as opposed to code) "If the movie has a score of 1/5 then display one full star followed by four empty ones." And so forth. Or is there a way I can display the font awesome stars based on my dynamically-generated scores?

My widget code is below if that helps:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
if( get_post_meta($postid, 'RankVideo', true))  {
echo '<div class="bar_mortice rounded"><div class="progress rounded" style="width: ' .        get_post_meta($postid, 'RankVideo', true) . '%"></div></div>';
} elseif( get_post_meta($postid, 'ecpt_rankvideo', true)) {
echo '<div class="bar_mortice rounded"><div class="progress rounded" style="width: ' .        get_post_meta($postid, 'ecpt_rankvideo', true) . '%"></div></div>';
} 
?>

So basically I'm looking for the necessary edits to the above widget code to get it to display the star font awesome icons based on a 5 star rating system as opposed to the base 100 system I had before.

Make sense?

Improve this question

1 Answer 1

Reset to default
1

This is more a PHP question from what I can gather, but hopefully this will help or at least get you on your way. I am making a few assumptions here, like you already have FontAwesome called and working in your site for example.

I am also not sure why you have 2x get_post_meta(); functions in a conditional statement with the same output for each condition - doesn't make sense to me but I have included it the way you have it in the sample code below in any case.

You can try this, I have added comments so you can understand the logic:

<?php
global $wp_query;
$postid = $wp_query->post->ID;

if( get_post_meta($postid, 'RankVideo', true))  {

    $metabox_value = get_post_meta($postid, 'RankVideo', true);

    // Evaluates the string and converts it to integar or float value
    if ( strpos( $metabox_value, '.' ) === false ) {
        $ranking = (int)$metabox_value;
    } else {
        $ranking = (float)$metabox_value;
    }

    if( is_float( $ranking ) ) { // Check to see if whole number or decimal
        $rounded_ranking = round($ranking); // If decimal round it down to a whole number
        echo '<div class="bar_mortice rounded">';
        // For Loop so we can run the stars as many times as is set, with offset of 2 to because we adding half star statically adter our For loop
        for ($counter=2; $counter <= $rounded_ranking; $counter++){ 
            echo '<i class="fa fa-star"></i>';
        }
        echo '<i class="fa fa-star-half-o"></i><div>'; // Static half star used as the ranking value is a decimal and the is_float condition is met.

    } 

    else {
        echo '<div class="bar_mortice rounded">';
        // For Loop so we can run the stars as many times as is set, no offset need, as no half star required for whole number rankings
        for ($counter=1; $counter <= $ranking; $counter++){
            echo '<i class="fa fa-star"></i>';
        }
    }

} 


elseif( get_post_meta($postid, 'ecpt_rankvideo', true)) {

    $metabox_value = get_post_meta($postid, 'ecpt_rankvideo', true);

    // Evaluates the string and converts it to integar or float value
    if ( strpos( $metabox_value, '.' ) === false ) {
        $ranking = (int)$metabox_value;
    } else {
        $ranking = (float)$metabox_value;
    }

    if( is_float( $ranking ) ) {
        $rounded_ranking = round($ranking);
        echo '<div class="bar_mortice rounded">';
        for ($counter=2; $counter <= $rounded_ranking; $counter++){
            echo '<i class="fa fa-star"></i>';
        }
        echo '<i class="fa fa-star-half-o"></i><div>';

    } 

    else {
        echo '<div class="bar_mortice rounded">';
        for ($counter=1; $counter <= $ranking; $counter++){
            echo '<i class="fa fa-star"></i>';
        }
    }
} 
?>
Improve this answer
3
  • Thank you, I'll give it a shot. I have two conditional statements as I've got two sets of reviews, some were imported from an older database and use a different rating variable and others are newer, so this encompasses both the old and new in one statement. There's probably an easier way to do it, but I'm too stupid to figure it out.
    – user34872
    Jul 2, 2014 at 21:32
  • Doesn't see to work. When I view source it does, but there's nothing displaying on the page. I'll chalk it up to my error and not yours.
    – user34872
    Jul 2, 2014 at 21:47
  • Ok, I updated the code above so try it first. It evaluates the string from your metabox inputs and converts it to integers or floats(decimals). You will need to update your metabox values for each post/page with the new format. (using 1-5 or using halves like, 1.5 or 4.5). Also please make sure FontAwesome is being included correctly and check what version? Lastly could be CSS hiding it, try remove <div class="bar_mortice rounded"> & closing </div> from the code and then check so no rules are applied to this. But inspect any CSS surrounding where this goes to ensure its not that.
    – Matt Royal
    Jul 3, 2014 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.