Documentation

How to create a widget


In this article, you’ll learn how to create a rating widget for your WordPress-powered website using TotalRating.

Glossary#

This glossary helps you grasp the creation process of a rating widget and reduce ambiguity.

Keyword Meaning
Rating A rating is an evaluation or assessment of an entity, in terms of quality, quantity, or some combination of both.
Attribute A quality of an entity that has an assessed value within a scale. For example, a 5-stars scale of product quality.
Entity An entity is an object that receives a rating. For instance, a post is an entity.
Widget The widget refers to a “box” where users can cast their ratings and see results.
Preset A premade set of attributes serves a general purpose such as 5-stars, thumbs up/down, etc…

Instructions#

First, we need to launch the wizard, from the bottom navigation panel, navigate to widgets:

Keyboard shortcut
You can also launch the wizard by pressing F2 on your keyboard.

Then, choose a preset from the “let’s get started” box or start with an empty widget. For the sake of simplicity, the 5 Stars preset will be used in this article.

TotalRating wizard launcher
TotalRating wizard launcher

The wizard window will appear right away. The wizard consists of 3 steps that cover main widget functionality, you can configure it further after creating the widget.


Basics#

Rating widget basics settings
Rating widget basics settings
  • Widget name: Mainly for administrators to label and recognize widgets easily.
  • Preset: It’s based on your previous selection, but you can easily switch to another preset if you want to change that.
  • Entities: You can choose what entities are linked to the rating widget, it could be a post type or unspecified if you want to integrate the widget manually later on.

Look & feel#

Rating widget appearance settings
Rating widget appearance settings
  • Color palette: Depending on your website design, you can either use a light palette or a dark one.
  • Spacing: You can adjust the spacing and choose what suits your website design.
  • Emplacement: Control the emplacement of the widget, whether underneath the content or above it.

Behaviors#

Rating widget behaviors
Rating widget behaviors
  • Results visibility: Control who can see results.
  • Confirmation: You can use this behavior to prevent accidental ratings.

Once you finish the configuration, click on finish, you’ll be redirected to the widget editor for further configuration.

Rating widget editor
Rating widget editor
🎉 Voila! You’ve created your rating widget successfully.