Site Loading

Using Javascript to Load Blog Posts From WordPress

2889870505_9aebec83bb_mI have been designing a new site that will load post from a wordpress blog and display them on a webpage.  Since the weg is a straight html page, I only have the option of using javascript to load the RSS feed.

To start you will need a plugin in your wordpress site:  JsonAPI.  This plugin will allow you to specify how many posts you want loaded from your blog.  The way to access this is to call the URL http://yourWordpressBlogUrl.com/?jsonapi=<number of posts you want>

Side note: I am aware that you can use the built in feature in WordPress http://yourWordpressBlogUrl.com/?feed=json but as of the date of writing this I was getting an internal error so decided not to use that feature.

Once you have installed and activated this plugin you will need to add the following code into your web page:

    $.ajax({
        url: "http://yourWordpressBlogUrl.com/?json=3",
        dataType: 'jsonp',
        success: function (data) {
            if (data && data.posts) {
                _.each(data.posts, function (post) {
                    console.log("------------------------");
                    console.log("title : " + post.title);
                    console.log("url     : " + post.url);
                    console.log("description: " + post.excerpt);
                });
            }
        }
    });

This will then load the three blog posts and display them in the console window.  Please note I am using lodash to iterate through the posts.  You can find this at lodash

 

Photo Source: flickr

Close