How to Create the Main Index Template and Activate the Theme in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

You can follow the next steps for a bare-bones example of what the Main Index template looks like in WordPress Twenty Fifteen when you put the tags together. To create a Main Index template to work with the other templates in your WordPress theme, open a new window in a text editor and then go through the following steps. (Type the text in each of these steps on its own line. Press Enter after typing each line so that each tag starts on a new line.)

  1. Type <?php get_header(); ?>.

    This template tag pulls the information in the Header template of your WordPress theme.

  2. Type <section>.

    This is HTML5 markup that tells the browser that this is a grouping of content (in this case, blog posts).

  3. Type <?php if (have_posts()) : ?>.

    This template tag is an if statement that asks, “Does this blog have posts?” If the answer is yes, it grabs the post content information from your MySQL database and displays the posts in your blog.

  4. Type <?php while (have_posts()) : the_post(); ?>.

    This template tag starts The Loop.

  5. Type <article <?php post_class() ?> id=post-<?php the_ID(); ?>>.

    This is HTML5 markup that tells the browser that this is the start of a new, single article, along with the post_class CSS designation.

  6. Type <h1><a href=<?php the_permalink(); ?>><?php the_title(); ?></a></h1>.

    This tag tells your blog to display the title of a post that’s clickable (linked) to the URL of the post, surrounded by HTML Header tags.

  7. Type Posted on <?php the_date(); ?> at <?php the_time(); ?>.

    This template tag displays the date and time when the post was made. With these template tags, the date and time format are determined by the format you set on the Dashboard.

  8. Type Posted in <?php the_category( , ); ?>.

    This template tag displays a comma-separated list of the categories to which you’ve assigned the post — Posted in: category 1, category 2, for example.

  9. Type <?php the_content( Read More.. ); ?>.

    This template tag displays the actual content of the blog post. The Read More.. portion of this tag tells WordPress to display the words ReadMore, which are clickable (hyperlinked) to the post’s permalink, where the reader can read the rest of the post in its entirety. This tag applies when you’re displaying a post excerpt, as determined by the actual post configuration on the Dashboard.

  10. Type Posted by: <?php the_author(); ?>.

    This template tag displays the author of the post in this manner: Posted by: Lisa Sabin-Wilson.

  11. Type </article>.

    This is HTML5 markup that tells the browser that the article has ended.

  12. Type <?php endwhile; ?>.

    This template tag ends The Loop and tells WordPress to stop displaying blog posts here. WordPress knows exactly how many times The Loop needs to work, based on the setting on the WordPress Dashboard. That’s exactly how many times WordPress will execute The Loop.

  13. Type <?php next_posts_link(&laquo; Previous Entries); ?>.

    This template tag displays a clickable link to the previous page of blog entries, if any.

  14. Type <?php previous posts link(&raquo; Next Entries); ?>.

    This template tag displays a clickable link to the next page of blog entries, if any.

  15. Type <?php else : ?>.

    This template tag refers to the if question asked in step 3. If the answer to that question is no, this step provides the else statement — IF this blog has posts, THEN list them here (steps 3 and 4), or ELSE display the following message.

  16. Type Not Found. Sorry, but you are looking for something that isnt here.

    This is the message followed by the template tag displayed after the else statement from step 15. You can reword this statement to have it say whatever you want.

  17. Type <?php endif; ?>.

    This template tag ends the if statement from step 3.

  18. Type </section>.

    This is HTML5 markup that closes the <section> tag opened in step 2, and tells the browser that this grouping of content has ended.

  19. Type <?php get_sidebar(); ?>.

    This template tag calls in the Sidebar template and pulls that information into the Main Index template.

  20. Type </div>.

    This is HTML markup closing the <div id=main> that was opened in the header.php file.

  21. Type <?php get_footer(); ?>.

    This template tag calls in the Footer template and pulls that information into the Main Index template. Note: The code in the footer.php template ends the <body> and <html> tags that were started in the Header template (header.php).

    When you’re done, the display of the Main Index template code looks like this:

    <?php get_header(); ?>
    <section>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <article <?php post_class() ?> id=“post-<?php the_ID(); ?>“>
        <h1><a href=“<?php the_permalink(); ?>“><?php the_title(); ?></a></h1>
        Posted on: <?php the_date(); ?> at <?php the_time(); ?>
        Posted in: <?php the_category(‘,’); ?>
        <?php the_content(‘Read More..’); ?>
        Posted by: <?php the_author(); ?>
    </article>
    <?php endwhile; ?>
    <?php next_posts_link( ‘&laquo; Previous Entries’ ) ?>
    <?php previous_posts_link( ‘Next Entries &raquo;’ ) ?>
    <?php else : ?>
    <p>Not Found
    Sorry, but you are looking for something that isn’t here.</p>
    <?php endif; ?>
    </section>
    <?php get_sidebar(); ?>
    </div>
    <?php get_footer(); ?>
  22. Save this file as index.php and upload it to the mythemes folder.

    In Notepad or TextMate, you can save it by choosing File → Save As. Type the name of the file in the File Name text box and click Save.

  23. Activate the theme on the WordPress Dashboard and view your blog to see your handiwork in action!

This very simple Main Index template that you just built does not have the standard HTML markup in it, so the visual display of your site differs somewhat from the default Twenty Fifteen theme.

If you’re having a hard time typing out the code provided on this page, you can download this sample theme at lisasabin.com.