Display Recent Posts outside the WordPress

As I mentioned in my other post, Comments outside the WordPress, I’m using WordPress for the Bloging on my website and so far quite happy with its feature and performance. However, rest of my site is based on Dreamweaver site templates, and is static HTML for most of the part.

Today I decided to show my ten recent blog posts on the home page too. This time instead of using the iFrame to display WordPress pages, I decided to use the AJAX (using JQuery). The first important task was to generate a list of the recent posts in a simple plain page (without my current blog’s theme). After doing a bit research I came up with following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
/**
 * WoredPress Latest blog entries
 * @package WordPress
 */
 
require( './blog/wp-load.php' );
 
// Load the recent top 10 posts
query_posts( 'posts_per_page=10' );
?>
 
<div id="blogPosts">
    <ul id="blogList">
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
                <li>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                <?php the_title(); ?><span class="date"><?php the_time('F jS, Y') ?></span></a>
                </li>
            <?php endwhile; ?>
        <?php endif; ?>
    </ul>
</div>

This PHP page can be placed outside the blog directory (I placed it in my root folder). Please note that query_posts is the key function in this page which is used to fetch the required 10 recent post.

You can now test the functionality of this page by directly pasting this page path in your browser. Once it’s working fine, you can move ahead with you changes on home page to display this content. Here is the JavaScript I’m currently using to display these posts:

1
2
3
4
5
6
7

<div id="blogPostsWrapper">Loading... </div>
 
<script  type="text/javascript">
	$.get('/wp-latest-blogs.php', function(data) {
	  $('#blogPostsWrapper').html(data);
	});
</script>

That’s it. The simple AJAX by JQuery fetches the content of the page and then display it inside the HTML div, and this all works very smoothly. You can see this yourself at my homepage:
http://www.syedgakbar.com

Tags: AJAX, JQuery, Outside, WordPress

This entry was posted on Sunday, July 15th, 2012 at 11:29 am and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.