How to Display Ratings with WordPress Links
If you’re like me, the WordPress Codex is an endless source of new template options. Today we’re going to use an often overlooked feature in the WordPress dashboard to assign and display ratings on links.
The aim of this tutorial is to create a rating display system that pulls from the link section of WordPress (not posts). The rating will be represented on a five star scale to help add some flair to the result. Hopefully this will bring some much deserved attention to your favorite links, and let readers know which ones are worth the time.
The Result
Here’s a look at the final product live in a sidebar:
The nice part about this is that once we’ve inserted the code into a template, everything can be managed from fields inside the WordPress dashboard. Updating or adding a link is as simple as filling out a few text boxes in the WordPress option panel.
Adding Ratings in the Dashboard
First, it would probably be a good idea to see where the you can assign ratings to links in the first place. Under the WordPress dashboard, navigate over to the links panel and then select “Edit” on any of the links there.
If you scroll all the way to the bottom of this page, you should see that the final option (under the “Advanced Box”) is a select box entitled “Rating”. This will be the basis for this tutorial.
Template Tags & PHP
Before we continue, let’s take a look at the individual link result to get a better idea of what we’ll be doing:
As you can see, we’re pulling four different fields together to compose each link item. Each of these fields will be contained within a PHP object for the link roll that we’ll define below.
This code is loosely based off of a thread found in the WordPress support forum. It’s been adapted for use with ratings and a few other fields for this tutorial. Copy this into your WordPress template where you would like the links and ratings to appear (e.g. sidebar.php).
Typically I like to avoid throwing everything out there at once in tutorials, but in this case the PHP and HTML are so closely related that splitting it up would likely be more confusing. To help prevent confusion an explanation will follow down below.
<?php
$bookmarks = array();
$bookmarks = get_bookmarks(array(
orderby => 'rating',
order => 'DESC'
));
if ($bookmarks[0] != '') { ?>
<ul class="linklist">
<h3>Recommended Links</h3>
<?php foreach ( $bookmarks as $bookmark ) { ?>
<li>
<h4><a title="<?php echo $bookmark->link_name; ?>" href="<?php echo clean_url($bookmark->link_url); ?>" target="_blank"><?php echo $bookmark->link_name; ?></a></h4>
<p><?php echo $bookmark->link_description ?></p>
</li>
<? } ?>
</ul>
<?php } ?>
This code starts by defining $bookmarks as an array, which will be populated with the list of links from WordPress. In the arguments of the get_bookmarks() method, we’re saying we want the results ordered by the value of the rating in descending order. This way the “best” links will be displayed at the top of the list. If you need additional organization happening at this stage, the WordPress Codex has an entry listing all other arguments available.
Adding a Star Rating System
Let’s make the ratings a little more exciting by showing a star ranking system. For this tutorial we’ll be working on a five star system in full intervals. Implementing half stars is certainly a possible expansion to this, but for most bloggers a five star system should be accurate enough. For that sake of simplicity, we’ll assume that any rating over 5 also denotes a 5 star rating.
The star icon used is from a WeFunction set available for free here. It is named star_48.png once extracted. You will need to place it into a folder named “images” located the root directory of your theme to follow this example along, but feel free to substitute as needed.
Within the link loop (directly under the bookmark description line) paste in the following PHP to include star ratings.
<div class="link-rating">
<?php
$link_rating = $bookmark->link_rating;
if ($link_rating >= 5){
//If rating is five or greater, just assign a perfect score
for ($i = 1; $i < 6; $i++){ ?>
<img src="<?php bloginfo('template_directory'); ?>/images/star_48.png"/>
<?php }
}else{
//If rating is under 5, display same number of stars.
for ($i = 1; $i <= $link_rating; $i++){ ?>
<img src="<?php bloginfo('template_directory'); ?>/images/star_48.png"/>
<?php }
} ?>
</div>
Sample CSS
If you’re looking for a starting point to style the list you’ve just created, here’s the CSS I’ve used for my demonstration. One of the biggest changes below is to the size of each star image.
/*Link Rating*/
.linklist{clear:both; font-family:arial, sans-serif;}
.linklist li{clear:both; overflow:hidden; display:block; margin-bottom:5px; padding:10px; background:#F3F3F3; font-size:12px; border:1px solid #DDD;}
.linklist h3{margin-bottom:10px;}
.linklist h4{clear:both; font-weight:bold; font-size:16px;}
.linklist h4 a{text-decoration:none; color:#191919;}
ul.linklist li p{padding-bottom:5px; margin:5px 0px; padding:0; color:#333;}
.link-rating{clear:both; margin:0;}
.link-rating img{width:20px; height:20px; margin:0; padding:0;}
Rate Away
Hopefully by now you should have a much more visual way of displaying link ratings. To help solve any issues, I’ve provided a downloadable version below of the PHP block (minus CSS) to use as reference.
Have any interesting ideas for further application with this feature? Have I missed something? Be sure to let us know in the comments below!
