My first plugin released on WordPress.org, happy to share my story on how it was created and a small tutorial on how to use it
It’s finally here! My first plugin on wordpress.org :)
As with all things, there is a story behind this plugin. And interestingly enough it began with a totally different plugin idea. The idea for creating a plugin, and learning object oriented programming (OOP) came more than six months ago. I was working for a client, and he wanted a reservation plugin. Nothing major, a calendar to pick the date, and a form that will be send along with the date. There were some more intricacies in the back end, but all in all it was (and is) a simple plugin. So I thought to myself: I could create a plugin and post it on wordpress.org. I’ll add some enhancements, like google integration! That sounds so cool, and I don’t recall anybody doing it.
So I started to work on it. And with that learn how to code in object oriented way. Then one day I wanted to see how others created something in their plugin (can’t really remember what), and I searched on plugins page for a similar plugin (reservation one). And what did I find? Exactly the plugin I was imagining. Only better. With more options. And visuals…
Needles to say I made a giant facepalm, and scraped my attempt at plugin making for some time.
A new idea is born
Not that while ago, at work, we were developing event based themes. So for that purpose we needed an event plugin. I found The Events Calendar by Modern Tribe. It looked just like what we needed, and we didn’t have the time to develop the whole plugin – plus if one already exists, why not use it? But it didn’t have any kind of talks shortcode, and our designer did a tabbed version of talk events. So I said that I’ll create a simple add on that we’ll provide with the theme. And I began working on what would be my first plugin – Talks Add on for The Events Calendar.
And it worked. You can add talks, remove them, add rooms, times, all the jazz. And I was pleased with myself. I didn’t do it in OOP way though. But since we planned to push this as a ‘theme add on’, it didn’t really matter.
But as it turned out, it seemed that designer and I had a bit of a miscommunication. He envisioned the theme to be a single event theme. Meaning that you can actually create separate events in the Events Calendar as talks for this one big site. And that wasn’t what I did.
The Events Calendar is, basically, a multi event plugin. And my reasoning is that you should have multiple talks for every event. I’m a logical kinda guy :D
So I thought to myself: ok, that’s a bust and we’ll just create a simple shortcode then. But why should my code (and there is quite a bit of it to be honest) go to waste? I could make a plugin from it!
And I did :D
How it’s made?
No I’m not referring to the popular series about how things are made :D How are plugins made using OOP approach? When I started working on plugins, I opened up a plugin, it was actually Swifty Bar plugin by Goran Jakovljević, a Bosnian developer that posted his development process in the WordPress Croatia facebook page. So I took his plugin and started examining it. How to enqueue scripts, how to add option pages etc. I was totally clueless. This was back when I had my ‘great idea’ with the reservation plugin. So I just started changing bit by bit, until I kinda got the general idea about what classes do, and how to use methods from them to make it all work.
I did go through the tutorial on tuts+ about object oriented programming in WordPress (which I recommend wholeheartedly), which helped in understanding how all these classes interact with WordPress and each other. Then back in April I attended 11th WordPress meetup in Zagreb. It was an interesting meetup, and the thing that I was interested in the most was the talk by Goran Jakovljević. I was interested to hear how did he get into it all, and if he had some advice on how to start developing WordPress plugins. And there I heard of something called WordPress Plugin Boilerplate. I don’t know actually how I missed that, since it was originally created by Tom McFarlin, the author of the tuts+ article.
After that, I realized that it’s actually really easy to create a plugin OOP way. Just follow the boilerplate, change few things and add things that you need in specific place. Simple as that!
I’m not going to describe in details how I coded it, but it took me maybe a week or two of work to sort it all out, and several days of preparation for submission of the plugin (mind you I did have the functioning code but not written in OOP way, so I needed to ‘convert’ it to one).
If you ever want to submit the plugin, there are actually great guidelines that you must follow on wordpress.org. You can take a look at them here, here, here, here and here. Read them up, it will speed up the submission process. It took me 1 rejection (after 3 days) because I made a rookie mistake of naming my plugin with the events calendar at the first place of the name (and that’s a no no because of possible legal reasons). After that it took them 2 days to review it and now it’s out :)
A word about SVN. If you’re on Windows like I am (oh no the horror!), you’ll need to use a tool like TortoiseSVN. I used it before and it really handles all the commiting, updating and branching the best imo. Also this article by Eric Mann, although 5 years old, still describes the submission process well (although TortoiseSVN has updated a bit, but the steps and most of the options you need to check out are the same).
Ok, we get it, it’s cool to develop the plugin. But how does it work?
Oh, yeah, I totally forgot that this is supposed to be a little how-to article about my plugin :D
So the first thing you’ll need is the Events Calendar plugin. Well first you’ll need a working WordPress installation, but I guess that’s a given, no? So after you set up everything go and download my cool add on :D Install it, and create an event. First thing you’ll see is this
You’ll notice that the ‘Event Talks’ meta box says that you need to add details to your event – the most important of the details are the dates of your event. This is important because my plugin pulls that info, counts the number of days you have and creates a blank template according to that ;)
Next you save your event and voila!
After this you can add image to the talk, you can add or remove talks from the days. You can even rename the name of the days tabs – instead of Day 1 you can put: Day One (such a change! :D). You get the gist. After you’re done it should look something like this:
Notice that I’ve already put a shortcode in the event page. The cool thing about shortcodes is that you can put them anywhere on your site. And you don’t need to write it by hand. See that button in the editor called ‘Event Talks’? This is actually a button that will insert the shortcode for you. All you need to do is pick one from the dropdown list of existing shortcodes (remember my article about it few weeks ago ;) ).
You can also put a widget on the sidebar that will show the basic info about the talks.
And in the end this is how it looks with the default styling. Cool thing is that you can style it so that it fits your theme really easily.
I’ve aimed for simplicity with this plugin. It’s supposed to be easy to use and not too bloated with options. there is always some room for improvements of course, but I think that on its own it works pretty well. I have some ideas for upgrades on my to do list, but that will have to wait until I find some more time to fiddle with it. I also plan on putting the code to my GitHub page, so that people can contribute more directly. I’d like to thank the guys at Modern Tribe for creating such an amazing plugin, and my colleague Stipe for the initial idea.
If you have any questions about the plugin feel free to ask at the official support page, and as always, happy coding! :)