Recently I had to include star rating on my client’s website.
The goal was to offer easier and faster way to rate the client on several websites, and direct unhappy customers to a feedback form. I know this might not always be effective, but it might catch some dissatisfied clients before they post negative feedback on social media. Plus, not all businesses monitor their reviews, and this way they get feedback right away, so that they can address the problem faster.
The way it works is if you click on 3 stars or less, it links to a feedback form page:
If you click on 4 or more stars, it links to a Review Us page:
Challenge:
Make sure previous stars change color on mouse over. Below is a solution to achieve this only with CSS without JavaScript.
- Create new menu
- Style the star menu
I decided to include star rating as a menu.
In functions.php create a new menu:
Gist – Create New “Review Us” menu
If you created menu correctly, you should be able to go to Appearance-Menus and find your new menu.
Choose Select Menu to edit.
Add new links to Review Us Menu.
I created 2 pages before, one – Feedback form, and another – Review Us page (as on images above).
Add those pages to the menu. In the Navigation label, I put Star symbol (★):
As you can see, I added a class of ‘star’ in the class field for styling later.
The first 3 stars link to a Feedback form and 4th and 5th links to Review Us online page:
Insert in theme’s style.css:
You might have to adjust CSS to customize colors of stars, location and size of the menu.
Here’s HTML for this menu:
