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.
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
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.
I have the same error what did u do to fix it ?
Im sure you have worked it out by now but for future visitors. Put a <?php before the start of the code.
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!
…and our work here is done
How do you restrict the code from showing some some of the posts?
Thanks
WordPress handles this easily, you can designate posts by category, or include/exclude particular posts by ID number by chaning the “get_posts” portion of the code shown above. You’ll want to see the WordPress Codex here: http://codex.wordpress.org/Template_Tags/get_posts
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?
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.
Thank you for this great tutorial!
thnx for sharing ,i won creat page for maps for wp geo maps for all post
Hey Micheal,
Thanks so much for your post, this saved me tons of time.
you’re welcome, sir…
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,
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?
so the code attribute isn’t working..
Regardless, I have any error on line 25 which is the last line of your example code php end of reach – http://d.pxlrmpg.com/NpA5.jpg
Thank you for this great tutorial!
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?
Great work, you saved my day. Especially the simplified version of the preceding code 🙂
Keep posting these kind of quick tutorials!
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?
Thanks, totally helpful!
Ok,, I was able to get pretty far following the article and the comments… I did replace the_content with the_excerpt except now I no longer have the first image of the post.
How can I display the first image AND the excerpt?
http://www.hippressurecooking.com/recent-articles/
Thanks,
L
Dude, THANK YOU!!!! This is exactly what I needed, and nobody else had this code anywhere. Thank you again!
Blessings,
Ryan
This is code is working, but only 5 posts are being displayed on my page, do you have any idea why?. Also try to add option of pagination.
its working but instead of post titles the blog page title is getting displayed with all blogs
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?
Been looking for this info since 2 hours, working like a charm for my blog 🙂
thanks Michael.
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.
<3<3, been looking for this and you saved my bacon.