Tag Archives: wordpress hooks

How to show your latest blog posts on a non-WordPress page

wordpress-blog-header-fluffed-vision

Quite often on a website, there is a need to show your WordPress blog posts outside of the WordPress installation.  You may already have an HTML / PHP site, and you have decided to add a blog page, but want to show some of the posts on the front page (for example).  Luckily, WordPress makes this process as easy as adding a few lines of code to your pages.

You will need a little bit of familiarity with PHP, but realistically, anybody should be able to do it.

There are two things to do:

First, you need to tell your non-Wordpress page that you are going to be extracting information about your posts. So, at the top of the page add the following:

<?php 
  define('WP_USE_THEMES', false);
  require('/wp-load.php');
  query_posts('showposts=4');
?>

Let’s break this down a bit.

The first line tells WordPress that it won’t be needing to use any of its themes.  We are adding the posts to a page that we will assume is already using a stylesheet of its own, so we need the extracted WordPress information to blend in accordingly.

The “require” line will need to be relative to your wp-load.php, so if you have added your blog in the default WordPress directory, this line may end up as:

// If it's in a directory called "wordpress"

require('wordpress/wp-load.php');

// If you need to backtrack to server root to get to you sub-folder

require('../wordpress/wp-load.php');

The exact structure of this line is individual web server and code dependent so will need to be adjusted to suit your exact requirements.

The second line is pretty self-explanatory, it is telling the page to use the WordPress loader.  The loader is required whenever you call anything from WordPress, be it posts, pages, categories etc.

The third line is what we want to extract from the WordPress database.  In this case, we are pulling the lastest four posts.

Following this, we will need to display the posts on the page.  We do this using the standard WordPress API in the form of WordPress hooks.

So:

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

  <h4><?php the_title(); ?></h4>

  <?php the_excerpt(); ?>

  <p><a target="_blank" href="<?php the_permalink(); ?>">Read more...</a></p>

<?php endwhile; ?>

 

That’s it!

The first and last lines tell the page to show posts if there are posts available.  From there, it is just a list of standard WordPress hooks, which on the whole of quite explanatory.  While we are looping through four posts, for each of them, show the post’s title, the excerpt from the post – which can be adjusted in the WordPress admin panel – then add a link to read more.  This link will take the user to the main blog page.

Want to show the full post and not an excerpt from it? No problem.  Just replace “the_excerpt” with “the_content”.

Want to add the posts featured image as well?  No problem, include:

<?php
  if ( has_post_thumbnail() ) {
      the_post_thumbnail();
  }
?>

Here are some working examples:

An example snippet that would show the title of the post, along with the featured image and an extract of the content:

<?php while (have_posts()): the_post(); ?>
 <h4><?php the_title(); ?></h4>
 <p>
  <?php
    if ( has_post_thumbnail() ) {
      the_post_thumbnail();
    }
  ?>
 </p>
 <?php the_excerpt(); ?>
 <p><a target="_blank" href="<?php the_permalink(); ?>">Read more...</a></p>
<?php endwhile; ?>

An example snippet that will show the title, full post, but no image:

<?php while (have_posts()): the_post(); ?>
 <h4><?php the_title(); ?></h4>
 <?php the_content(); ?>
 <p><a target="_blank" href="<?php the_permalink(); ?>">Read more...</a></p>
<?php endwhile; ?>

If anybody would like to add some more code examples to the comments, I’ll be glad to see them and we’ll get them added to the main post to build up a little library of useful snippets.

 

 

 

Share this post:
read more