Query Post : List Upcoming Posts

The problem.
Thanks to the “schedule post” option, our favorite blogging platform allows us to write a post and schedule it to be published later. To make sure your readers come back to your blog or subscribe to your RSS feed, listing your upcoming posts is a good idea.

<?php query_posts('showposts=10&post_status=future'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><?php the_title(); ?></h2>

    <span class="datetime"><?php the_time('j. F Y'); ?></span>

<?php endwhile; else: ?>

No future events scheduled.

<?php endif; ?>

Code explanation.
To achieve this, I used the query_posts() function with an interesting parameter called post_status. The post_status parameter allows you to get posts according to their published status (“published,” “draft” or, like in this example, “future”). Because I also added the showposts=10 parameter, this code will not return more than 10 upcoming posts.

How To Add Pagination To WordPress without plugin

Pagination is actually baked right into WordPress. To set everything up, you’ll need to visit the WordPress admin first. From there, you can visit Settings -> Reading. This is where you can set up the basic formatting of your posts. The “Front page displays” option, for instance, can either be set as Your latest posts(the default) or as a static page and a posts page. In both cases, pagination will be required on the page that lists out your posts.


Add on functions.php

function pagination_nav() {
    global $wp_query;
    if ( $wp_query->max_num_pages > 1 ) { ?>
        <nav class="pagination" role="navigation">
            <div class="nav-previous"><?php next_posts_link( '&larr; Older posts' ); ?></div>
            <div class="nav-next"><?php previous_posts_link( 'Newer posts &rarr;' ); ?></div>
<?php }

Add on default Loop:

<?php pagination_nav(); ?>

Register image sizes for use in Add Media modal

// Add other useful image sizes for use through Add Media modal
add_image_size( 'medium-width', 480 );
add_image_size( 'medium-height', 9999, 480 );
add_image_size( 'medium-something', 480, 480 );

// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'medium-width' => __( 'Medium Width' ),
        'medium-height' => __( 'Medium Height' ),
        'medium-something' => __( 'Medium Something' ),
    ) );

The comments in the code itself pretty much explain what’s going on, as will the rest of this post; but here are two quick notes that should help you get an early grasp on the code:


add_image_size() takes four arguments:

  1. name, a string (required)
  2. width, an integer (optional)
  3. height, an integer (optional)
  4. crop, a boolean (optional)

name explains itself. width and height are target size values, in pixels. We’ll explain how they work (and how they work with crop) below.


All you need to know about that function is that WordPress requires some boilerplate code in order to add custom image sizes into the “Add Media” modal—where site users can use them—and to define what name those sizes go by in the “Add Media” environment. Hooking into a filter hook calledimage_size_names_choose and registering the three desired image sizes are allwpshout_custom_sizes() does; here’s the result: