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”

  • Matheny00
    Matheny00

    Tracy as you requested this is the link to the website page I am trying to have all my latest post show lazermodels.com. What my goal is with this would be to go to an event do some posting and pictures and that would then be on the front page of our site…. here is the info from my email also…

    I have a site I am trying to show my last 2 blogs on the front page and all I
    get are the titles of them not the blog text. Also is there a way to remove the
    hyper link as I have a link to take them to the blog but to keep them on the
    site. I am only rushing on this as we will be using it this weekend to post
    updates of the show we are at along with future shows. Will this show the
    pictures with the post also?

      • Matheny00
        Matheny00

        Yes I think… I want the full post and any image in the original post and no hyper link to the post because it takes them out of the website to the blog where my link lets them go to the blog in the site.

        Thank you

      • Matheny00
        Matheny00

        Tracy we are really close can a css be created to bold the title of the post and how can I reverse order the post right now it is showing the older post first can I get the most current post first?
        Again thank you

      • Matheny00
        Matheny00

        You are right on the order all is well. I added your changes looks great thank you.

        The only thing I ran across last night is if I upload a picture via my WP app on my phone and post it with an image that the image will not scale with the size of the site. http://www.lazermodels.com/ the image is original size is there away to make all images show no larger than 200px x 200px and they can click on the inage to get the full picture if they desire? I( know I can scale it on my phone but then it is too small to look at as when you click on it it is the same size. I hope this is clear.

        Again thank you so much

      • Matheny00
        Matheny00

        Tracy I got it figured out there is a setting on the app for the width so I am all set Thank, Thank , Thank so much I wish you had a tip jar

      • Have you tried changing the Media settings in Admin? You can set 3 sizes, thumbnail, medium and Large. You can display the medium image which should link to the full image. I haven’t really used the mobile app but I guess you should be able to change the settings. It could also be done with CSS too but your website is currently down so I can’t test it.

  • Matheny00
    Matheny00

    Wow this is what I am looking for but I have a problem I only get the title of the post none of the post lazermodels.com

  • Here is the simplest way to do it without modifying too many files. With just a single php page and an HTML iframe you are set to go

  • Tracy, My host is Network Solutions and the root directory is htdocs and there is no .htaccess there so I created one using the host’s file manager and just copied and pasted the code you have and when I go to my site I get a Internal server error. Is this unique to Network solutions? Here is the code I pasted to .htaccess file:

    AddType application/x-httpd-php .html

    order allow,deny
    deny from all

    • Not sure if it’s a network solutions problem or not. Try the following:
      If you are only using 1 page try
      AddType application/x-httpd-php .html
      or
      AddType application/x-httpd-php .html for all files.
      Remember to remove previous code and check all pages if you use the 2nd example.

      • That doesn’t work either. The funny thing is there is no htaccess file there to begin with and when I create one using the host file manager I name the file .htaceess but I am not sure what it creates even though the file is hidden. I called their support and they tell me they don’t know anything about it!

      • Sorry for it is my fault. I forgot to add the blog header php as the first line of code! Its working fine now.

  • Hello, and thank you so much. Your solution accomplished what I needed. I do have one more question, is there a way to ignore a database error and only display what is actually in the index page, incase the database goes down? The reason I ask is because MySQL had an issue today and all what I could see on the page was this error: “Error establishing a database connection”. The issue has been fix but I would like to know if there is a way to ignore this error and display the rest of the index page?

      • Have you got errors turned off in your wp-config.php? With the following snippet of code you can stop the errors from displaying and log them instead.

        <?php define('WP_DEBUG', true); // or false if (WP_DEBUG) { define('WP_DEBUG_LOG', true); define('WP_DEBUG_DISPLAY', false); @ini_set('display_errors',0); } ?>

  • Thanks for the simple and straight-forward tutorial, I’ve been wanting to do this forever and finally got around to looking for a solution. This took me just a few minutes to implement. A little bit longer to integrate. Our site runs on Windows with Classic ASP, but the server has PHP turned on and a WordPress blog running on a sub-directory. For anyone who is interested in a Windows solution, we were able to integrate this code by calling it from an iFrame onto our home page at http://www.playersjet.com

  • Hi! Great tutorial! This is exactly what I’ve been looking for so I’m really happy to see it. I’m running into an issue, though. I followed all the steps and when I visited the page I have this error showing up where the blog post is supposed to be Fatal error: Call to undefined function get_posts() in /home/jhundley/public_html/beliefbb.com/homepage.php on line 122

    I appreciate any help you can give!

    • Hi Jason. You are linking to a WordPress.com account rather than the self hosted WordPress which this post is aimed at. Your only options are to use SimplePie to parse the RSS feed or install a self hosted WP blog on your server.

      • Hello. I did install a WordPress blog on my server and I thought that’s what I was linking to.

      • I see, when I clicked on the blog link in your navigation it took me to the WP.com website. Try emailing me the code that hasn’t shown up in your last comment and I will guide you through it. My email address is in the footer or alternatively use my contact form.

  • Hi Pawan. There was a problem with a couple of plugins conflicting with each other which affected the syntax plugin but it was fixed. Are you still having trouble? As for your query could you elaborate a little on your problem or provide me with a URL so I can take a look.

  • Thanks so much for such an great tutorial! I’m almost there! I managed to show my posts on my static page but when I click one of the articles it shows the full article but doesn’t show the static template page. How do I change this so when I click the article it shows the full article in the static page. Thanks!

  • Thanks so much for the post! This is close to what I’m looking for. Is there a way to add the side navigation though like Archives? Also, I’m having issues copying the code. Is there something I’m missing with copying the third piece of code snippet? Thanks again!

  • solongfarewell
    solongfarewell

    Very nice! What If I want to add the date above each post even if there are two or more in the same day? Its just a style preference for me.

  • It’s a shame you don’t have a donate button! I’d without a doubt donate to this fantastic blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.
    I look forward to new updates and will talk about this blog with my Facebook group.
    Chat soon!

  • Smartkathy
    Smartkathy

    Hey there. Static pages are very important for a website to make it search engine friendly. By displaying recent posts in our website will be much efficient for us. Nice information and tutorial.

    Here is my website http://www.zealousweb.net/ please review it and let me know your suggestion. Thanks in advance.

  • Hi Tracy,

    Thanks for the great post! I haven’t tried it yet, but I will once I make the right decision which way to go… Perhaps your experience will help me decide…. 😉 This is where I’m debating which way to go:

    1) Build a static site and add a link to the WP.org blog
    2) Or just integrate the WP. org blog into the static web page

    If I add a link to the WP.org blog, I have to make both WP blog and static website the same look…….I could use the framework and child theme to achieve the same look to match the static website. I suppose I could create the same HTML tags and attributes from both framework and child theme into my static website.

    If I choose to integrate the WP.org blog into the static web page according to your tutorials above, do I need to worry how the WP.org blog looks if someone stumbles upon it via WP blog page directly (rather than my website)? (I meant if I do not do anything with the WP.org blog’s look.)

    Thanks so much!

    • Hi Lori

      I actually designed the alfiemilne website as a static non WP website then Alfie’s family asked me if I could setup a blog after the original site had gone live. At first I had it as a sub-domain blog.alfiemilne.org.uk, with a totally different theme, then I decided to re-design it and integrate the WordPress blog into the new design, as the news section. It wasn’t really time consuming although if I was asked about the blog first, before building the original site, I may have gone with creating the whole site using WordPress. It’s swings and roundabouts but you should do with what is most easier for you and what you feel comfortable with. It was simpler for me as the content was already there.

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.