Would you like to add infinite scrolling on WordPress and Squarespace infinite scroll and other plugin?
Is there anything more addicting than Facebook’s news feed? I mean, I’m sitting here writing this tutorial, but this addicting feature just keeps scrolling… again… and again.
This is a feature that Facebook uses, which is called ” infinite scroll ” or ” endless scroll” , for the news feed. Rather than having to click a button or ” Next ” or ” Read More “, the content keeps loading as you scroll down the page.
And guess what? You can achieve the same effect on your WordPress blog by adding infinite scrolling.
In this tutorial, I’m going to discuss some of the pros and cons of infinite scrolling and then I’ll show you how to set up infinite scrolling on your WordPress blog.
Benefits of infinite scrolling
Many big brands have experimented with infinite scrolling, which gives us the advantage of being able to examine their data. Here are some of the benefits that have been experienced by social networks:
- More Views – NBC News found that landline users visited 20% more pages per visit with infinite scrolling. Likewise, ” Times ” also found that 21% of its users opted to continue content with infinite scrolling.
- Very Low Bounce Rate – “ Times ” also reduced their bounce rate by 15% when they switched to infinite scrolling.
- Improved User Experience – With this everyone agrees. Some experts have said that ” infinite scrolling ” boosts UX by providing users with exposure of the content, forcing users to click less, and while generally providing a better mobile experience.
I can’t say for sure that you will get the same results as these top brands, but if you have a lot of blog posts, scrolling will definitely be a good option.
Most social networks rely on infinite scrolling for these same reasons.
Cons with infinite scrolling
Everything is not always rosy with the infinite scrolling. There are definitely a few potential negatives you should consider:
- No footer – you lose on your footer when you opt for infinite scrolling. It will be a big handicap if you want to offer more information in the footer. For example, if you’re using your footer to display affiliate information, you’ll need to find a new way to display that information.
- Bouncing scroll bar results in a bad experience – Because the website is always loading, there is a good chance that the length of the loading bars will change, which can cause you to lose track of the reading, resulting in a bad reading at the same time. user experience.
- No sense of “completion” – This is not innuendo. Nielsen researchers have found that users feel completion when they reach the end of a page. Infinite scrolling makes this impossible.
Also, in the “Benefits” section, the infinite scrolling is good when you have a lot of equally important blog posts. Well, the opposite is also true:
How to add infinite scrolling in WordPress
To add infinite scrolling on WordPress, you can use a free plugin named ” Ajax Loader More “. This plugin has tons of premium extensions that can boost its functionality, but the free version should be enough to just add infinite scrolling to your website.
The basic plugin works by generating a shortcode that you add to a page. This page then displays your blog posts in an infinite scroll. There are a few other small steps, which you will also need to complete along the way. Here’s how to put it all together:
Plugin installation and configuration
You can find “ Ajax Loader More ” on the WordPress plugin directory. Install and activate the plugin as you would any other plugin.
Once it’s activated, you will see a brand new “ Ajax Load More ” option . Go to ” Ajax Load More> → Repeater Template ” to create your template.
” Your Template > Repeater ” is the template that defines how articles should display in infinite scrolling. You can change it, but you need to know a bit of PHP. However, the default template should be fine for most users:
The only important thing to note is that the default “Repeater” template will only show article excerpts, not full articles. If you want to display full articles, you must replace ” the_excerpt () ” with ” the_content () “.
If you are familiar with PHP, you will be able to further customize this template. Otherwise, it’s fine to leave the default “ Repeater ” template .
There is a lot of stuff you can configure here. You have the option to change what will show in the infinite scroll and how it will all behave.
I can’t cite all of the possibilities in this article, but here are some of the boxes you’ll definitely want to fill out:
- post_type – The default is to include only articles. But you can also include custom pages or post formats.
- category – You can include only certain categories, or you cannot exclude certain categories.
- author – This is a cool feature where you can add infinite scrolling for a specific author.
- posts_per_page – Set the number of posts that ” Ajax Loader More ” should load each time it refreshes.
- pause – This is certainly an important point. For true infinite scrolling, you should set it to “false” here. Otherwise, users will have to click to bring up the other articles.
- scroll – The important thing is that you enable this feature so that articles will automatically load as users scroll down the page.
Once you’ve configured everything, copy the shortcode to the right side of the page:
All you need to do is add this shortcode to the page where you want your infinite scroll to appear. For example, you can add it to a page called “ Blog ” to make it your default blog page.
Read more on website maintenance
How it squarespace infinite scroll works?
- Infinite Scroll is only available in Blog Pages in the templates listed above.
- If enabled, Infinite Scroll applies to all Blog Pages on a site. It can’t be set per individual Blog Page.
- Infinite Scroll automatically loads posts as visitors scroll down the page.
- Infinite Scroll will continue loading content until all of the page’s content is on the page.
- If a visitor scrolls quickly or is on a slower connection, there may be a slight delay in load time.
How to enable infinite scroll in Squarespace?
To enable Squarespace Infinite Scroll, open a Blog Page on your site. Go to the Home Menu, click Design, and then click Site Styles.
- Farro family – Scroll to the Blog List: Load section and choose Method: Infinite Scroll.
- Skye family – Scroll to the Blog Grid Options section and check Infinite Scroll.
When you’ve finished, click Save.
How to disable Squarespace infinite scroll?
- Farro family – In the Blog List: Load section of Site Styles, choose Method: Button.
- Skye family – In the Blog Grid Options section of Site Styles, uncheck Infinite Scroll
When visitors scroll to the end of the loaded content, they can click Load More to view the next set of blog posts.
Feel free to comment down below 🙂
Also read: Squarespace alternatives