Skip to main content Jump to list of all articles

Display Your WordPress Recent Posts on a Static Page

This tutorial shows you how to display your recent posts on a static web page. So now you ask the question ‘Define Static?’ There are a variety of reasons why you may have static pages. If you have built a website from scratch and need a blog or news section. You want to pull some information from the blog to your homepage.

There have been several methods on the web including accessing the database. In this simple, but elegant solution I will show you 2 methods. One of which will be on a page with a .php extension and another will be on a page with a .htm extension.

If you want to display your latest posts on an existing WordPress blog please check out the following post.

Please check out Display your WordPress Recent Posts FAQs that I have set up to go along with this tutorial.

recent posts
Photo by Markus Winkler on Pexels.com

I have recently integrated a news blog into a static website for a charity project I volunteer for. The website was I have recently integrated a news blog into a static website for a charity project I volunteer for. The original website used custom PHP templates. It was only after the build process I added a WP news blog into it. It was easier integrating WordPress around the current design than changing everything. Anyhow the homepage is a static PHP page that fetches the data from a blog/news section which is in a sub-directory.

Prerequisites

I am assuming that you have WordPress installed on a PHP Web Server or are using web hosting. You will need a code editor. I recommend Visual Studio Code. I would recommend that you should have some basic knowledge of PHP, HTML and CSS.

Download

Get Started – Add Recent Posts

First of all, you need to open up your code editor and open the file in which you want to add your WP code snippet. At the top of the page you want to add the following:

<?php require('wp-blog-header.php');

 /*if you are getting 404 errors uncomment the next 2 lines*/
    //status_header(200);
    //nocache_headers();

?>

This loads the WP environment and template. If you have WP installed in a subdirectory then prefix wp-blog-header.php like so:

<?php require('YourSubDirectory/wp-blog-header.php');

 /*if you are getting 404 errors uncomment the next 2 lines*/
    //status_header(200);
    //nocache_headers();
?>

Without this we wouldn’t be able to display our recent posts so please do not skip this step!

Now in the area, you want to display your recent posts insert the following

<?php   
$args = array( 'numberposts' => 6, 
               'post_status'=>"publish",
               'post_type'=>"post",
               'orderby'=>"post_date");

$postslist = get_posts( $args );
echo '<ul id="latest_posts">';
 foreach ($postslist as $post) :  setup_postdata($post); ?> 
    <li><strong><?php the_date(); ?></strong><br />
    <a href="<?php the_permalink(); ?>" title="<?php the_title();?>"> <?php the_title(); ?></a>
</li>
<?php endforeach; ?>
 </ul>

Line 2: The $args variable holds an array of items. In this case numberposts is the number of recent posts you want to display. Other arguments include post type, post status and order in which you want to display them. To view more options visit get_posts on the WP Codex.

Line 3: We get our posts and assign the array to a variable called $postslist

Line 5-10: We then start our foreach loop which will grab all the posts. We then wrap each post up in a div element. I have also included the date. The date will only display once there are many posts published on the same day. You can remove the date if not needed. We then display the posts pretty permalink underneath.

Adding to a Non PHP web page

Now to add our blog posts to a .htm or .html page. This requires a little hacking of our .htaccess file which should be in the root folder of your web server.


The htaccess file has a (.) as a prefix so it might not show. In your FTP software ensure that you can view hidden files. Furthermore, make sure you keep a backup to be on the safe side. You may also need to create one if you do not have one already.


In your .htaccess file add the following.

AddType application/x-httpd-php .htm

order allow,deny
deny from all

ErrorDocument 401 https://www.yoursite.com/error/401.html
ErrorDocument 403 https://www.yoursite.com/error/403.html
ErrorDocument 404 https://www.yoursite.com/error/404.html

Line 1 Make sure you use the correct extension. I have used (.htm) in this case but you could change it to (.html) etc:

Lines 6,7,8 Change the directory to which your error pages live. When the page is not available this will redirect to an error page.

Conclusion

I hope you have found this tutorial interesting. If you do have any problems then please contact me. You can also visit the Display your WordPress Recent Posts FAQs section that I have set up to go along with this post. I would also like to hear your success stories.

286 replies on “Display Your WordPress Recent Posts on a Static Page”

Avatar of Sheena Cardona
Sheena Cardona
Sheena Cardona On

Good web site! I really love how it is nice on my eyes it is. I’m wondering how I could be notified whenever a new post has been made. I’ve subscribed to your RSS feed which may do the trick? Have a nice day!

Avatar of Subham Jha
Subham Jha
Subham Jha On

Great Work!
Just wanted to know is there any way to get posts of specific category or even hashtag ?
A reply would by appreciated.
Thanks in advance.

Avatar of Lawrence Nyambane
Lawrence Nyambane
Lawrence Nyambane On

Could you please make a tutorial on how to do this, but by pulling posts from a Joomla blog. I will absolutely appreciate it.

Avatar of Lawrence Nyambane
Lawrence Nyambane
Lawrence Nyambane On

Wow, you’re prompt. So the blog is on a subdomain with Joomla installed, and the static page is on the main domain. I think subdomains are treated as separate entities so no, they’re not on the same severs. I could be wrong though.

Avatar of Tracy Ridge

Hi Lawrence. Apologies for not being so prompt this time. I am in the middle of moving home.

I have been having a play and have been able to pull all the posts from a Joomla blog and place it in a non-Joomla website but unfortunately, URL’s are handled differently and are not stored in the database so at the moment the content doesn’t contain links.

I am however going to look at alternatives and hopefully find a solution.

Avatar of Lawrence Nyambane
Lawrence Nyambane
Lawrence Nyambane On

I understand Tracy. Well, do let me know when you find one. And I hope you settle in quickly. ☺

Avatar of Matt Millard
Matt Millard
Matt Millard On

Works perfectly – however, it adds about 6 seconds to my page load time. Anyone have any advice? Using this method to import to my footer.php:

<php require("$_SERVER[DOCUMENT_ROOT]/topics/wp-blog-header.php");?>
Avatar of Tracy Ridge

You could add above the call to blog-header.

define('WP_USE_THEMES', false);

It might shave a little time off.

The only other viable option would be to use the WP Rest API but it’ll probably be overkill just to fetch a few posts etc.

Avatar of Matt Millard
Matt Millard
Matt Millard On

Hey! This solved everything, thank you. Now it works perfectly and adds zero time to my load speed.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.