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 Mark

I tried to use this on a wordpress site but it does not work.

I have another wordpress in a subdirectory /food. When I tried the codes above what showed up were the posts from the main wordpress instead of the posts from /food.

Note: I changed the source to ‘food/wp-blog-header.php’

Any ideas or suggestions?

Avatar of Tony Kang
Tony Kang
Tony Kang On

Hello! Thank you for this! I appreciate it! I’ve gotten it to work but I was wondering if it was possible to also show the images and text posted within each post of the blog? Thanks in advance!!

Avatar of Tony Kang
Tony Kang
Tony Kang On

It worked! Thank you so much! 🙂 You’re the best! I’ve spent so many hours looking for how to do this!! Thanks again!

Avatar of Patti

Your tutorial is exactly what I need for a client’s website. However, I’ve implemented it as instructed & the site will only pull in ‘Hello World’ from the WordPress site. Both are hosted with with same ISP. Can you tell me what I’m doing wrong? This is my first foray into .PHP & WordPress. Thank you, thank you for any help, suggestions, etc.!

Avatar of Tracy Ridge

Does your WordPress site have more than one post or are you wanting to publish the pages too? If it is the URL that you have provided then I only see one post. Try publishing a few tester posts to see if more comes up.

Avatar of Roy

Nice post!
New to wordpress and trying to implement it just the way you describe, but………

Question: is is possible instead of your example at https://www.alfiemilne.org.uk/ where you have the Latest News & Events
just the Latest News & Events of a single catagorie!!!!!

Because i have different catagories on my website and in my blog and i want them to match!

Avatar of Tracy Ridge

@Roy Yes it is possible just add ‘category’->”4″ to the $args variable. Unfortunately it will only take the category id and not the name. For example if I want to just display the events category, which is 4, on the Alfie Milne website, I would do the following:

$args = array( 'numberposts' => 6,'category'=>"4", 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");

Do you know how to find your category id?

Avatar of Lydia

Thank you for this excellent tutorial, I am currently using it for a client and it’s the perfect solution. I was wondering if you knew a tweak so that the date displays for each article, even if they are posted on the same date. I have been fiddling with the code trying to make it do this:

August 20, 2012 Name of Post Here
August 20, 2012 Name of Another Post Here

and so forth. However it always comes out putting the date only once and then printing the next articles without a date in front. Any ideas?

Avatar of Amin Vanda
Amin Vanda
Amin Vanda On

Thank you for your simple, handy tutorial.
I like it because it involves no database connection or plugin installation. I wanna recommend this page to my php developer friends for adding WP recent posts to a static site. Thanks again and
Hey! I might use your instructions in my website as well!
(:

Avatar of Latrice

I guess I’m doing quite a bit wrong here. I’m trying to display my posts on a single page that I would like to use in a frame on my main site but when I upload the page with the codes I came up with following your instructions, I keep getting an error saying that the page is not found :-(.

Avatar of Austin Harvey
Austin Harvey
Austin Harvey On

Hi, Many thanks for this. It works great, but I have an issue with the £ sign, when I implement the code it changes to the strange diamond icon with a question mark in it ?

I cant show an example as I need my site live with proper pound signs on, so I have just disabled the .htaccess part for the minute.

Anyone have any ideas ?

Thanks.

Avatar of Samantha

Quick dummy question here..I am using .html on all pages and .php on my contact page. Should I convert all pages to .php then follow the embed steps? I’m not sure if altering the .htaccess file for the .html pages will mess up the contact.php page or not. Also, if I can keep them .html, do I follow all php steps plus the .htaccess step or just the .htaccess step for the .html pages?

Avatar of Tracy Ridge

Hi Samantha. It shouldn’t mess up with PHP files as it only targets the .html files so there is no need to change your files to .php. Changing .html files to .php may also affect SEO and your google rankings. How many pages are you wanting to display your latest posts on? If it is only 1 then you could add the following to your .htaccess to target 1 specific file.


AddType application/x-httpd-php .html

or multiple files:


AddType application/x-httpd-php .html

You still need to follow all the PHP steps to display your latest posts. If you are using a code editor it may highlight errors in your code but don’t worry the PHP code will execute thanks to the little .htaccess snippet. I suggest that you create a new page on your server to test it out first.

Avatar of Lamprocles
Lamprocles
Lamprocles On

Hi Tracy, thanks again for this work. You wouldn’t happen to have something similar for a listing of categories, would you? Or maybe a link? Preferably something that shows the post count of each category and allows for a drop down menu.

Thanks

Avatar of Lamprocles
Lamprocles
Lamprocles On

Actually, I just want the same widget from the WordPress sidebar configured as a drop down menu. Categories only, no posts.

Avatar of Tracy Ridge

Have you ever thought of using the RSS feed widget in the widgets section on your master website to show your latest posts from your sub-domain? I will have a look at a solution as it interests me but it will be after the weekend as I am currently travelling home after my holidays.

Avatar of Lamprocles
Lamprocles
Lamprocles On

Excellent. I tried 4 different solutions from other websites. None of them worked for one reason or another, with varying errors.
This PHP code worked perfect and saved me a lot of time programming it myself. Now my recent posts show up on my index.php home page exactly how I want, and it’s highly configurable.
Thanks, I’ll be visiting this site again.

Avatar of Andy

I’ve been getting an error when I try and use the code on my site. I get this error message:

Fatal error: Uncaught exception ‘LogicException’ with message ‘Class Translation_Entry could not be loaded’ in C:Apachehtdocsblogwp-includespomoentry.php on line 1

Has anyone else been experiencing this error too and did you find a way around it?

Avatar of Tracy Ridge

Try placing the following within the foreach loop. The array section (100,100) is the resolution.

<?php echo get_the_post_thumbnail($post->ID, array(100,100), 'thumbnail'); ?>

Also make sure your theme supports thumbnails, add the following to functions.php

add_theme_support( 'post-thumbnails' );

Let me know how you get on.

Avatar of Prasanth
Prasanth
Prasanth On

Thanks for your great help.It’s a pleasure to thank you. Please kindly tel me the coding for creating the same type of grid view related posts in my website.It ll be pleasure if u help me in displaying related posts.

Avatar of Prasanth
Prasanth
Prasanth On

Thank u so much for your help.Its working very well.Its working simply superb and your website is very nice.Can u tell how to change sidebar size…

Avatar of Tracy Ridge

I am not sure how much knowledge you have of HTML and CSS but if you want to make changes to your theme you will need to know the basics. I also suggest you use Mozilla Firefox and the Firebug extension to play around with the design (which wont make any permanent changes until you edit your stylesheet). If you really want to tweak your blog theme I would encourage you to learn as you go along.

Avatar of Avaroby

Just want to say your article is as astounding. The clearness in your post is simply excellent and i can assume you’re an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please carry on the gratifying work.

Avatar of Klonopin

Hey there, You have performed an excellent job. I will certainly digg it and in my view suggest to my friends. I am sure they will be benefited from this web site.

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.