How to create a wordpress Upcomming Events Widget- A step by step tutorial

This Wordpress tutorial is targeted to those who are struggling for being a good Wordpress developer. This tutorial will be delivered in simplest term so that a newbie can easily understand what is going on the screen. After following this step by step tutorial, you’ll able to do following things:

1. Create a very basic Wordpress widget acceptable for even version Wordpress 3.0.1
2. Create a basic upcoming events widget which lists the scheduled articles.

Wordpress is created in PHP. So, you must know the basic coding knowledge in PHP. Except default Wordpress widgets, you’ll need to create a separate plugin to add separate thirdparty widget to your wordpress blog.

We are going to create a basic plugin first.

Before we start the coding part, lets go to Wordpress Admin panel and explore through the plugin control panel.

To go to Plugin control panel, at the left sidebar, click on Plugins.

This is the place where you can activate/disactivate or install/remove plugins. By default Wordpress stores all the plugin files in wp-content/plugin folder.

For each plugin, you can see various definations. The basic definations needed are, plugin name, plugin URI, description, author name, version and author’s website.

These all will be defined inside the plugin php code.

Let me show you how you can set the details of plugin and start the coding for new plugin.

Open up notepad, a very simple yet powerful text editor by Microsoft.

We must begin every PHP code by <?php  and end the code by ?>

<?php
/*
Plugin Name: Comming up
Plugin URI: http://www.hackspc.com
Description: Up comming posts
Author: suraZ Kayastha
Version: 1.0
Author URI: http://youcanhack.blogspot.com
*/

These are actually PHP comments held between /* */ but wordpress fetches these section for details about the plugin.

Wordpress Plugins are all about PHP functions (the division of codes that work for specific part).

Lets see what we can do with the functions to create a plugin that will load a new widget.

/* Function that will deliver all the necessary code contents in the sidebar */
function commingup_widget() {}
/* Function that is called by wordpress when the plugin is activated. It registers new widget called Coming Up */
function init_commingup(){
register_sidebar_widget("commingup", "commingup_widget");
}
/* Tells WordPress to call init_commingup when plugin is loaded */
add_action("plugins_loaded", "init_commingup");


Confused? Let me clear you what those codes do. The first function, commingup_widget(),  here is what will be displayed on the sidebar. Whatever HTML/PHP code you put here will be displayed as a sidebar widget. It can be links, texts or any other dynamic contents.

The second function, init_commingup(), is called by WordPress if the plugin is activated. It calls a WordPress function that will register a new widget which will be called “Coming Up” which will call our new widget.

Add action just tells WordPress to call the second function when the plugin is loaded.

That is done, you’ve successfully created a plugin that will deliver a new blank widget.

You may be wondering how you can place dynamic contents in your newly created widget plugin.

This is so simple to do if you know little bit PHP and HTML coding.

Now let’s forget what we’ve done above.

And let me show you the idea to get things ready for your widget.

Consider the following loop that will show the posts that are marked as scheduled posts.

<?php query_posts('showposts=5&post_status=future'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<span><?php the_time('j F Y'); ?></span></p>
<?php endwhile;
else: ?><p>No future events scheduled.</p>
<?php endif; ?>

The above code is just a basic posts loop that we have in your index.php page. Only the difference is, it is modified to view only title and scheduled date. Post_status=future makes is so much special. Hence all the posts except scheduled one are filtered out.

You can directly put the above code in any part of index.php. But, we are creating a widget right?

So we’ll modify that code to fit as a widget.

Here is the modified part of it:

echo '<li><h2>Comming up</h2>';
echo '<ul>';
query_posts('showposts=10&post_status=future');
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<li><h4>'; the_title(); echo '</h4>';
echo '<span>'; the_time('j F Y'); echo '</span></li>';
endwhile;
else: echo '<p>No future events scheduled.</p>';
endif;
echo '</ul></li>';

We’ll place the above code in function commingup_widget().

When we combine the description code and the functions we’ll get the following setup of code.

<?php
/*
Plugin Name: Comming up
Plugin URI: http://youcanhack.blogspot.com
Description: Up comming posts
Author: suraZ Kayastha
Version: 1.0
Author URI: http://youcanhack.blogspot.com
*/
function commingup_widget() {
echo '<li><h2>Comming up</h2>';
echo '<ul>';
query_posts('showposts=10&post_status=future');
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<li><h4>'; the_title(); echo '</h4>';
echo '<span>'; the_time('j F Y'); echo '</span></li>';
endwhile;
else: echo '<li><p>No future events scheduled.</p>';
endif;
echo '</ul></li>';
}
function init_commingup(){
register_sidebar_widget("commingup", "commingup_widget");
}
add_action("plugins_loaded", "init_commingup");
?>

See that? All the codes are enclosed in <?php ?>. Now all we need to do is save it as PHP file. Name it anything you want, I named it commingup.php.

Upload it to wp-content/plugins/commingup.

Go to plugin control panel in wordpress and activate it.

Now navigate to widget control panel, Right sidebar > Appearance > Widgets.

There you go, you’ll see the widget that you’ve just created.

Click and drag it to the sidebar.

Now reload your Wordpress website. If you have any scheduled post then it will list it as an upcoming event.

If nothing is scheduled then it will print “No future events scheduled”.

If you have any confusion, then comment us. We’ll have full support for this widget in our blog.

For More Visit Our Youtube Site