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.

Well as you can see here im doing a load by category in every tab i have and show a total posts of 10 by each tab i want to setup once the 10 posts are done.

i want to add a load more button to the bottom of the 10 posts i have done that but the viewer has to see the rest of the posts else where for a specific category so i want to show more posts by that category by staying in that same page loading more posts in that tab.

this is what i do to display each tab by category & by total posts

 <?php
 $rightbox = get_posts('&cat=8&showposts=10');
 foreach($rightbox as $post) :
    setup_postdata($post); ?>

i hope someone can help me out Here's the entire code from a tab http://pastie.org/7731669 thanks

share|improve this question

1 Answer 1

up vote 1 down vote accepted

You will need to load the next 10 posts with an AJAX request and keep the current offset stored in the DOM.

Attach an ID to the <span> element which is your button, in my example I have used #load_posts.

Then using jQuery, you can easily setup the click event for the button to fire the AJAX request.

So the button:

   <span class="ar-bottom-link-tabs" id="load_posts">
        <span>
            <a href="#">Load more &raquo;</a>
        </span>
   </span>

And then add the jQuery underneath outside of the loop:

<script type="text/javascript">

    // We have already loaded 10 posts, so set it up as 10 by default
    var currentOffset = 10;
    var categoryId = 8;

    $('#load_posts').bind('click', function(e){

        // Stop the link reloading the page 
        e.preventDefault();

        // Asign variables to an array
        var data = {
            offset: currentOffset,
            catid: categoryId
        };

        // AJAX $_POST request to PHP file
        $.post('path_to_php_file.php', data, function(response) {

            // do something with the response... loop through and append to the tab content
            // so you could return the output as JSON

            // Add 10 to the offset
            currentOffset+10;

        });         

    });

</script>

Then in the PHP file used for the AJAX request just repeat your get_posts() call:

$args = array(
    'cat' => $_REQUEST['catid'],
    'offset' => $_REQUEST['offset'],
    'showposts' => 10
);

$posts = get_posts($args);

I will let you fill in the gaps but this should send you on your way in the right direction.

share|improve this answer
    
ok how can i do that? can you provide some info or tweak my code.? –  DeadArtcore Apr 28 '13 at 15:52
    
Please see my amended answer. –  Nathan Fitzgerald - Fitzgenius Apr 28 '13 at 16:54
    
okay well one question on the path_to_php_file.php what would go there?.. im kinda lost i have like 5 tabs i need to do this for all of them correct? –  DeadArtcore Apr 28 '13 at 18:06
    
It would be the PHP script that the AJAX request is calling.. So you would put your get_posts() function call in there with the $_REQUEST variables to pick up the parameters from the AJAX request. Just like posting a form using $_POST or $_GET –  Nathan Fitzgerald - Fitzgenius Apr 28 '13 at 19:18
    
sorry to disturb you but i cant seem to get it to work? i added everything above here what i did here's the source code can you please take a look and help me thanks for your time pastie.org/7908328 –  DeadArtcore May 14 '13 at 19:45

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.