![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: infinite scroll
-
AuthorPosts
-
September 2, 2016 at 11:38 pm #681490
I had a client who wanted infinite scroll for the articles on their site. Found a few posts related to Enfold and infinite scroll but nothing that was a concrete answer for what I wanted to do — using the Avia Template Builder I created a section page (it’s for a magazine) that has a blog posts content block at the bottom. I wanted that block to scroll. Turned out to be fairly simple to implement, posting this here in case it helps others.
In your child theme’s — you are using one, right ;) — functions.php file add the following:
/** * Add infinite scroll to section pages like Eat / Drink * Uses https://github.com/pklauzinski/jscroll */ add_action( 'wp_enqueue_scripts', 'load_jscroll' ); function load_jscroll(){ wp_enqueue_script('jscroll', get_stylesheet_directory_uri().'/js/jquery.jscroll.min.js', array( 'jquery') ); } function infinite_scroll() { global $avia_config; echo '<script type="text/javascript"> jQuery( ".content" ).jscroll( { nextSelector: "span.current + a", contentSelector: ".article-grid", autoTrigger: true } ) </script>'; } add_action( 'wp_footer', 'infinite_scroll' );
On your page insert your blog posts element with pagination enabled. I gave mine a custom CSS class of article-grid to make it easy to target that portion of the page. In the code above you see the contentSelector parameter — that’s an optional parameter that lets you select only a portion of a page to be appended by infinite scroll. Since my page has lots of items at the top that I don’t want being reloaded as I scroll I use the custom css class to only grab the next batch of articles.
When you get to the last batch of articles you would normally see the pagination, which I didn’t want. A quick css rule takes care of that:
/** hide navigation since we're using jQuery infinite scroll */ nav.pagination{ display:none; }
This is a pretty bare bones example. I’m using infinite scroll everywhere so I didn’t limit this to specific pages or content types (which you could easily do by wrapping the infinite_scroll() function in some conditional checks. Ex: is_frontpage() if you only wanted this to apply to the homepage of your site.
You can grab the js file here: github link as well as see the other options available to you.
Hopefully that helps someone else get going. Works perfectly for our needs.
September 4, 2016 at 8:44 am #681756January 27, 2020 at 2:34 pm #1178706Thanks for sharing wunderdojo. I’ve tried to implement but I think Enfold has been updated to much since this answer. Should this work regardless of theme updates?
Thanks
RichardJanuary 27, 2020 at 8:09 pm #1178774I’m not sure. It’s still live on the site I did it for but I don’t know how current their version of Enfold is. It’s just javascript though so unless it’s causes an conflicts (check the Chrome dev console) it should still work.
January 27, 2020 at 9:54 pm #1178808Hey there, thanks for the quick reply and yes check the console and there was an error with the javascript for
.content
which is why I thought some theme changes had been made. Could too share the address for the site you added it too? Thanks.January 27, 2020 at 10:50 pm #1178818The .content() selector is just looking for a div with that class applied so it could be that the class names have changed and you’ll need to adjust. Here’s a link to it in use: https://ontaponline.com/music/
January 27, 2020 at 11:02 pm #1178824OK thanks. can’t see much difference but this line is being added to the template-page <div class=”scroll-inner”> which I assume is being applied by the script.
January 27, 2020 at 11:59 pm #1178838Correct, basically what it does is this: You have a block on your page where you’ve loaded say the five most recent blog posts:
<div id='latest-posts' class='content'> <div id='post-one'>... </div <div id='post-two'>... </div> .... <a href='link-to-next-posts'>Older Posts</a> </div>
So the javacript is fetching thet content from that next link and appending it to the containing div (#latest-posts). You need to make sure that you’re targeting an existing element on your page. For me there was a block with the class .content applied to it. On your page you’ll want to see what the parent element of the content you want to autoload is.
-
This reply was modified 4 years, 7 months ago by
wunderdojo.
January 28, 2020 at 11:30 am #1178957Thanks of that. I’ve had a look but my page is made more complex as i’m using the blog post grid option. I’ve tried to target the right element but it’s a bit out of my knowledge. Thanks for your help again.
January 29, 2020 at 2:27 am #1179255Hi,
@raslade: Is the site live? Please post the URL so that we can check it. Did you apply a custom CSS class attribute to the blog posts element as @wunderdojo suggested?// https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
IsmaelJanuary 29, 2020 at 10:07 am #1179334Hi Ismael, yes I tried the custom class but still getting a javascript error in the console. I’ve set the page currently to show all posts but can change back if you need to test?
Thanks
RichardJanuary 29, 2020 at 12:28 pm #1179382 -
This reply was modified 4 years, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.