Display WordPress stories and images on a non-WordPress web page
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:
<?php define('WP_USE_THEMES', false); require('/path/to/your/blog/wp-load.php'); query_posts('showposts=3'); ?> <?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> <p><?php if ( has_post_thumbnail() ) the_post_thumbnail( 'thumbnail' ); else echo '<img src="/path/to/thumnail.jpg" alt="Example Image" title="Example" width="100px"/>'; ?></p> <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:
- Line 3: Change
"/path/to/your/blog/wp-load.php"to point to the directory that hosts your wp-load.php file.
- Line 4: Specify the number of posts that you want displayed from “Blog 1”. In our example, we will choose 3 but if you prefer another number, change
"('showposts=3');"to reflect this.
- Line 17: Change
"/path/to/thumnail.jpg"to refer to the generic Feature Image that you created in Step 3. You can change the ‘alt’ and ‘title’ parameters too if desired.
For each blog post in “Blog 1”, this code will display the following items in this order:
- The post’s title (the_title)
- The date that the article was published (the_date)
- The post Feature Image (if it has one) or the generic Feature Image if not.
- The story’s excerpt (the_excerpt)
- A “read more” link (the_permalink)
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
<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("http://www.example.com/blog1.php"); ?>
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("http://www.example.com/blog2.php"); ?>
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.
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
<span> with ID’s assigned).