Pin It
512-535-2492

The TastyPlacement Blog

enjoy...
WordPress Tutorial

WordPress Tutorial: Display All Posts on a Page

How to Create an Interior /blog/ Page That Mimics a Traditional WordPress Front Page

We got hung up recently trying to create an interior blog page (i.e., www.agreatsite.com/blog)  for a client’s design. This problem is more common now with full-featured templates and frameworks that employ sliders and carousels on the front page that are triggered by a template’s index.php file.

First, Create a Custom WordPress Page Template

First, you’ll need to create a custom WordPress page template. All WordPress templates have a page.php file as part of the default template–we simply want to vary that file a little bit. Make a copy of your page.php file and name it page-blog.php.

Next, you need to enter a few lines of code at the very top of your new php file:

<?php
/*
Template Name: Blog
*/
?>

The code above is a naming tag–the template name, in this case “Blog” will be the name that appears in the template selection box at the WordPress page edit window, which we’ll screenshot below.

The Code

Now, you can’t simply run the regular WordPress loop on our custom interior page, we are going to use the WordPress template tag get_posts to query our WordPress database and grab our posts. The following code accomplishes this:

$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
  <div class="post-item">
    <div class="post-info">
      <h2 class="post-title">
      <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
      <?php the_title(); ?>
      </a>
      </h2>
      <p class="post-meta">Posted by <?php the_author(); ?></p>
    </div>
    <div class="post-content">
    <?php the_content(); ?>
    </div>
  </div>
<?php comments_template(); ?>
<?php endforeach; wp_reset_postdata(); ?>

For the purposes of illustration, a greatly simplified version of the preceding code, without any html markup, hrefs, author information, post date data, or comment section would be as follows:

$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
 <?php the_title(); ?>
 <?php the_content(); ?>
<?php endforeach; wp_reset_postdata(); ?>

How it Works

So what’s happening here? Well, the heart of the whole process is get_posts–this template tag queries the WP database and gets our posts.

Next, the foreach construct processes each post in turn–thus we’ll have all our posts on our blog page.  The setup_postdata WordPress function, well, sets up our data so it’ll display properly (otherwise the_content may not display the text of our posts. Finally, the wp_reset_postdata restores the $post global variable.

Once you’ve created the file, you’ll obviously want to upload it to your template (theme) directory.

Setting Your Blog Page

Your next step is to simply set up your blog page within the WordPress dashboard. From the WP dashboard, go to Pages, then Add New and create a page with a title “Blog” (or whatever is suitable). Remember the custom template we created above under the heading First, Create a Custom WordPress Page Template? You should now see your custom template name appear under the “Template” pull-down in the Page Edit screen, as indicated in the pic below by the green arrow.

Set the blog page by selecting the “blog” template

You don’t need to put any text in the text edit window, you just need a title–you won’t be displaying any page text here, you’ll be bypassing the specific text of this post and grabbing posts from the database.

Some Background on Why This Was Needed

Incidentally, framework and template designers that hijack WordPress’ index.php file to display a homepage slider, while requiring WordPress’ reading settings to be set to “Your latest posts” as shown in the screenshot below are doing a disservice to users (hence mandating this tutorial). The sounder practice is to code sliders and homepage features into a custom WordPress template.

30 Responses

  1. Bob Thomas

    Hey Michael. This is exactly what I want to do on my site but it is not working for me. I am getting this error: “Parse error: syntax error, unexpected T_ENDFOREACH in /home/a7674789/public_html/wp-content/themes/Recording and Mixing Studio Site 4L/page-blog.php on line 25″

    I have followed everything you described here and am wondering if there is something I need to change in the code? I am by no means comfortable with php but am not afraid to get my hands dirty.

    Thanks

    1. It’s too hard to tell from your error message, and we don’t want to paste code here, but the error means you have a foreach statement that begins but is not terminated properly. This can be just one bracket causing this.

  2. nan

    THANK-YOU SO MUCH!!! as you stated, my theme had a built in homepage template which i didn’t realize until i had almost finished building the static pages and tried to send my blog entries to a static page – it wouldn’t work and i was going crazy. now i can tear myself away from the computer finally and go to sleep!

  3. Thank you soooo much! This worked great so I can manipulate my front page to how I want it. ! Although I didn’t realize for a while I had to add the <?php in the beginning of the code you gave us, I finally got it and it's working great.. One question: is there a way to only show excerpts instead of full articles on my new front page?

    1. I think you can, actually. Look for the line of code in our tutorial that has this: “the_content();” …That command simply pulls the content of a post. If you replace it with “the_excerpt();” then you should pull the excerpt rather than the full content of the post. But I am writing this from memory so it might need some tweaking. And then, “the_excerpt” command also has some parameters so you can show different numbers of words/characters in the excerpt. As always, when coding in WP, refer to the WordPress Codex.

  4. Hello,

    I’m using Neptune wordpress free theme, and I’m having some problems (I’ve wrote to the developer but he didn’t answered me yet, so I write to you looking for some help or advices).
    I would like to know how to activate my sort items (that correspond with my portfolio categories) “All//Gráficas//Identidad//Ilustración//Vídeo”
    in this website :
    http://www.martatomas.com/

    And I’ve just found a new problem: in my home page, when I try to go to its page nº2, occurs a 404 error.

    Thanks a lot for your help,

  5. Dave

    I am using this to try and accomplish a static page showing recent post, but am having an error pop.

    $myposts = get_posts('');
    foreach($myposts as $post) :
    setup_postdata($post);
    ?>

    <a href="" title="">

    Posted by

    The only code on my page is what you show here. Line 25 is:

    Any suggestions?

  6. helios

    Hi Michael

    how do i get the previous and next post links after say I only show 5 posts in a page. I tried using the code used for my theme (Im using Roots theme) for the next and prev posts but its not working. Any pointers?

  7. Divya

    Thanks a lot for the tutorial… One question…I want “Recent Blogs, Recent Comments, Archive etc” information in the sidebar on the right hand side of the blog page. Currently it is being displayed at the bottom(after all posts). How can this be achieved?

  8. canhead

    Great blog very helpful fella
    But how can you display them as a snippet of text with a read more which takes you through to the full article?

  9. Great post. Hadn’t run into this scenario in a long while (home.php displaying posts, with additional blog archive page). This post did the trick! :) Cheers.

Leave a Reply