Load more activities on scroll

Modify your buddypress theme to load more activity posts when user scrolls down!
All you need to do is to add the following javascript in any of your javascript files (and make sure that javascript file is included! lol). The script loads more content by ajax and appends at the bottom of the page. The server side code to process the ajax request is already there in buddypress. God bless those guys at automattic!

That’s it here.

Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

8 thoughts on “Load more activities on scroll”

  1. Hi,
    Thanks for the great tutorial as usual, i put the code in _inc of my theme and name it load-more.js
    but nothing happen when scroll down to bottom.  am i doing something wrong.
    Regards

    1. Have you cross-checked that the new file you created ‘load-more.js’ is INCLUDED on the page? you can do a ‘view-source’ in browser and do a search (Cntrl+F ) for ‘load-more.js’. If you dont find it, then enqueue the script file in functions.php. Or, if all that is too overwhelming is for you 😉 just paste the code inside ‘global.js’ file under ‘_inc’ folder (I assume you are using bp-default theme).

  2. add_action('wp_print_scripts', 'my_loadmore_custom');
    function  my_loadmore_custom(){
        if(!is_user_logged_in())
            return ;//we do not want to include the js
    wp_enqueue_script("seemore", get_stylesheet_directory_uri()."/_inc/seemore.js",array('jquery'));
    }
    

    Hi i just got this script working by using the above enqueue code.  i am still testing it though, if there is any problem i will let you know.

    Regards

  3. Hi, I added the code to a separate js. I added it to the head of my site. It shows up in my code when I load the page but nothing happens. Its not doing anything. Please, advice.
    Thanks.

    1. Hi Leonardo,
      sorry for replying so late!! Coming to the problem:
      1) the script relies on the template structure, it hooks into this selector #content li.load-more. So you must have the load more button inside a <li> element with class ‘load-more’.
      Further this should be inside a div with id ‘content’. This is according to the ‘bp-default’ theme. If your theme has a different markup, you need to modify the script accordingly.

      2) If the above is not the issue/taken care of, and the script still doesn’t work, there must be some javascript conflict/collision/error, which, i am afraid, can’t tell you without seeing the website.

  4. Thanks for this. It seems to be working well. The only other troubleshooting tip I wanted to offer was that you never mentioned making sure your site was linked into jquery. If you’re not already using jQuery throughout your site, this code will not work.

    First, copy the code from the top of this tutorial into your “loadmore.js” file.

    Add this script to your “header.php” file:

    Add this as well, but change the path to the “loadmore.js” file to suit your needs:
    <script src="/library/js/loadmore.js”>

    Thanks again for the script!

Leave a Reply

Your email address will not be published. Required fields are marked *