Improving the Upcoming Posts Plugin

I’m a big fan of the Upcoming Posts plugin for WordPress, which allows you to display a list of scheduled posts on your blog. This is really good because it can build up some hype for your future posts before they are published.

However, I’m not too keen on the default layout generated by plugin – I prefer a customised version. This tutorial gives you instructions for displaying a clean, calendar-style design with this plugin.

Why Display Upcoming Posts?

Have a read of the following post at Quick Blog Tips: Why You Should Show Readers Your Upcoming Blog Posts.

How to Customise the Upcoming Posts Plugin

First, install and activate the Upcoming Posts plugin. If you want to make sure you’re using the correct plugin, the plugin author is MrLive.

Next, download the calendar.png image (right-click and save as) that we’ll use for displaying the date.

Once you’ve downloaded calendar.png, you’ll need to upload it to your blog using an FTP program such as FileZilla. For most blogs, you’ll need to upload it to: /wp-content/plugins/upcoming-posts

In WordPress admin, go to Plugins – Editor. Look for the “Select plugin to edit” dropdown list on the far right. Choose “Upcoming Posts” and click the Select button.

In the list of plugin files on the right, click on upcoming-posts/ucp_widget.php. Paste in the following code and click Update:

<?php
    if ($just_draft) {$ucp_post_status = draft;}else {$ucp_post_status = future;}
    $takethem = new WP_Query("cat=$ucp_catid&post_status=$ucp_post_status&order=ASC&showposts=$ucp_num");
    if ($takethem->have_posts()) {
        while ($takethem->have_posts()) :$takethem->the_post(); $do_not_duplicate = $post->ID;?>
        <div>

            <div>
                <span><?php if ($show_time) {the_time('M');}?></span>
                <span><?php if ($show_time) {the_time('d');}?></span>
            </div>
            <div>
                <div><?php the_title(); ?></div>
                <div><?php if ($show_cat) {the_category(', ');} ?></div>
            </div>
            <div>
                <?php if ($show_excerpt) {the_excerpt();} ?>
            </div>
        </div>
    <?php endwhile; }
    else { ?>
        <div>
        <p><?php echo $ucp_nopost; ?></p>
        </div>
    <?php } ?>

Now click on upcoming-posts/ucp.css. Paste in the following code and click Update:

.ucp_content {min-height: 48px; margin: 5px 10px; line-height: 14px;}
.ucp_content .ucp_showdetail {margin-left: 65px; margin-bottom: 12px; padding-top: 4px; font-size: 12px; line-height: 16px;}
.ucp_content .ucp_showtitle {font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 15px;}
.ucp_content .ucp_showtime {background: transparent url('calendar.png') 0 0 no-repeat; width: 57px; height: 48px; float: left; font-weight: bold;}
.ucp_content .ucp_month {display: block; color: #fff; text-transform: uppercase; padding: 8px 0 1px 9px; font-size: 8px;}
.ucp_content .ucp_date {display: block; text-align: center; font-size: 20px; line-height: 20px;}
.ucp_content .ucp_showmore {clear: both; font-size: 12px; line-height: 16px; margin-top: 18px;}

Using the Widget

Go to Appearance, Widgets and look for the Upcoming Posts widget. Drag it to your sidebar (or wherever you want to display it). Fill out the boxes as follows – some of these can be changed if you wish.

• Title: Coming Soon
• Number of posts to show: 2
• If no post: More posts will be revealed soon.
• Time format: M d
• Tick the following boxes: Show Timestamp. If you use excerpts and you don’t write short posts, you can tick the Show Excerpt option as well if you wish. (I use this option at Quick Blog Tips, but not at TV in Quotes or Spam Comment.) Leave the rest.

When you’ve filled out the relevant options, click Save.

As soon as you schedule a post, it will show in the list, with the new calendar styles. Nice!