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. You could, for example, have built a website from scratch and then decided to integrate a blog or news section into it and require to pull some information from the blog to your homepage. There has been several methods on the web including directly accessing the database. This is a simple but elegant solution in which 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.

Update – January 2016 – Please also check the FAQ’s Page that I have set up to go along with this tutorial.

Live Example

I have recently integrated a news blog into a static website for a charity project that I am involved in. The website was originally made up of PHP templates and then I added a news blog into it. It was easier integrating the WordPress around the current design than changing the whole web site into a WordPress blog. Anyhow the homepage is a static PHP page which fetches the data from a blog/news section which is in a sub-directory. Checkout http://www.alfiemilne.org.uk/

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 with FTP support like Aptana Studio and some basic knowledge of PHP, XHTML and a little CSS.

Download

Let’s Get Started

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

1

2

3

4

5

6

7

8

<?phprequire('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

1

2

3

4

5

6

<?phprequire('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 latest posts so please do not skip this step!

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

Line 2 holds an array of items like the amount of posts you want to display, 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. I have also included the date. It will only display the date once if several posts have been posted 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. I found this little snippet from Reach Customers online This requires a little hacking of our .htaccess file which should be in the root folder of your web server. It may be hidden by default as it has a (.) as a prefix. Either navigate to it using your code editor, enabling hidden files or download it using FTP software like Filezilla. 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.

PHP

1

2

3

4

5

6

7

8

AddType application/x-httpd-php.htm

order allow,deny

deny from all

ErrorDocument401http://www.yoursite.com/error/401.html

ErrorDocument403http://www.yoursite.com/error/403.html

ErrorDocument404http://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 resides. This re-directs to an error page when the page cannot be found.

Conclusion

I hope you have found this tutorial interesting, if you do have any problems then please contact me or visit the FAQ section that I have setup to go along with this post. I would also like to hear your success stories.

About

WorldOWeb was initially designed to inform people on new software and security for Windows. Nowadays I post on things I like and come across in the technology world and throw in the occasional tutorial and review. Find out More