RC Post Rating

This plugin adds a pair of buttons that provide the ability for visitors to your website to give feedback on page / post / custom post type content by up / down rating. The Up/down rating statistics can be view on the respective post lists in the WordPress admin and also via a table of statistics in a Dashboard widget, these statistics can be exported in a CSV format file.

You can configure all of the plugin settings from the “RC Post Rating” menu found in the “Settings” menu in your WordPress admin.

Yes, this plugin adds a new block called “Add Post Rating Block” in the ‘Widgets’ category of the block inserter. Note that using shortcode provides the ability to override the default settings, currently this is not possible with the block, however, it is possible to use the “Shortcode” block in the editor and add the buttons using the shortcode method instead.

Yes, you can add this to your theme by using the shortcode, you can use the following PHP code in the appropriate file(s) within your site’s theme:

<?php echo do_shortcode( '[rc_post_rating]' ); ?>

Yes, you can set the default button text on the plugin settings page, use the “RC Post Rating” menu found in the “Settings” menu in your WordPress admin. If using the shortcode method of adding the buttons to your site you can also override these defaults with shortcode attributes.

Yes, but only when using the shortcode. By default the buttons render using a links, whilst this works it is not always the best for accessibility to instead there is an option to use button elements instead. To do this add the type parameter to the shortcode as follows:

[rc_post_rating type="button"]

For compatibility reasons for existing sites using this plugin the use of type="button" has been added as an optional parameter rather than changing the default button markup.

This plugin doesn’t add any CSS styles so you will need to either add some CSS styles to the theme of your site or use the “Additional CSS” function in the WordPress admin to add some CSS styles.

The HTML markup for the buttons has a containing DIV element with a class of post-rating-tool, inside this div are two elements that function as clickable buttons, one for up-rating with a class rating-up and one for down-rating with a class rating-down. When a user clicks on one of the button links it will add an additional class of active to that button and a class of disabled to the other button (note that these states persist for the user via a local storage setting in their browser which prevents them from rating a page more than once). Note that as per the previous FAQ item “Can I change the type of element used for the buttons?” it is possible to change the element used for these buttons.

Here is an example of the default generated HTML markup:

<div class="post-rating-tool" data-post-rating-id="123">
    <a href="#yes" class="rating-up active">Yes</a>
    <a href="#no" class="rating-up disabled">No</a>
</div>

Here is an example of the generated HTML markup with the type="button" parameter added to the shortcode:

<div class="post-rating-tool" data-post-rating-id="123">
    <button class="rating-up active">Yes</button>
    <button class="rating-up disabled">No</button>
</div>

Here is some example CSS to provide styling for the basic states of the buttons, note that these include styles for both the use of a or button elements:

.post-rating-tool a, .post-rating-tool button {
    border-radius: 6px;
    background-color: #bbb;
    color: #000;
    padding: 10px;
    margin-left: 5px;
    margin-right: 5px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.post-rating-tool a:hover, .post-rating-tool button:hover {
    background-color: #ddd;
    color: #000;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

.post-rating-tool a.active, .post-rating-tool a.active:hover, .post-rating-tool button.active, .post-rating-tool button.active:hover {
    background-color: #000;
    color: #fff;
}

.post-rating-tool a.disabled, .post-rating-tool a.disabled:hover, .post-rating-tool button.disabled, .post-rating-tool button.disabled:hover {
    background-color: #ddd;
    color: #ccc;
    cursor: not-allowed;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

If the plugin has been installed and activated and you have added rating buttons via either a shortcode or a block to a page on your site or to a template in your theme then you should see the buttons on the content. Click one of the Up / Down buttons and it should save that rating to that content. If you check that content in the WordPress admin you should be able to see “Upvotes” and “Downvotes” columns in the Page / Post listing screen, look for the page / post you clicked the rating button on and you should see a numeric value in either of those columns. You should also be able to see a Dashboard widghet with a statistics table if you have enabled this in the plugin settings.

If you think you have this all set up but the buttons don’t seem to be working then it’s possible something else may be clashing with their functionality. The buttons when clicked submit the rating via WordPress’s REST API, if you have somehow disabled the REST API then this will prevent the ratings from working, if this isn’t something you have knowingly disabled then it’s possible that security plugins such as Wordfence that provide web application firewall type protection may also be blocking it from working. Please check any security software to see if it may be mistakenly blocking it, usually there will be some kind of method to whitelist certain actions within security plugins.