Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

Display WordPress stories and images on a non-WordPress web page

Step-by-step instructions for including WordPress blog content on non-WordPress static web pages. This method is ideal for advertising ‘latest stories’ on a static website where the article headline, excerpt, date and thumbnail image are to be displayed.

WordPress is such a versatile blogging platform, but a significant challenge arises when one wants to include the contents of a WordPress blog (or series of blogs) on another web page outside of the WordPress installation. In my case, I have two separate WordPress installations on my server (The Grapevine and Code) which sit beside a static website.

For my latest project, I wanted to display the three most recent story headlines from each blog on a single static page outside of WordPress along with corresponding excerpts, dates of publication and a preview image for each story. This sounds surprisingly easy and it is, although instructions on the internet are hard to find.

Here’s how you can publish links to recent WordPress stories (including with excerpts and thumbnail images) on a non-WordPress static page.

Step 1: Activate “Featured Images” within your WordPress theme

Depending on its age, your WordPress theme may or may not have “featured images” (or thumbnails) enabled. To check whether your theme supports “preview images”, log into your WordPress dashboard and in the menu on the left, choose Posts > All Posts, then click on the title of any story.

Examine the right-hand column on your screen. If “featured images” are enabled, you will see the following box displayed:


If this box isn’t present, you will need to enable “featured images” for each theme.

To do this, open functions.php (located at /wp-content/themes/[your theme name]/) and insert the following line of code:

add_theme_support( 'post-thumbnails' );

Go back to the Dashboard within your WordPress installation. Click on Posts > All Posts, then click on the title of any story as you did previously. This will open-up the story page and the above box should be visible on the lower right-hand side.

Step 2: Create a “feature image” for each blog post

For our example today, we’ll be listing the three most recent stories. Therefore, it is important that the three most recent stories have feature images assigned to them.

To do this, go to the Dashboard, click on Posts > All Posts, then click on the title of the most recent story. Under “Featured Image” click on the “Set featured image” link and either assign an image from your gallery or upload a new one. Please note, this will not alter the contents of your story, including your images.

When complete, you should be able to see your “featured image” within the box:


Repeat this process for the next two most recent stories in your first blog and then for your three most recent stories in the second installation.

Step 3: Create a generic “feature image”

Should a situation arise in the future where a blog post doesn’t have a “feature image”, you will need a generic image to fill the void (see later).

In your favourite image-editing programme, create a 150px×150px JPG image which will be displayed beside any story that lacks a “feature image”. Save this image to your WordPress image uploads folder (normally /wp-content/uploads/) as “thumbnail.jpg”.

Step 4: Create your PHP files

For the sake of simplicity, let’s call the first WordPress installation “Blog 1” and the second “Blog 2”. You will need to create separate php files for each and then reference them in a third in order for headlines to work in your static page.

Create two plain text files. Call one blog1.php and the second blog2.php.

Paste the following code into blog1.php:

define('WP_USE_THEMES', false);

<?php while (have_posts()): the_post(); ?>
<?php endwhile; ?>

<?php while (have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></p></em>
	if ( has_post_thumbnail() )
		the_post_thumbnail( 'thumbnail' );
		echo '<img src="/path/to/thumnail.jpg" alt="Example Image" title="Example" width="100px"/>';
<p><?php the_excerpt(); ?></p>
<p><a href="<?php the_permalink(); ?>">Read more...</a></p>
<?php endwhile; ?>

Adjust the following parameters for your “Blog 1” WordPress installation:

For each blog post in “Blog 1”, this code will display the following items in this order:

Repeat the same for blog2.php, but this time change the parameters so that they work for “Blog 2” (Line 3 is critical).

Save blog1.php and blog2.php and upload to your server via FTP.

Step 5: Create your static web page.

Using your favourite web page editing programme, create a new PHP file (or open an existing one) that has <head>, <title> and <body> tags as a minimum.

Insert the following code into the <body> at the point where you would like to display the three most recent stories from “Blog 1”. Don’t forget to change the path directories to match that on your server:

<?php echo file_get_contents(""); ?>

Insert the following code into the <body> where you would like to display the three most recent stories from “Blog 2”, again changing the path directories to match your server:

<?php echo file_get_contents(""); ?>

Save your php file and upload to your web server.

Step 6: Check your code

Using your favourite browser, point to the last file that you made.

You should be able to see three stories from each blog, complete with a preview image, abstract, date and link.

Optional Extras

Once you get this to work, you can add more parameters (called Function References) at Step 4, such as the story’s author (the_author) or category (the_category) or ID (the_ID) or tags (the_tags).

You can also change the surrounding HTML to alter formatting (in my example, each parameter is displayed between <p> tags except for the header which is between <h2> tags. These can be changed to <div> or <span> with ID’s assigned).



3 responses to “Display WordPress stories and images on a non-WordPress web page”

On 14 November 2013, Al wrote: Hyperlink chain icon

Hi, I’ve just tried to implement the code you have above to pull in blog posts on the home page of a static website but I can’t seem to get it working.

I am currently working on a static website and have WordPress installed in a sub folder (/blog) – this is a separate page/link in the main menu of the site. So what I am trying to do is pull in the 3 most recent posts with thumbnails, I’ve double checked the code I have entered above and can’t see anything different.

The problem is my page is not displaying anything where the posts should be.

Any ideas?



On 20 November 2013, Adam Dimech wrote: Hyperlink chain icon

Hello Al,

Is the page that you are trying to display the posts in have a .php extension? If so, does the source code indicate a PHP error? If not, is the rest of the page’s HTML displaying?

This is a tricky problem to diagnose without seeing the page.


On 24 November 2015, Steve Joiner wrote: Hyperlink chain icon

Hi. Is there a way I can split the display of 3 posts to fit a bootstrap layout similar to the example below:

<!-- Show post 1 -->
<!-- Show post 2 -->
<!-- Show post 3 -->

Because post 1 will have a different class to posts 2 and 3?

any ideas?

Thanks in advance.


Have Your Say

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.