Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
    
definatly useful rarst, didn`t know that. I`ll be taking a look to improve the code. If you have any suggestions please post it hehe –  Vitor Argos Apr 4 '11 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 '11 at 15:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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