Introduction: Issuing OpenBadges With Wordpress

I recently looked into OpenBadges and how they've come along since the initial kick-off in [date] by the Mozilla Foundation. Things have actually come a long way, with people developing plugins and extensions for a variety of CMS. The local fablab (I've told you about them already, my buddies at the FacLab !) recently started putting together its own MOOCs and the question of awarding recognition came up - that's when I mentioned the OpenBadges research I recently ran and looked into it a little more. So much so that I went ahead and wrote a quick tutorial on how to issue your own badges with a basic Wordpress install, and the OpenBadges Designer and wpBadger extensions.

If you're considering using OpenBadges in the future for your own association, fablab, hackerspace or school I hope this helps - let me know what you think !

Step 1: Installing the Open Badges Designer Extension

First, we're going to download and install the tool that'll let you create badges : Open Badges Designer by OpenBadges.me. This website was designed to help people build and download their own Open Badges designs, and released in late 2014 as a Wordpress extension - which is just what we're going to work with today.

  1. Log in to your Wordpress website as an administrator,
  2. go to the Add New option from the Plugins menu ;
  3. search for the OpenBadges.me Open Badges Designer and Install it
  4. That's it !

Things have come a long way since the time when you had to install Wordpress plugins manually but if for some reason you can't reach the Wordpress plugins repository from your blog, you can download the Open Badges Designer from https://wordpress.org/plugins/openbadgesme-open-badges-designer/ and install it the old way.

Once you're all done installing the Designer, it's time to design your first badge !

Step 2: Designing Your First OpenBadge

An OpenBadge is both style and substance : we're going to design what it looks like first, then create the Badge itself and what it stands for. Let's start with the looks !

While you're still logged in as an admin, click on the Badge Designer option in the Wordpress Media menu.

The Badge Designer lets you create your design from some basic elements :

  • Curved Text that you can set along the arc of your choice
  • Badge Text that will show up either on the Badge itself or on the banner under it
  • Banners that will go at the bottom of your Badge
  • Icons, pre-built decorative designs for your Badge
  • Inner shapes that define the inside shape of your Badge and
  • Shapes that give your Badge its overall shape

You can adjust most of these Badge components with the following settings :

  • Horizontal position
  • Vertical position
  • Opacity
  • Colour
  • Police, Size and Style for any text in your badge.

Suddenly, an alternative appears !

If the Badge Designer tool feels to simplistic or cumbersome to use, you can also upload a badge design of your own : just make sure it's a 200 by 200 pixels PNG file so it plays nice with whatever badge you might make in the future using the Designer tool.

OpenBadges are already in use in many places but if you could use some inspiration, you should check Adafruit's iron-on patches as well as DIY.org's Skill patches. For this example, I designed a quick and dirty Gold Star badge to salute someone's visiting a fictional fablab for 25 times :)

Now that we've given your badge a face, time to give it more substance : let's save it in your Wordpress Gallery and move on to the next step !

Step 3: Installing the WPBadger Extension

Now that we have designed the looks of your first Badge, we need to actually make it a Badge. For this, we need to install the WPBadger extension. Still logged in as an administrator, go to the Plugins > Add New menu of your Wordpress, then :

  1. Type the WPBadger extension name in the search field,
  2. click on the Install Now button...
  3. ...And you're done !

Now that WPBadger is installed, let's go set it up !

Step 4: Configuring WPBadger

In order to be able to issue badges for us, WPBadger is going to require a bit of setup. Let's get started !

From your Dashboard, select WPBadger Config in the Settings menu. There arent't a lot of options to setup, but let's make sure we get them right.

  • Issuing Agent Name is the name of the person registered as issuing badges.
  • Issuing Organization is the...name of the organization issuing the badge. Also, I'm going to feel like I'm repeating myself a lot in the next few items.
  • Contact Email Address is the email address where awardees can reach you at for more information. It doesn't have to be an Admin email address, which is more important than you might think. More on that in a moment.
  • Badge Award Email Text is the body of the email people will receive when they are awarded badge. It is not badge specific, so this is not where you will explain awardees which badge they have received and why - we'll save that for later.

Once you've filled in all the fields, save your changes and let's move on to the next step to create your very first bona fide OpenBadge !

Step 5: Creating Your First OpenBadge

Now that WPBadger is all set, we can create our first OpenBadge ! In the Wordpress menu, go over the Badges open that's newly available and click on Add New. The Badge creation page is very much like a posting page : let's go through the various fields to fill in together :

  • the Title field is used to give your OpenBadge a name ;
  • the post field is used to describe your OpenBadge's award context ;
  • to the right of the New Badge screen is a Badge Version field : this is where you can put in...the version of the badge, which can always evolve with content it validates ;
  • finally, Set Featured Image is how we select the Badge you designed with OpenBadge Designer, or the one you uploaded.

Once you're all done, hit save and pat yourself on the back - you created your first OpenBadge ! You'll be able to find all the badges you created in the All Badges option from the Badges menu later if you want to review them.

Now that we have a functional OpenBadge and badge issuing platform, time to put it to the test in the next step !

Step 6: Issuing an OpenBadge

Account check time !

Anytime you're going to issue badges, do it from an administrator account : it never worked for me when I was logged in as a regular user. And with that warning...Let's issue that OpenBadge !

Select Add New from the Wordpress Dashboard : once again you'll be taken to a page very similar to the usual article posting page, with all the Wordpress writing and formatting tools. The title is automatically generated, which is why it's not displayed, and the Post field is where you'll write in the reasons why you're awarding an OpenBadge.

There's a few of settings to pick to the right of the screen :

  • Choose Badge is where you select the badge you want to award from a drop-down menu. In case you have a lot of badges, remember they are listed alphabetically which will help you find your way around ;
  • Email Address is where you fill in the email adress of the awardee ;
  • Award Status displays the 3 states an OpenBadge can go through : Awarded when you issue it, Accepted when the awardee validates it on their end, and Refused when the awardee rejects the badge.

Once everything's filled in, go ahead and hit Publish as you would with a regular Wordpress post : your awardee will receive an email so they can actually receive their OpenBadge - something we'll read more about in the next step !

Step 7: Accepting an OpenBadge

In order to accept their OpenBadge, your awardee needs to have a Mozilla Backpack - that can be created for free over at http://backpack.openbadges.org/backpack/login, with a free Mozilla Persona account tied to the email adress to which their OpenBadge has been awarded.

Once your awardees have created their Backpack, it's time for them to open the email they received. If all went well, they will click through the link in the email, until the badge is automatically added to their Backpack. From there, they can see all of the OpenBadges they have been issued. Each OpenBadge comes with all the information we added to WPBadger in the configuration step, as well as links to the information we provided for the Badge when we created it in WPBadger.

Step 8: What's Next ?

You have designed and issued your first OpenBadge - congratulations !

If you want to continue down the OpenBadge road, there is plenty more things you can do now...

  • You have issued a single Badge there, but what about issuing them in bulk ? There is an option for that in your (name) Plugin...Go ahead and figure it out !
  • Now that you are issuing Open Badges, you can display the OpenBadges Insignia on your website to show your support for this initiative and spread the word. All the instructions to pick up and set up the insignia are at http://openbadges.org/insignia.
  • You can also join the OpenBadges Issuers directory listing groups that issue OpenBadges. You can find it at http://openbadges.org/participating-issuers.
  • You can learn to make vectors-based, SVG OpenBadge designs that are lighter to process and easier to scale. Details about SVG badges are on the OpenBadges wiki at https://github.com/mozilla/openbadges-backpack/wiki/Using-SVG-Badges

If you want to get more hands-on with the development of the OpenBadge standard...

  • Read the wiki documentation more in depth : it's all at and is a must read if you want to understand how the OpenBadges API work. Find it at https://wiki.mozilla.org/Badges
  • For you coders out there can of course contribute to or fork the OpenBadges code on GitHub to make it better - it's all at https://github.com/mozilla/openbadges-backpack
  • Still for you coders, the WPBadger extension hasn't been updated in a long time and could probably use some love, so you can go take a look at it, contribute to it or fork it on GitHub !
  • And of course, you can mention OpenBadges at your local school, college, hackerspace or fablab. No need to force it ! Just get the conversation started, see if it can be a relevant tool for your community.

I hope this Instructable will help getting you started with OpenBadges - if you have questions about this tutorial, leave a comment or ping me over email or Twitter as usual. And keep on learning !

Comments

About This Instructable

580views

12favorites

License:

Bio: Makes Things | Wears Hats
More by Deslivres:Make the most of LogodustIssuing OpenBadges with WordpressInstalling Flattery in Sketchup 2015
Add instructable to: