I’ve been working on a new project for the website, and I think it’s ready for showing off.

Download View on GitHub

I write about Namine’s procedures a lot. (You probably know that already.) It’s not only helpful for letting friends and family know what’s going on, but it’s actually come in handy for doctors’ appointments, too. I can’t count the number of times we’ve been at a clinic visit and a doctor has asked when a certain procedure occurred. Yeah, it’s in her file, but her file is huge. (Let me tell you, eight years’ worth of surgeries and other procedures generates a lot of paperwork. A lot.)

Cue: eichefam.net, the family website. Because we’ve been writing about our daughter, we can pull up the website and search across categories, tags, and even keywords for a specific event. And most of the time, we can find it faster than the doctor can, searching Namine’s file on the hospital computer. Of course the same level of detail isn’t there (dangit Jim, I’m a parent blogger, not a doctor) but the date is there and often that’s enough.

But there’s really no good way to look at the full timeline of events. Sometimes I preface a specific post’s title with the procedure, but I haven’t always. The solution that makes the most sense to me is to introduce the concept of a timeline to my existing posts.

There are two kinds of timeline plugins for WordPress. The first — where you have to create a new post for every event in your timeline — is far more prevalent on the WordPress.org Plugin Directory.

The second type, the type I was looking for, allows existing posts to be modified so that they show up on a timeline. This is much rarer; in fact, I have literally only found a single plugin that fits this description: Threads, written by Alex King and Crowd Favorite.

Despite not having been updated in quite some time — over two years ago (as of this writing) — it still seemed to work just fine. The only problem was, it looked nothing like I wanted it to look. So I did the only thing that made sense: I forked it and made my own version, rewriting much of the front-end logic and leaving the back-end logic alone (for the most part, but I’ll get to that).

My inspiration for the timeline appearance comes from a Codyhouse demo. So I am proud to publish the first of many planned timelines: Namine’s Wish.

In addition to being able to tag a post as an event in a timeline, the plugin also allows you to designate an icon to represent the event, powered by Font Awesome.

1484248485531screensave

Side note: as of this writing, Font Awesome has 675 icons. That’s a big list, so I incorporated the Chosen plugin to improve UX. With it enabled, you can start typing in the field to narrow down the list or search for a specific icon.

It’s also worth noting that I am not hard-coding a ridiculous 675-item select menu. Instead, I’m building the select list programmatically by loading in the master list and then parsing for each icon’s ID. The result is a complete list, and an added benefit is that it is self-updating.

Check out the demo below:

See the Pen Chosen Select List for Font Awesome icons by Paul (@peiche) on CodePen.0

I’m pretty happy with how the whole plugin has turned out, but as of right now, I’m not comfortable with releasing it to the WordPress plugin directory. There’s a lot of code here that’s not mine — from the original Threads plugin and Codyhouse’s demo — and although all the code is free to use, modify, and distribute, I wouldn’t want anyone to think I’m claiming this as all my own.

This whole project (as is pretty much everything I write in my free time) is available on GitHub. I welcome any bug reports and/or pull requests you might have.

This post is part of the timeline: Timelines Plugin – an ongoing story on this site. View the timeline for more context on this post.