I need help with Infinite Scroll and my theme in WP WordPress
- SOLVED
For whatever reason the author of the theme has decided not to support his product and I think the documentation is out of date or maybe I just don't understand. Either way it makes no sense to me.
I am trying to follow these directions (pasted directly from the theme's web site):
<blockquote>How do I setup Infinite Scroll to work?
The WordPress plugin of Infinite Scroll does not work with Shaken Grid. You will need to manually add the Infinite Scroll script to this theme.
You will need to know the following CSS selectors:
Content selector: .sort
Post selector: .all
Navigation selector: .navigation
Previous posts selector: .nav-previous a
In the box next to “Javascript to be called after the next posts are fetched:” place the following code:
jQuery('.sort').isotope( 'appended', jQuery( arguments[0] ));
Lastly, make sure that you do not have pagination disabled. You may also want to add the following CSS code to a custom.css file in your theme folder:
#infscr-loading {
position: fixed;
bottom: 30px;
left: 42%;
z-index: 100;
background: white;
background: hsla( 0, 0%, 100%, 0.9 );
padding: 20px;
color: #222;
font-size: 15px;
font-weight: bold;
}
If you still have trouble getting Infinite Scroll to work with jQuery Isotope, you may want to view Isotope’s documentation.</blockquote>
However, I do not see an "Infinite Scroll Script" (only the plugin), have no idea where to install such a script, and have no idea how to deal with the CSS Selectors or where to post the code.
I basically need a step by step how-to so I can get this up and going.
Answers (1)
Christianto answers:
Hi,
Did you use shaken grid?
Could you give your website url.
You could check [[LINK href="http://wpquestions.com/question/show/id/7422"]]this questions[[/LINK]] or [[LINK href="http://wpquestions.com/question/show/id/3617"]]this questions[[/LINK]],
both are using shaken grid and I posted answer for both that make it work.
basically you need to add infinite scroll script and adding callback which contain isotope function to add new element.
If you didn't change isotope wrapper and item element ID/class, you can try to use the code directly.
Let me know if you have a problem
dannygriffin comments:
I don't know much about code so the answers didn't help me too much.
I don't understand "basically you need to add infinite scroll script and adding callback which contain isotope function to add new element. If you didn't change isotope wrapper and item element ID/class, you can try to use the code directly."
You've got to speak in much simpler terms. Such as "In Wordpress, click on themes, then editor", etc.
Here is my web site: http://www.califoto.com
dannygriffin comments:
To provide more information, I have been messing with it for two days now. I am actually using the plug-in (even though the documentation states not to do that) because I don't know what the "Infinite Scroll Script" is, where to find it, or how to install it.
I have the script working...sort of. The current problem is when the page loads if the user does not scroll down to load the additional images but instead chooses a different category using the FILTER button at the top of the page and then scrolls down the images from ALL categories appear. Try it and you'll see.
There might be other problems too. Still testing. I might need to not use the plug-in and use the script instead but I've gotten this far and would like to not have to start over if possible.
Christianto comments:
using plugin is ok,
the only think that need to be set is ID/class for each post element you need to load, next page, and content selector,
and set your callback which will append the element..
You've done it well..
<blockquote>I have the script working...sort of. The current problem is when the page loads if the user does not scroll down to load the additional images but instead chooses a different category using the FILTER button at the top of the page and then scrolls down the images from ALL categories appear. Try it and you'll see.</blockquote>
it happen because it grab what ever element on your next page, on the plugin setting set on "Next Selector" field,
which link to wordpress paged link:
http://califoto.com/?paged=x
for this we need to create function as callback that only grab item based on filtered content.
Christianto comments:
Please use this as callback on your infinite scroll plugin options page
var filter = jQuery('.sort').data('isotope').options.filter;
sorted = jQuery( arguments[0] ).find(filter);
jQuery('.sort').isotope( 'appended', sorted );
instead just:
jQuery('.sort').isotope( 'appended', jQuery( arguments[0] ));
dannygriffin comments:
OK, how do I do that? I have no idea.
dannygriffin comments:
That didn't work. If you go to my site and look you will see that it is now completely broken.
Christianto comments:
Could you [[LINK href="http://wpquestions.com/user/contact/id/3601"]]PM me[[/LINK]] temporary admin dashboard login so I could debug it?
dannygriffin comments:
PM sent.
dannygriffin comments:
Can you post what was done in the thread to both help other people and to help me in case I need to do it for another Wordpress installation or the current one if something happens? I have no idea how you made it work.
Also, I am still getting a few errors. If you go to the site and click on "Swimwear" in the filter, for example, only a few pictures are showing up until you scroll down. I have it set to display 20 pictures right away. It shows about 3 or 4 on my screen. You have to scroll for the rest to appear. Also, there is a button at the bottom that reads "older" that shouldn't be there since it isn't even clickable.