Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Php and WordPress.

Since I am making some design changes to the blog, and I have more than 1,000 posts (1,148 at the time of writing), I needed a way to provide a quick summary of all posts.

So I decided to display all posts in a single page, and I want to share with you what I’ve done.

First, look at the page: all blog posts.

In order to do something like this, first you need to create a new php file in your theme folder, you can locate it in a path similar to wp-content/themes/<your_theme_name>

I created a file called page-allposts.php and that’s what I wrote inside:

<?php
/*
Template Name: All posts
*/
?>

<?php get_header(); ?>

<div id="blog">
<?php if(have_posts()) : ?>
     <?php while(have_posts()) : the_post(); ?>
          <div class="post"> 
               <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
               <div class="entry">	
                    <?php the_content(); ?>
                    <?php
                    $current_date ="";
                    $count_posts = wp_count_posts();
                    $nextpost = 0;
                    $published_posts = $count_posts->publish;
                    $myposts = get_posts(array('posts_per_page'=>$published_posts)); 
	               foreach($myposts as $post) :
                         $nextpost++;
                         setup_postdata($post);
                         $date = get_the_date("F Y");   
                         if($current_date!=$date): 
                              if($nextpost>1): ?> 
                                   </ol>
                              <?php endif; ?> 
                              <strong><?php echo $date; ?></strong><ol start = "<?php echo $nextpost; ?>">
                              <?php $current_date=$date;
                         endif; ?>
                         <li><?php the_title(); ?> &bull; <a href = "<?php the_permalink(); ?>">link</a></li>
                    <?php endforeach; wp_reset_postdata(); ?>
                    </ol>
              </div>
          </div>
     <?php endwhile; ?>
<?php endif; ?>
</div>

<?php get_sidebar(); ?>
<div style = "clear:both"></div>	
<?php get_footer(); ?>

Let’s have a look at the script, but before let me tell you things will be A LOT easier if you copy/paste into this page the content of your page.php file located in the same directory, that is the normal page as created by your theme.

Then you can start working on it adding some stuff.

Lines 1-5: although it’s just a comment, these lines are very important because will allow us to recognize and call the page from inside WordPress admin area. This way I am telling WordPress I am calling the page “All posts”.

Then, everything looks like a normal page, things can be a bit different according to the theme you are working on, but all in all you should already know everything until the_content function call (line 15).

Line 17: this is where things become interesting: setting a variable called $current_date to an empty string

Line 18: getting the total posts using wp_count_post function

Line 19: a dummy variable to count the index of next post

Line 20: getting the total PUBLISHED post, which are the ones I am looking for

Line 21: this is how I actually get all posts

Line 22: looping through all posts

Line 23: increasing $nextpost variable because I just found a post

Line 24: retrieving current post data

Line 25: retrieving the english name of the month and the four digit number of the year the post was published using get_the_date function.

Lines 26-32 and 35: here I am simply playing whith dates, <ol> and <li> tags to create the numbered order list you can see in the page.

Line 33: here I just can access to post title and other data like I am used to do with WordPress.

Line 34: end of the loop and freeing post data.

Now it’s time to enter in the admin area and create a new page this way:

Look at the template I selected: the same name you can find at line 3 of the script.

And finally your page is ready to be used in your blog. See it in action.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.