WordPress is not just a blogging platform anymore, but can be used to develop complex web applications for many purposes. WordPress provides variety of APIs, thus allowing us to develop further on its base.

We can extend WordPress to meet our needs using the Plugins API. With this powerful API we can develop solutions meeting our needs for near endless scenarios; therefore, to become a master of WordPress, once has to master its APIs.

In this series, we will look at the WordPress Plugins API as well as Widget API and how we can use them to develop solutions specific to our needs.

What We're Making

During the course of this three-part series, we will build a WordPress plugin from the ground up. This plugin will display a list of upcoming events on the front-end to let users know what's coming next. The admin will be able to publish information about new events, and will be able to edit or delete them.

There is a saying:

Failing to plan is planning to fail.

We will plan out every detail and aspect of our plugin before we begin writing code. This way, we are going to clarify what we are going to do and how we're going to do it. We will also make sure that we have all of the necessary assets we will be using later before we begin writing our code.

We will begin by registering a custom post type for our events. This will make it easier for us to manage things efficiently. That custom post type will include:

• a title field
• a description field
• field for featured image

In addition to these standard fields, we will also include three custom meta fields for:

• event start date
• event end date
• event venue

For the event start date and event end date, we will incorporate jQuery UI date picker in our post dashboard.

The above three custom fields will save their values in post meta and we will be querying our events on the front-end on the basis of these custom fields using the meta query.

When it comes to custom post types, WordPress only shows columns for the title, author and publish date of the post on post-edit screen, but we are not limited to that. We will add custom columns for event start date, end date and the event venue for better accessibility of the user.

Finally, regarding the front-end, it's suitable to make a widget that displays a list of all events that are scheduled in the near future. With the powerful Widget API, we will code our custom widget that we will be able to add in our sidebar or footer area.

Laying The Foundation

Let's begin by creating the basic directory/file structure. Navigate to the wp-content/plugins directory and make a new directory named upcoming-events. Inside that, create more directories for:

• css
• js
• img

Also, create the following PHP files:

• index.php
• upcoming-events.php

As you may have noticed that we have created an additional upcoming-events.php file besides the standard index.php file. We will write all of our code inside the upcoming-events.php file. It's a good practice to drop an index.php file inside your assets directories as well as it will block anyone trying to figure out the directory's content in the browser.

We will create style.css and script.js files inside the css and js folders respectively.

Inside the index.php file, add the following code:

<?php // Silence is gold

Here, we are just placing a placeholder text inside the index.php.

Inside the upcoming-events.php file, add the following plugin declaration:

<?php
/**
 * Plugin Name: Upcoming Events
 * Plugin URI: http://imbilal.com
 * Description: A plugin to show a list of upcoming events on the front-end.
 * Version: 1.0
 * Author: Bilal Shahid
 * Author URI: http://imbilal.com
 * License: GPL2
 */

Having finished with the basic file structure, we will move on to collecting the necessary assets that we need in our plugin. One of such assets is the stylesheet for jQuery UI datepicker. By default, WordPress uses jQuery and jQuery UI core on all of its pages in the dashboard. We only need to include the styles for its datepicker widget.

To do that, navigate your browser to http://jqueryui.com and:

1. Click on Custom Download button at the right
2. On the next page, uncheck the Toggle All checkbox under the Components title. This will uncheck all the checkboxes
3. Scroll down to the Widgets section and check the Datepicker checkbox
4. At the bottom of the page, select the color theme of your choice from the Themes section. We will use the default UI Lightness theme for our tutorial
5. Click the download button to download the custom package

Extract the downloaded package and copy over the contents of css/ui-lightness to upcoming-events/css directory.

What's Up Next?

That's all about planning. In the next installment of the series, we will begin writing our code.

We will:

• register custom post type for event
• add meta boxes to the events edit screen
• add necessary styles and scripts to our admin
• incorporate jQuery UI date picker to input event dates
• add custom admin columns to "All Events" screen

Stay tuned for the next article in the series.