How to create a load more post entries like Twitter?

Question

Hey guys, last days i have been trying to figure out how to do that. As read on http://net.tutsplus.com/tutorials/javascript-ajax/create-a-twitter-like-load-more-widget/ but inside wordpress. And i have finally come with a solution, may not be the best one but i hope you guys can improve my code and post it here just like i`m doing. Feel free to use it wherever you want. (my coding skills are really bad so

First you need to include jquery on your header.

Insert this code on the page you wanna display the posts:

<?php
session_start();
$number_of_posts = 3;
if (!$_SESSION['posts_start']) { $_SESSION['posts_start'] = 0; }
$_SESSION['posts_start'] = $_SESSION['posts_start'] ? $_SESSION['posts_start'] : $number_of_posts;
$total_posts = wp_count_posts('post');
$total_posts = $total_posts->publish;
?>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var initialPosts = <?php echo my_get_posts(0, 5); ?>;
        var postHandler = function(postsJSON) {     
            jQuery.each(postsJSON,function(i,post) {
                // Salva as variáveis de cada post
                var postURL = post.permalink;
                var postCOMMENTS = post.comments;
                var postTITLE = post.title;
                var postDATE = post.date;
                var postAUTHOR = post.author;

                // Coloca as variáveis na lista                 
                jQuery(".lista-artigos")
                .append("<li><span class=\"comentarios-artigo\">" + postCOMMENTS + "</span><h2><a href=\"" + postURL +"\">" + postTITLE + "</a></h2><span class=\"data-artigo\">Postado em " + postDATE +  " por " + postAUTHOR + "</span></li>")
            }); 
        };

        postHandler(initialPosts);
        var totalposts = <?php echo $total_posts; ?>;
        var start = <?php echo $_SESSION['posts_start']; ?>;
        var desiredPosts = <?php echo $number_of_posts; ?>;
        jQuery('#load-more').click(function(){
            jQuery('#load-more').removeClass('carregar').addClass('ativado').text('Loading...');
            jQuery.ajax({
                url: 'http://yoursite/wp-content/themes/yourtheme/mais-posts.php',
                data: {
                    'start': start,
                    'desiredPosts': desiredPosts
                },
                type: 'get',
                dataType: 'json',
                cache: false,
                success: function(responseJSON) {
                    jQuery('#load-more').text('Load More');
                    start += desiredPosts;
                    postHandler(responseJSON);
                },
                error: function() {
                    jQuery('#load-more').text('Ops! Try Again.');
                },
                complete: function() {
                    jQuery('#load-more').removeClass('ativado').addClass('carregar');
                    if (totalposts <= start) { jQuery('#load-more').hide(); }
                }
            });
        });
    });
</script>

Create a php file inside your themes folder (mine is called mais-posts.php) with the following code:

<?php
    require( '../../../wp-load.php' );

    if(isset($_GET['start'])) {
        echo my_get_posts($_GET['start'], $_GET['desiredPosts']);
        $_SESSION['posts_start'] += $_GET['desiredPosts'];
        exit();
    }
?>

I hope it may help anyone who is looking for something like this.

So if you have any suggestion to this code please post below.

Answer 1

For starters see AJAX in Plugins. WordPress has own mechanism for processing Ajax request and that is what you should use over includging wp-load.php.