I get asked a lot how/what the selectors are in infinite-scroll and how to figure them out. So lets start from the beginning.. infinite-scroll uses jQuery selectors (which are based on CSS selectors) to find content and posts in order to load the content from the next page. Because web pages are different, we need to define ourselves what selectors infinite-scroll should use.
Infinite-Scroll uses four selectors, these are:
- nextSelector
- navSelector
- contentSelector
- itemSelector
It’s probably easiest if you check out my beautiful diagram below to see what they relate to:
And now finally we get to some code (its kind of unavoidable..), you need to look at your site. (easiest way is by going to the homepage, right click and choose view source).
We’re looking for something like this:
<div id="content"> <div class="post">This is my post 1, it has a lot of content in it about Bananas...</div> <div class="post">This is my post 2, it has a lot of content in it about Bananas...</div> <div class="post">This is my post 3, it has a lot of content in it about Bananas...</div> <div class="post">This is my post 4, it has a lot of content in it about Bananas...</div> </div> <div id="navigation"> <div class='next'> <a href='/page/2/'>Next Page</a> </div> </div>
In jQuery/CSS if we want to select something by its ID we use ‘#’, if we want to select something by its class we use ‘.’. And finally if we want to drill into something we leave a space… see my selectors below and hopefully you’ll get it! Selectors for above:
- nextSelector: #navigation .next a:first
- navSelector: #navigation
- contentSelector: #content
- itemSelector: #content .post
Hope you enjoyed reading my self-help guide on getting to know your selectors! If you need any help just leave a comment or (preferably) open a ticket in the wordpress forums or infinite-scroll site.
Related posts: