Custom Widget Examples

This page contains examples of plugins that I’ve written for WordPress. Most plugins are written for my wife and her real estate business, but occasionally I’ll throw something together for fun or as a proof-of-concept.

Most examples contain at least one example that shows how the plugin looks to site visitors, as well as a view of the admin panel that shows options available to the author. I’ve been trying to keep my admin panels standardized in terms of layout and controls and organized in such a way that they fit on a page vertically when authoring content. I like to provide lots of options in terms of customization, so the latter can be a challenge 🙂

Sticky-Notes

The plugin below was developed by request and was my second attempt a building a WordPress plugin. Having established some of my own standards in terms of organizing PHP code and admin panel controls, this small project turned out to be a template for future UI widgets. The text area supports markdown for font formatting, lists, titles, and links. The note effects are done using DIV “layers”. Inspiration for this plugin came from a static CSS3 example www.creativepunch.com.

This widget was inspired by a CSS3-only example from creativepunch.com

The widget supports markdown text for italics, bold, etc. The font and note size are also configurable. But that's not all...

Notes can be customized in a number of ways including:

  1. Note/text color and size
  2. Rotation
  3. Bent corners and other realism effects

Below is the admin panel for the sticky notes plugin.

Chalkboard

This is my wife’s favorite plugin and was the first custom work that I did for her WordPress blog following the theme customization. Similar to Sticky Notes, it’s done entirely with CSS3, custom fonts, and chalkboard background images. Fiddling with the chalk color and transparency makes for a very convincing appearance. The board type (chalkboard or whiteboard) is dependent on the type of background selected. The appropriate writing tool (pen or chalk) is drawn on the tray as well. Like the Sticky Notes plugin, the text area supports limited markdown syntax.

Task List

  • Finish up this widget
  • Start work on next project
  • Get distracted by her latest problem
  • Decide this widget isn't done, after all
  • (repeat)
  1. Finish up this widget
  2. Start work on next project
  3. Get distracted by her latest problem
  4. Decide this widget isn't done, after all...
  5. ... go back to step 1

Distraction: This text should appear smaller than the text above until here where it's normal and here where it's bold.

This text should be italicized and SMALL

Below is the admin panel for the Chalkboard plugin. The options and controls are very similar to those of the Sticky Notes plugin. Notice the numeric values on the right-hand side of the slider controls – something that I would like to back-port to other plugins such as Sticky Notes.

More Chalkboard plugin examples showing whiteboards with different text colors and transparency, as well as some additional markdown to create numbered lists and titles, etc.

Task List

  1. Finish up this widget
  2. Start work on next project
  3. Get distracted by her latest problem
  4. Decide this widget isn't done, after all...
  5. ... go back to step 1

Distraction: This text should appear smaller than the text above until here where it's normal and here where it's bold.

This text should be italicized and SMALL

Programming a simple neural network

Though neural networks were considered to be of little use for a long time, the recent development of computing power and database size has proven otherwise. Since the revolution of machine learning in the last few years has been primarily driven by them, let’s dive right into the actual coding of neural nets.

Before coding, it can be useful to review the principles of neural nets to make sure we understand what we will be doing here. Thankfully, the work of coding has already been done by Milo Spencer-Harper, based upon the previous works of Andrew Trask. He guides us step by step into building a single-layer neural net and multiple-layer neural net, with crystal-clear coding and without using any machine learning library.

Transaction Map

My current work-in-progress is a map that displays all of my wife’s real estate transactions. The map is currently interactive and markers are clickable. The bulk of the work remaining for this plugin involves the admin interface which allows the user to import and manage data. The data is transformed and imported into the WordPress database using a custom table and geocode information is determined using an online web service. To date, the entire import and geocode lookup is done in Python 3.7.

Zillow Reviews

This was my first attempt at creating a WordPress widget for my wife who is a real estate agent in Northern Virginia. Her customers typically leave reviews on Zillow’s website, but Zillow allows developers to retrieve this information via web service. Still, it’s up to a developer to take the text, user name, email, star rating, etc and render it to look like it does below. Because we wanted to limit the amount of space consumed by the reviews initially, I added and clickable expand link at the bottom and the hidden reviews are revealed using a transition. Zillow only provides the most recent 10 reviews via web service, but all agent reviews can be viewed by clicking on the link to their site at the bottom of the expanded list.

I wasn’t 100% satisfied with how this plugin turned out, but I believe it to be serviceable at least. Having never written a WordPress plugin (or any PHP, for that matter), I considered it to be a success.

Reviews on Zillow

expand 10 reviews
© Zillow, Inc., 2006-2016. Use is subject to Terms of Use
What's a Zestimate?