Callback Code for Infinite Scroll Plugin on WordPress WordPress
- SOLVED
Hello,
I'm using a Child Theme with the Infinite-Scroll plugin for Wordpress: http://wordpress.org/extend/plugins/infinite-scroll/ Here are my selector settings for the plugin: http://i.imgur.com/XdjwRvF.png
My problem is that when the new posts load, they do not apply the masonry layout of my homepage. I believe my theme uses the isotope.js plugin to manage the positioning of posts.
What I would like to happen: http://i.imgur.com/dOsBF8k.jpg
What is happening after infinite scroll: http://i.imgur.com/VpyjcVv.jpg
I believe this problem may be solved by adding custom javascript code in the Callback section of the Infinite-Scroll plugin, that would re-layout and/or sort the posts after they load. So far all my attempts have failed.
Any help would be appreciated!
Answers (1)
Plugarized answers:
Use the reLayout method to arrange item after a new ones are added.
Please have a look here http://isotope.metafizzy.co/demos/relayout.html
Or try adding the javascript code manually in the body;
<script>
$(function(){
var $container = $('.portfolio-page-content');
$container.isotope({
itemSelector : '.portfolio-posts'
});
$container.infinitescroll({
navSelector : '.posts-nav', // selector for the paged navigation
nextSelector : '.posts-nav.prev-posts a', // selector for the NEXT link (to page 2)
itemSelector : '.portfolio-posts, // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
});
</script>
According to isotope, they use appended method to make it work with infinite scroll. try the code above in the body
compnerd comments:
I've tried doing that, but all my attempts have not worked. I believe I need to customize the callback code to work with my specific theme. Can you provide me with some code to try?
Plugarized comments:
I've added the code above
Plugarized comments:
Sorry i missed a
itemSelector : '.portfolio-posts, add the '
like
itemSelector : '.portfolio-posts',
compnerd comments:
I've tried your code, but it's not working. I'm also getting the following error in the Chrome console: Uncaught SyntaxError: Unexpected identifier
for the following line: itemSelector : '.portfolio-posts, // selector for all items you'll retrieve
compnerd comments:
Okay, added the missing part that you suggested, and now the console is saying: Uncaught TypeError: Property '$' of object [object Window] is not a function
for the line: $(function(){
Plugarized comments:
change it to
jQuery(document).ready(function($) {
Plugarized comments:
clear the cache on the home page, i cant see the changes for the single quote edit
compnerd comments:
cache is cleared. no console errors, but the layout of the the theme is all messed up. Any other suggestions?
Plugarized comments:
Hey for the instead of .hentry for the item selector for both
Plugarized comments:
What i meant is that the items have the class .hentry not .portfolio-posts so replace both instances
Plugarized comments:
If youd like to me to try, pm me your ftp and wordpress credentials
Cheers
compnerd comments:
Tried .hentry class, still not working. .hentry works for regular blog post, but not for the portfolio posts on my homepage.
compnerd comments:
I'd like to try to take care of this issue without giving out my FTP or WordPress credentials at this time. If I'm still not able to figure it out, I may consider it. Thanks for your time.
Plugarized comments:
Hey I think we are using the wrong container. the one that holds all the items. now you seem to be using portfolio-page-content and this container seems to hold also the filtering buttons, so we only need the container that holds the items.
Try the following
<script type="text/javascript">
jQuery(document).ready(function($) {
var $container = $('.portfolio-posts');
$container.isotope({
itemSelector : '.hentry'
});
$container.infinitescroll({
navSelector : '.posts-nav', // selector for the paged navigation
nextSelector : '.posts-nav .prev-posts a', // selector for the NEXT link (to page 2)
itemSelector : '.hentry', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
});
</script>
Plugarized comments:
The other option would be to manually implement infinite scroll without the plugin, maybe the javascript and the plugin are interfering since you still got the options unchanged on the plugin side.
I can manually implement it since is kinda long writing it all here.
Plugarized comments:
Ok here is the guide from an online source. First delete the infinite scroll plugin
Now download the infinite scroll js file from the official source (https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js) and save it inside your theme/js/ folder
IN your theme's functions.php lets register and enqueue the file manually save it and upload it
/**
* infinite-scroll
*/
function infinite-scroll-js(){
wp_register_script( 'infinite_scroll', get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'),null,true );
wp_enqueue_script('infinite_scroll');
}
add_action('wp_enqueue_scripts', 'infinite-scroll-js');
And now paste the previous code with the selectors to the index, clear cache and test again
Plugarized comments:
Otherwise here is a guide on how to do it and some tips http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/
Plugarized comments:
The code you getting Uncaught TypeError: Object [object Object] has no method 'infinitescroll' means that it the js file is not being loaded.
Save it to http://menshion.com/wp-content/themes/shots/js/jquery.infinitescroll.min.js
And the following should be in your functions.php found in "/themes/shots/functions.php"
/**
* infinite-scroll
*/
function infinite-scroll-js()
{
wp_register_script( 'infinite_scroll', get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'),null,true );
wp_enqueue_script('infinite_scroll');
}
add_action('wp_enqueue_scripts', 'infinite-scroll-js');
compnerd comments:
Hi LatinUnit,
I've tried the method from your link before. I was able to make infinite scrolling work, but I was still unable organize the posts. I really think this problem has to do with the Callback code or with the fact that I am using a Child Theme with a custom template as the homepage.
Plugarized comments:
Question resolved.
infinitescroll automatic http://www.screenr.com/R1D7
infinitescroll manual trigger http://www.screenr.com/tXD7