1

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.

2
  • Did(do) you have a question somewhere in there?
    – t31os
    Apr 5, 2011 at 15:20
  • This code does not work. Where is the function my_get_posts($start, $desired_posts) declared?
    – Ben
    Jul 22, 2011 at 11:51

1 Answer 1

3

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.

2
  • definatly useful rarst, didnt know that. Ill be taking a look to improve the code. If you have any suggestions please post it hehe Apr 4, 2011 at 10:47
  • @Vitor Argos I am not very good with JS and your code is mostly that, so that is about limit of what I can advise. :) Codex is definitely a good start, Ajax implementation in WP is very WP-specific, but allows to integrate is almost seamlessly with PHP code.
    – Rarst
    Apr 4, 2011 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.