Website Design Orlando

Responsive-Mobile design by Irina Blumenfeld

  • About
  • Services
    • Website Design
    • Local SEO
    • Digital Marketing
    • Website Care
  • Projects
  • Testimonials
  • Articles
    • Speaking
    • Tutorials
    • Resources
  • Support
  • Contact
  • Twitter
Home / Tutorials / How to add star rating in WordPress

How to add star rating in WordPress

Updated: February 5, 2019 //

  • ★
  • ★
  • ★
  • ★
  • ★

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:

feedback-form

If you click on 4 or more stars, it links to a Review Us page:

review-us-online

Challenge:

Make sure previous stars change color on mouse over. Below is a solution to achieve this only with CSS without JavaScript.

  1. Create new menu
  2. 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 (★):

    menu-expanded

    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:

    review-menu

  3. Style the star menu
  4. Insert in theme’s style.css:

    Gist – Review Us menu CSS

    You might have to adjust CSS to customize colors of stars, location and size of the menu.

Here’s HTML for this menu:

Gist – Review Us menu HTML

3.7/5 (96 Reviews)

Recent Posts

Launch website

10 Steps To Do Before Launching Your WordPress Website

Are you planning on launching a new site? Do you want it to be successful? It’s important to take certain steps in order to make[Read More…]

Mobile Menu Button

How to add text “Menu” next to Hamburger Icon

When you build a responsive site, you most likely will have a Hamburger icon for Menu. A lot of WordPress Genesis themes come with responsive[Read More…]

Plugins Slide

Plugins

Slides from the presentation about WordPress plugins at WordCamp Orlando 2016. This event was held on November 12-13, 2016 at the UCF Rosen College of[Read More…]

About Irina Blumenfeld

Web Consultant, empowering business owners through WordPress. Passionate about Web Performance.
Follow on Twitter

Categories

  • Resources (5)
  • Speaking (14)
  • Tutorials (17)

More Articles

  • WordCamp Orlando 2019
  • Stand Out In Search Results
  • How To Make Your Site Stand Out In Search Results
  • Speeding Up WordPress
  • WordCamp Jacksonville 2018
  • WordPress Orlando Gutenberg Meetup
  • WordCamp Miami 2018
  • Steps to do before launching a WordPress website
  • 10 Steps To Do Before Launching Your WordPress Website
  • Why is my WiFi so Slow? Best ways to Fix Slow WiFi at home
  • WordCamp Orlando 2017
  • How to hide author username in Beaver Builder Posts Module
  • How to fix slow loading images
  • Best Practices For Faster Websites
  • Plugins
  • WordCamp Orlando 2016
  • How to add star rating in WordPress
  • Make WordPress website faster in 3 steps
  • Migrate WordPress to HTTPS
  • Why you should migrate to HTTPS
  • WordCamp Jacksonville 2016
  • How to disable Emojis in WordPress
  • WordCamp Miami 2016
  • How to remove query strings from static resources
  • How to enable Free SSL, HTTP/2 protocol and CDN
  • Improve Your Website Performance
  • List of resources to speed up your website
  • 10 ways to speed up your website
  • Benefits of HTTP/2 Protocol
  • How to add custom post types to a Widget
  • Add previous/next links on single page of custom post type in Genesis
  • How to add text “Menu” next to Hamburger Icon
  • About
  • Services
  • Projects
  • Testimonials
  • Articles
  • Support
  • Contact
  • Twitter

Copyright © 2022 · Netmagik.com · All Rights Reserved · Privacy Policy · Disclosure · Sitemap
WordPress hosting by SiteGround
Tools We Recommend

Twitter Facebook Linked In Github Codepen