February 17th 2013

Displaying Wordpress Posts in HTML page

Wordpress Posts Displayed in a standard Website...

We have created this useful guide to help fellow web developers provide a little more functionality to a website.  Web designers and developers know that Wordpress is built in server side technology called PHP and its very difficult to place PHP into a standard HTML page.

The only way to do this in the past was to use third party RSS Aggregators like SimplePie and MagPie to fetch your latest posts from your blog’s RSS feed.  This could mean a lot more scripts and code than you actually need.  So we would like to share some useful code to help develop your site.

Step 1. - (Apache Server) - How to inject PHP into a HTML page

First you need to tell your web server to allow PHP into a HTML file. Copy and paste this code into your htaccess file. (if you don't know what your doing with htaccess files please be careful).

AddHandler application/x-httpd-php .html

Step 2 - PHP Script

<pre class="brush: php; title: ; notranslate" title=""><ul>
<?php require($_SERVER['DOCUMENT_ROOT'] . '/folder/wp-load.php'); query_posts('showposts=3'); if (have_posts()) : while (have_posts()) : the_post(); ?>
<li> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<span>Posted on <?php the_time('l jS F, Y') ?></span><br />
<?php the_excerpt(); ?> </li>
<?php endwhile; else: echo "no posts"; endif; ?>
<?php wp_reset_query(); ?>

Step 3 Installation to HTML (Non Wordpress page)

  1. Copy the code above, and paste onto your HTML web page.
  2. Adjust the path to wp-load.php on line 2. You will need to change this to match the name of your folder.
  3. Select how many posts you would like to feed through. If anything other than 3, simply locate ‘showposts=3′ on line 2, and adjust accordingly.
  4. Upload the HTML file and then test file.
  5. Adjust the surrounding HTML as necessary.

If you have any questions the quickest thing to do is give us a call: 01543 223074