1. Home
  2. Docs
  3. BadgeOS Core
  4. Widgets

Widgets

The BadgeOS plugin provides several widgets that can be placed anywhere your theme has designated as a widget area. These widgets display information about BadgeOS achievements, ranks, and points.

Table Of Contents

  1. How To Insert BadgeOS Widgets
  2. Using The BadgeOS User Earned Achievement Widget
  3. Using The BadgeOS Earned User Ranks Widget
  4. Using The BadgeOS User Earned Point Widget

 

1. How To Insert BadgeOS Widgets

Let’s take a look at how BadgeOS Widgets can be added to your website. Please keep in mind that your theme determines the location where BadgeOS widgets can be inserted.

Add Widgets From The WordPress Appearance Section

  • From the WordPress dashboard, navigate to Appearance and click on Widgets.
  • Locate the widget area in which you’d like to add a widget.
  • Find the BadgeOS widget you want to add among the widget options to the left.
  • Drag and drop the selected widget into the widget area.
  • Configure the widgets options and save.

Add Widgets From The WordPress Customizer

  • From the WordPress dashboard, navigate to Appearance and go to Customize.
  • Go to the Widgets panel and select the widget area to which you’d like to add the widget.
  • Click the “Add a Widget” button and search for the BadgeOS widget.
  • Click on the widget to add it to the widget area.
  • Configure the widgets options and publish them.

2. Using The BadgeOS User Earned Achievement Widget

BadgeOS User Earned Achievement Widget can be added to any widget area. To use this widget, follow these steps:

  • Add the BadgeOS User Earned Achievement to the desired widget area.
  • Enter a title for the widget area.
  • Enter the number of achievements to display in the  Number to display field. Enter 0 for displaying all earned achievements.
  • Go to the Hide the following fields option to hide the title or thumbnail, respectively. 
  • Enter the title for the rank section in the Rank Section Title field. 
  • Select the rank types you want to be shown in the sidebar from the Display only the following User Rank Types options. 
  • Select the point types that will be displayed as earned points from the Select Point Type options. The total points of the selected point type will be displayed on the front-end.
  • Select the achievement types that you want to display in the sidebar from the Display only the following User Achievement Types options. 
  • Click Save.

This is how the widget looks on the frontend (Keep in mind that the look might change based on the theme):

3. Using The BadgeOS Earned User Ranks Widget

BadgeOS Earned User Ranks Widget can be added to any widget area. To use the widget, follow these steps:

  • From the WordPress admin dashboard, navigate to Appearance > Widgets.
  • Add the BadgeOS Earned User Ranks widget to the desired widget area.
  • Enable the “Display user’s total points” option if you want to display Point Types in the widget.
  •  Select the point types that will be displayed from the Select Point Type options. The total points of the selected point type will be displayed on the front-end.
  • Enter a title for the widget area.
  • Enter the number of ranks to display in the  Number to display field. Enter 0 to display all earned ranks.
  • To hide the title or thumbnail, respectively, select them from the Hide the following fields option. 
  • Choose which Rank Types to display in the widget by selecting them from the Display only the following User Rank Types field.
  • Save the widget settings.

This is how the widget looks like on the frontend:

Note: (Keep in mind that the look might change based on the theme)

4. Using The BadgeOS Earned User Points Widget

BadgeOS Earned User Points Widget can be added to any widget area. To use this widget, follow these steps:

  • From the WordPress admin dashboard, navigate to Appearance > Widgets.
  • Add the BadgeOS Earned User Points widget to the desired widget area.
  • Enable the “Display user’s total points”  option if you want to display Point Types in the widget.
  • Select the point types that will be displayed from the Select Point Type option. The total points of the selected point type will be displayed on the front-end.
  • Enter a title for the widget area.
  • Enter the number of ranks to display in the  Number to display field. Enter 0 to display all earned ranks.
  • To hide the title or thumbnail, respectively, select them from the Hide the following fields option. 
  • Choose which Rank Types to display in the widget by selecting them from the Display only the following User Rank Types field. 
  • Save the widget settings.