Creating WordPress Theme – The Index File Loop

I’m using the index file for this example. Though it might be best to put this code in other PHP file in your theme. We will just directly use the index file for simplicity.

1 <?php get_header(); ?>
2 <section>
3 <aside>
4 </aside>
5 <?php if( have_posts()) : while(have_posts()) : the_post(); ?>
6 <article>
7 <h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
8 <p><?php the_content(‘Read more…’); ?></p>
9 <p>Posted in <?php the_category(‘, ‘); ?> on <?php the_time(‘F j, Y’); ?></p>
10 <p><?php comments_number(‘No comment’, ‘1 comment’, ‘% comments’); ?></p>
11 </article>
12 <?php endwhile; ?>
13 <?php next_posts_link( ‘Older posts’ ); ?>
14 <?php previous_posts_link( ‘Newer posts’ ); ?>
15 <?php else: ?>
16 <article>
17 <h2 class=”error”>No Article Found</h2>
18 <p><b>Sorry, there are currently no article available.</b></p>
19 </article>
20 <a href=”<?php echo get_home_url(); ?>”>Home</a>
21 <?php endif; ?>
22 </section>
23 <?php get_footer(); ?>

WordPress The Loop

In line #5 to 21 we are using an if-else statement to check if a post exist. Inside it is a while statement that will loop through all available post if there is any.

5 <?php if( have_posts()) : while(have_posts()) : the_post(); ?>
12 <?php endwhile; ?>
15 <?php else: ?>
21 <?php endif; ?>

The code above, can also be expressed as

<?php
if ( have_post() ) {
       while( have_post() ) {
                   the_post();
       }
} else {
}
?>

The have_post() function as stated in the article, returns a boolean value(true or false) if a current WP(WordPress) query has any result to loop over. Obviously if it returns true we will loop through the post using a while statement. And the_post() function will iterate the post index in the loop.

If a post exist we can now use :

7 <h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>

the_permalink() function to display the current post url
the_title() function to retrieve the current post title

8 <p><?php the_content(‘Read more…’); ?></p>

the_content() function to display the current post content

9 <p>Posted in <?php the_category(‘, ‘); ?> on <?php the_time(‘F j, Y’); ?></p>

the_category() function to display all the link of the current post category

10 <p><?php comments_number(‘No comment’, ‘1 comment’, ‘% comments’); ?></p>

comments_number() function to display the total number of comments of the current post

Please visit the links provided to know more about each function. You can add more details in the loop if you want. But just to make our index page simple, we will stick to that. You will also need to use looping in other pages of the theme. (e.g. category.php, archive.php and author.php) Just choose the details of the post you want/needed to show for each page.

Read Theme Development to know more above pages content.

Simple WordPress Pagination

You’ll probably understand what the code below will do. A link will be displayed if the number of post displayed in the page exceeds the number you set in your settings. ( Setting >> Reading>> Blog pages show at most )

13 <?php next_posts_link( ‘Older posts’ ); ?>
14 <?php previous_posts_link( ‘Newer posts’ ); ?>

In some pages with loop in the theme, you might need to provide an if-else condition to check if you need to post a link back to home instead of this links (specially when the post don’t exceed the limit you provided in the settings).

You can try creating a dummy post to check if the loop works.

Our Current WordPress Theme Progress

For a while, you will definitely see this if you’ve done things correctly :

As the else statement (line #15-#20) stated.

<?php else: ?>
<article>
<h2 class=”error”>No Article Found</h2>
<p><b>Sorry, there are currently no article available.</b></p>
</article>
<a href=”<?php echo get_home_url(); ?>”>Home</a>