Grow your CSS skills. Land your dream job.

Add Infinite Scroll to Custom WordPress Theme

  • Anonymous
    # December 13, 2012 at 2:57 am

    I put together the theme currently running on my website using the WordPress tutorial here on CSS-Tricks. I’d like to add infinite scroll and have the plugin installed but I’m not sure how to get it to work with the custom theme. I’m guessing I need to modify or add something to the loop part of the site. Hopefully someone here can help.

    http://aarongmoore.com/blog/

    http://wordpress.org/extend/plugins/infinite-scroll/

    Anonymous
    # December 14, 2012 at 2:56 pm

    Is this not actually possible then? I’ve spent hours searching the internet and all I seem to find is instructions on how to install a plugin or vague code snippets without detail on where to put them.

    # December 14, 2012 at 3:11 pm

    Infinite scroll on a blog is super easy. I’m not sure what you’re having difficulty with. What happens after you install the plugin?

    Anonymous
    # December 14, 2012 at 3:20 pm

    Thank you for replying!!!

    Nothing happens. I think I’m stuck because I don’t understand what the options are asking for. (Image here: http://imgur.com/EZYMx&lIfrN)

    Specifically where it asks for the page navigation and next link selector. I’m sure something in index.php needs to be changed but I can’t figure out what. I’m currently using the _WP Page Numbers_ plugin for pagination, I want to change that to use the _Infinite Scroll_ plugin. Here is the blog I’m trying to get this to work with: http://www.aarongmoore.com/blog

    Here is the code that is in my index.php right now:

    < ?php if (have_posts()) : ?>
    < ?php while (have_posts()) : the_post(); ?>
    < ?php the_date('l, jS F, Y', '

    ‘, ‘‘); ?>

    “>< ?php the_title(); ?>

    Posted by < ?php the_author() ?> at < ?php the_time('g:i A') ?>

    < ?php the_content(); ?>

    < ?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>

    < ?php the_tags( 'Tags: ', ', ', '.' ); ?>

    < ?php endwhile; ?>

    < ?php if ( $wp_query->max_num_pages > 1 ) : ?>

    < ?php endif; ?>

    < ?php else : ?>
    < ?php endif; ?>

    # December 14, 2012 at 3:28 pm

    Infinite Scroll needs to know where it is going to pull the next bit of data from. That’s pretty simple as long as you have control over how the pagination gets spit out. In your case, you’re using wp_page_numbers to output the pagination, this might make it difficult to target the ‘next page’.

    You might need to use this function instead: http://codex.wordpress.org/Function_Reference/paginate_links

    It might give you a class that you can hook into for the next page. You’ve already got `#content` in there correctly, but you’ll want to change the Navigation Selector to `.pagination`.

    Anonymous
    # December 14, 2012 at 5:17 pm

    I don’t understand what this:

    > You might need to use this function instead: http://codex.wordpress.org/Function_Reference/paginate_links

    The _infinite scroll_ seems to ask for a link in the index.php code but I thought that link was created using php in wordpress. Do I need to add a link or a div around some part of the index.php code?

    What do I put in for the “next selector” in that options page? I’m presuming I need to change something in index.php but I still don’t understand what that is.

    Anonymous
    # December 17, 2012 at 11:37 am

    I’m still not sure what to put in where _infinite scroll_ asks for a link to the next post that it calls a “next selector” link. Where would I find that in the index.php code?

    Anonymous
    # December 19, 2012 at 3:07 pm

    Does anyone know what to put in the “next selector” section to get _infinite scroll_ to work? Do I need to change something in the index.php file code?

    # December 19, 2012 at 3:16 pm

    You need to change the type of pagination that you are using so that you can clearly target the page 2 link.

    Anonymous
    # December 19, 2012 at 10:55 pm

    I thought I’d need to change the type of pagination but I’m not sure what to change it too. I’ve searched online and none of the articles about _infinity scroll_ explain how to set up the required pagination. I’m hoping someone here will be able to tell me what to do.

    Anonymous
    # December 20, 2012 at 9:32 pm

    I may have finally gotten _Infinity Scroll_ to work. Now I’m trying to figure out how to get the loading image to be in the center rather than being on the left.

    # December 21, 2012 at 12:06 am

    Yay! Sorry I couldn’t delve into it deeper, only have so much time while working to hop onto the forum.

    Anonymous
    # December 21, 2012 at 8:10 pm

    @TheDoc no worries, appreciated the help.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".