Adding Widgets to WordPress

I wanted to flesh out the blog itself a little bit and experiment with WordPress. So, I decided to add some Widgets to the sidebar. These are configurable items that you can arrange alongside other WordPress content like menu and category links. They can be based on plug-ins or can be iFrames or just straight HTML so I’ve added a few examples. Once created, they can be arranged or reordered at will or shown/hidden based on certain conditions such as page or WordPress user properties.

ArrangeWidgets

First off, I wanted to brand the blog using the logo from Simple Programmer that I earned by completing the course that launched this blog in the first place. This is a simple hyperlink tag sourcing an image file as the element. To add this, I created a Text widget which allows you to add arbitrary text or html.

CreateText

spwidget

Next, I wanted to add a link back to the Github repository I created for a previous entry here. I accomplished this by installing a plug-in called WP Github from the WordPress marketplace. This allows you to add widgets for various GitHub categories such as repos, commits or issues. I’ve added the top level profile widget for now, but you can insert various other widgets specifically for repos or commit history.

wpgithub

Just for fun, I included a link to my Myers-Briggs personality type from 16 Personalities. This quiz and personality typing has been popular at some of the organizations and businesses I’ve worked with, some even going to far as to require employees to post them beside their nameplates. Adding this involved another Text widget. This one is a simple anchor tag referencing an image from the site and linking back to the 16 Personalities website.

Code:  <a href=”https://www.16personalities.com/intj-personality”><img src=”https://www.16personalities.com/images/types/intj.png”></a>

My last widget is a bit of personal accountability for me. I’ve struggled with weight for most of my life and have been tracking my weight and eating habits at Livestrong. This is a free service and they also provide a code snippet that points back to your progress on their website. This was accomplished by pasting in the code snippet into another Text widget.

lswidget

Pretty straightforward stuff, right? As always, if you have any questions or comments, please feel free to add them here or address them to john@benedettitech.com.

Thanks for looking in!