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.

Topics:

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

  • I’m looking to do something similar to what you’ve done here, except that I want to pull the articles from a wordpress blog (not in a subdirectory on my site, separate site competely) to list them in a sidebar so my visitors can check them out. How can I do this?

  • Tayfun K.
    Tayfun K.

    Hi Tracy,
    I do not know anything about most of these thing.
    But I am triyng to learn 🙂
    When we came to my problem, i did not understand or see how I can add php to HTML.
    You write CSS but I did not understand what this is and what for it.
    I created PHP as you mentioned. I did some changes in .htaccess
    Last part is to add php into html file.
    Pls help me.
    Thanks for all.

    • Hi Tayfun

      PHP is a dynamic language that will execute in a .php extension. If you use a .html (or .htm) extension then PHP inside of the file will not run as the server cannot process it. That’s where the .htaccess trick comes in handy as it allows the server to process the PHP inside of the .html file. It also saves you from manually changing all .html extensions to .php as you may have to change all links etc.

      CSS (Cascading Stylesheets) is all about the styling and positioning of the HTML elements, div, span, ul etc. It is a .css extension and is linked from the .html file in the head section. Many moons ago CSS was done inside (called inline) of the .html document which was not only time consuming it wasn’t re-usable as you had to repeat the process for all of your pages of your website. With a separate stylesheet you can have the same structure for all of your web pages in one single file.

      If you want to learn more I highly recommend signing up for Code Academy which has free interactive tutorials.

      • Tayfun K.
        Tayfun K.

        Thnx for answering. I cannot add php into html. Thereore, I changed my index.html as index.php. I wrote the php codes into index.php. By doing this I solved my problem :). Your article was so helpful and I learned many things.
        Here is another problem. Can you help me? 🙂
        My question is I want to insert image existed in the wordpress-post to my index.php. ı almost read all comments. There were some answers related my question.

        I just call an image from post in the my wordpress-blog to my index.php. (also I want to resize this image like 150×150. And when you click to image it should goes to my wordpress-blog post.)

        And I want to input this image here:

        I dont know wherther I am clear or not. If there is a problem definetely because of my english 🙁
        THANKS for Everthing.

      • Tayfun K.
        Tayfun K.

        Tracy, I changed my mind. I just want to call recent last 5 post from my blog.(noimage,nothumbnail) And limit the words and put at the and of paragraph “read more”. I inserted php codes but just calling 1 post and second’s title.

      • Try adding the following (under line 8 on the snippet of code displayed on the post)

        Let me know if it comes back as a full blog post or with read more.

        To change the amount of posts you need to change numberposts, on line 2, to 5.

      • Tayfun K.
        Tayfun K.

        Tracy soooo thank you. It’s done 🙂
        But, there is one more thing that I want to do.
        How can I write text right of the image not bottom of the image. I posted text in wordpress-blog as right but at the my php page texts are not right of the image..
        Do you have any idea?

      • I have had a look at your source code. Currently your images are in h3 tags which are block elements, meaning that they take up all available space so you cannot place text to the right unless you add a little CSS to display it as inline. You then have your paragraph underneath with text align left. Personally I don’t recommend that you wrap all of your images in h3 tags, put them in a span instead. You have to go into your blog posts to edit them. Then the paragraph underneath needs to be displayed inline too.

        Try adding a class to your paragraph:

        This is a test

        Then in your external stylesheet, not the one used by WordPress.

        .info {display:inline;}

        Currently you are adding all your CSS inline to your blog posts.

        I highly recommend that you install Firebug and the Firefox browser and do a few tutorials on code academy. This will save you a heap of time.

  • Hi Tracy,

    Thanks! This article describes exactly what I want to do and your instructions are concise and clear.

    Unfortunately, every your excellent instructions are apparently over my head. I’ve followed your instructions for embedding WordPress content in a page with a php file extension, but I’m messing something up (and it appears to be something “simple”).

    I hope you can tell me where I’m going off track.

    1. I placed this, , in the tag.

    2. When I load the page from my webserver, I get the following error(s):

    Warning: require(/public_html/blog/wp-blog-header.php) [function.require]: failed to open stream: No such file or directory in /home/itisgary/public_html/blog.php on line 17

    Fatal error: require() [function.require]: Failed opening required ‘/public_html/blog/wp-blog-header.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/itisgary/public_html/blog.php on line 17

    Can you tell me what I’m doing wrong or failing to do?

    Thanks!

    Chris

    • In the sentence, “I placed this, , in the tag,” there was supposed to be the path I typed to wp-blog-header.php, but that string was removed when I posted the comment.

      Without the opening and closing tags, it was as follows:
      (‘/public_html/blog/wp-blog-header.php’).

      Thanks!

      • Success! You’re awesome, Tracy. I wish you had an Amazon wishlist conspicuously linked on your site…

        Thanks so much for your speedy reply and excellent instruction!

      • Glad it worked Chris. I always try to respond to my comments quickly although it sometimes takes a little longer when it’s busy periods and I have my kids off school! I do have a amazon wishlist, just never thought of adding it to my site. A simple “Cheers Mate” pleases me.

  • Nwosu Desmond
    Nwosu Desmond

    Your tutorial has been most useful to me as i have been facing this challenge for lone, but after reading this article i have finally been able to fix my homepage properly. Thanks.

  • Hi Tracy,

    First of all, thank you for your great post! I found this nice tuts while I was doing the same thing as this post says and actually got some help from this but one thing keeps getting me stuck in this assignment is, I can’t seem to display images or thumbnails with recent posts simultaneously. Right now, I can only display recent posts.

    I noticed that you answered this similar question up here previously but the solution is unfortunately not working for me.

    http://www.worldoweb.co.uk/2012/display-your-wordpress-recent-posts-on-a-static-page#comment-1108

    Basically, I already have two different kind of add_theme_support commands being used in my functions.php. One for add_theme_support( ‘automatic-feed-links’ ); , the other one for add_theme_support( ‘custom-background’, $args ); Even tried adding another one you mentioned but it didn’t work.

    Can you help me out?

  • Hi, I appreciate this article since it has been my only hope in getting my wordpress blog embedded on a section of my homepage.

    I followed all the instructions above and now have the permalink/title and post-date inserted, but would like to add the content from the post also. I’ve read about the modifier and adding it to the loop, but this is uncharted territory for me as I am just getting used to WPML. Could you please offer any assistance in adding in the post’s content? I apologize if this question has already been asked. Thank you!!!

  • Christina
    Christina

    Thank you for the very clear article.

    I was wondering if you could elaborate on how to include the post excerpt.

    Again, thanks for the article!
    Christina

    • Christina
      Christina

      Sorry to reply to my own comment, but I found you just needed to add:

      This leads me to another question, is it possible to display your excerpt with the formatting from the original post?

      Thanks!
      Christina

  • Dear Tracy
    Thanks For Your Attention
    My URL is http://www.Muhama.com
    there aren’t any way to bring plugins from wordpress to HTML?
    if there is a code that insert all of content of a post to HTML (Just like WordPress : Title,Date,Author, content, comments,categories and plugins), please tell that to me
    thanks you a lot
    (excuse me for My bad english)

    • You can load the plugins by using wp-load

      <?php
           //if you don't require the theme template
           define( 'WP_USE_THEMES', false );
           
           //ensure the relative path to wp-load.php is correct
           include '../wp-load.php'; 
      ?>
      

      I haven’t had any time to check what plugins you can load so you might want to search the WP Codex for more info. The WordPress Answers page may help you too.

  • hi dear tracy
    i put your codes in my Html site
    its work well, but i have some problem
    1:how i can add a wordpress plugin in my static pages (examples: star rating plugin, sharing plugins,poll plugins)
    2: when i use , my RTL has been deformed.

  • Tracy
    This is exactly what I have been looking for but unfortunately its not working for me.
    I have a normal index.html page as my home page. I have a blog as a subdirectory in the root folder. So I saved the index.html as an index.php file and added the header call to the top of the .php page before the document declaration and then added the rest where I want the posts to appear, on the bottom of the index.php. I then uploaded the page but when I try to access the page using my browser, Safari, I get a blank page. Any ideas?

  • Todd Temple
    Todd Temple

    I had to change this snippet:

    foreach ($postslist as $post) : setup_postdata($post);

    To this:

    foreach ($postslist as $post); setup_postdata($post);

    In order to get it to work for me.

  • Bryan - After5PC.net
    Bryan - After5PC.net

    Thank you so much for this tutorial. I was able to use it on a non-wordpress page outside of the blog on one of my websites.

  • Tracy will this work on my wordpress site, my home page is a static page on purpose, but i recently started adding posts to the blog section of the site. I would like to to maybe one or two post to the bottom of the front page.

    I already share your page on twitter because I know from experience helping sometimes can get out of hand.:) dont want spam my domain name on your site. but if you type rank on top online, thats me any help would do if you could please. Thank you.

      • Tracy
        I was able to make this work for a WordPress site with a static front page with a little modification like so:

        5, ‘post_status’=>”publish”,’post_type’=>”post”,’orderby’=>”post_date”);
        $postslist = get_posts( $args );

        foreach ($postslist as $post) : setup_postdata($post); ?>


        <a href="” title=””>

        ID, array(150,100), ‘thumbnail’); ?>

        Then just style the “post” div to suite.

  • Hi,
    I installed the code on my site and im getting an error but only sometimes, the website is longislandlandscapingltd.com this is what is says.
    wordpress database error jquery was empty. Can you please help me out?

    • I have never come across that error. The only thing I can think of is that it conflicts with a plugin or there is some whitespace directly after the PHP start and end tags. Do you get any other errors? Have you enabled logging of PHP errors or used the Debug toolbar plugin?

  • Hi there! You might have solved a big problem for me… Could this code, by any chance, have the possibility to be extended to show the latest posts from all users on a multisite installation? (Where the useres are forced to post in either category “a” or category “b”?

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.