Badge

May 03, 2024

Badge Plugin

Display a badge (based the "badges") without requiring file-system access or knowledge of HTML.

Display “Badges” in the side-panel which points to a web-site and an image which is then used to build the “badge”.

To access the configuration you have to go to Appearance > Widgets and edit the settings in the Panel.

Using the Widget you can choose whether to:

  1. (Optionally) display a Title
  2. Link to a site
  3. Required link to an image to mark that site (any size will work, but the “standard” seems to be 88 pixels wide by 31 pixels high)
  4. Pad the Badge (including centring the text); some people may prefer using their own CSS, so this is an optional configuration.
  5. Enable “Display Badge in a Box” (enabled by default)
  6. Enable the Displaying of a Drop-Shadow

If more control is needed, or more badges need to be displayed, the badges plugin on the WordPress site might be a better fit.

Installation

Install

  1. Unzip the badges.zip file.
  2. Upload badges.php to the /wp-content/plugins/ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Use the “Badges” widget.

Upgrade

  1. Follow your normal installation process
  2. Open the Widget Control Panel for “Badges” and confirm settings.
  3. Sit back and enjoy…

Use the WordPress Plug-in System

  1. Select “Upgrade and Activate”
  2. Congratulate yourself on a sterling job.

Screenshots

  1. Create a "Licensing" badge that points to the Creative Commons website and uses a CC 88x31 banner

    Create a "Licensing" badge that points to the Creative Commons website and uses a CC 88x31 banner

  2. The result of the configuration in No 1

    The result of the configuration in No 1

  3. Boxing a Badge to SpreadFirefox with an added drop-shadow

    Boxing a Badge to SpreadFirefox with an added drop-shadow

  4. The resultant Badge

    The resultant Badge

FAQ

How do I style the badges using CSS?

Quite simply by using the div.badge class.

How do I style a single badge?

Every badge gets a unique ID generated by the plug-in based on the plug-in’s name and the badge’s container ID. This will likely look something like “inner-badge-[NUMBER]”.

Changelog

1.5

  • Very minor update to update the links to my blog
  • Tested up to WordPress 5.2.3

1.1

  • Minor update to add an “id” selector to the displayed badges

1.0

  • Initial Public Release

Details

  • Version: 1.6
  • Active installations: 100
  • WordPress Version: 6.0
  • Tested up to: 6.5.5

Ratings


5 Stars
4 Stars
3 Stars
2 Stars
1 Stars