Recently I was working on a ratings website, and needed a quick way to consistently generate the current star ratings of the items. Many of you are familiar with the ‘dashicons’ font that is shipped with WordPress, but if you aren’t, it’s a simple icon-font available to theme and plugin developers. You’re probably more familiar with it than you think, it’s used to add icons to the WordPress admin dashboard menu:

Screen Shot 2014-07-07 at 12.27.33 AM

There are 3 icons I was interested in, and they are the 3 stars:
Screen Shot 2014-07-07 at 12.41.41 AM

With those icons, I could generate something that looked like this:
Screen Shot 2014-07-07 at 12.34.11 AM

This function allows accuracy to the closest 1/2 star. You simply pass in your rating number, and it will return you HTML output for the stars.

function kfg_generate_stars( $number ) {
	// Get the whole number
	$whole = floor( $number );

	// Find out if our number contains a decimal
	$fraction = $number - $whole;

	$i = 0;
	// This is the total number of stars to generate.
	$total = 5;
	$output = '';

	// Generate the filled stars
	while( $i < $whole ) {
		$output .= '<span class="ratings dashicons dashicons-star-filled"></span>';
		$i++;
	}

	// Generate the half star, if needed
	if ( $fraction > 0 ) {
		$output .= '<span class="ratings dashicons dashicons-star-half"></span>';
		$i++;
	}

	// Until total is met, generate empty stars
	if ( $i < $total ) {
		while ( $i < $total ) {
			$output .= '<span class="ratings dashicons dashicons-star-empty"></span>';
			$i++;
		}
	}

	return $output;
}

As a note, if your theme doesn’t include dashicons in the front end (by default it’s only in the Admin), you can use the following to add it:

function kfg_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'kfg_load_dashicons' );

To get a full listing of items included in the Dashicons font, visit http://melchoyce.github.io/dashicons/

Image courtesy of Scott Cresswell via Flickr

Posted by Chris Klosowski

Chris Klosowski is the Director of Technology at Sandhills Development, LLC, creators of fine WordPress plugins, and ecommerce solutions.

19 Comments

  1. Fantastic. Saved me some time there! Many thanks.

    Reply

    1. Awesome! Glad to hear that!

      Reply

  2. Thanks so much! This is awesome!

    Reply

  3. Exellent tutorial Chris. You just saved me hours of rolling out my own from scratch.

    Reply

  4. Quality articles is the important to attract the viewers to
    pay a quick visit the website, that’s what this site is providing.

    Reply

  5. Link exchange is nothing else except it is simply placing the other person’s
    blog link on your page at suitable place and other person will also
    do similar in support of you.

    Reply

  6. cialis for daily use online – taking two cialis pills tadalafil 30mg capsules

    Reply

  7. I visited multiple blogs but the audio quality for audio songs existing at
    this website is genuinely wonderful.

    Reply

  8. viagra 100mg price uk over the counter viagra substitute walmart – buying viagra in australia

    Reply

  9. amoxicillin over the counter in canada amoxil for sale – amoxicillin over the counter in canada

    Reply

  10. ivermectin price stromectol – ivermectin 3mg

    Reply

  11. buy stromectol online ivermectin price usa – stromectol 3mg tablets

    Reply

  12. ed pills online buy drug online – ed treatment natural

    Reply

  13. ed treatment drugs prescription drugs without doctor approval – mens erections

    Reply

  14. ivermectin 50ml ivermectin tablets for humans for sale – stromectol order online

    Reply

  15. how much is lipitor lipitor generic – generic lipitor 10mg

    Reply

  16. Do you have a spam problem on this blog; I also am a blogger,
    and I was wondering your situation; we have created some nice procedures and we are
    looking to swap solutions with others, why not shoot me an email if
    interested.

    Reply

  17. Thanks , I have recently been searching for info approximately this
    topic for a while and yours is the greatest I’ve
    came upon till now. However, what in regards to the bottom line?
    Are you positive in regards to the source?

    Reply

  18. cost of viagra viagra over the counter – viagra price

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.