WordPress Wednesdays: Make infinite scrolling finite on WordPress.com

Geek Factor: 4

Typically on WordPress Wednesdays we focus on the self-hosted version of WordPress available at WordPress.org, but this week the topic is a new feature that’s been rolled out on the hosted WordPress.com blogs.

Recently WordPress.com added infinite scrolling on many of their themes, including Twenty Ten, Twenty Eleven, Coraline and MistyLook; the plan is to eventually add infinite scrolling to all themes available at WordPress.com.

For folks who are using a theme with footer widgets (Twenty Ten, Twenty Eleven and Coraline), it’s possible to ‘turn off’ the infinite scrolling as long as you’re using the footer widget space. For themes like MistyLook (and future themes that also don’t have footer widgets), the setting is not available.

At Stem, we work with one client — Mediate BC — who use WordPress.com to host their blog, Distance Mediation. They use a modified version of the MistyLook theme on the blog, and since infinite scrolling not only was an unwanted feature, but also ‘broke’ the site’s footer, it was necessary to track down a work-around.

Thankfully, the general outcry in the WordPress.com forums lead me to some helpful CSS tweaks to add to the theme; unfortunately, this fix requires the Custom Design upgrade, which means users have to pay to be able to hack away a feature they would otherwise be forced to use.

From a great thread on the WordPress.com Support forums, I was able to put together the following CSS fix:

[css]
.infinite-wrap {
display: none;
}

.posts-nav-link {
display: block !important;
visibility: visible !important;
}
[/css]

I also needed to ‘undo’ some of the styling that was added to the #footer element with the infinite scrolling. Depending on the customization you’ve already rolled out on your blog, it may be necessary to use more styles to override what’s been added with infinite scrolling:

[css]
.infinite-scroll.neverending #footer {
position:relative !important;
bottom:auto !important;
left:auto !important;
}
[/css]

Last but not least, I tried to hide the ‘loading’ animation that was still appearing at the bottom of the screen. My success with this has been mixed — a gap is still appearing at the bottom of the page, but the loader is not:

[css]
body #content #content-main .infinite-wrap,
body #content #content-main .infinite-loader {
display:block !important;
position:absolute !important;
left:-999999em !important;
height:0 !important;
overflow:hidden !important;
border:0 !important;
border-radius:0 !important;
margin:0 !important;
padding:0 !important;
}
[/css]

It’s neat that WordPress wanted to roll out this new feature to their users, but at the same time, I found it annoying that they didn’t give users ability to opt out. This is even more annoying in cases where users have paid for the ability to edit the CSS files for their theme — they are basically paying for the right to customize their template, but in the end, the template can still be changed on them.

What is your opinion about the addition of infinite scrolling to the WordPress.com themes? Share your thoughts in the comments below!

Leave a Comment

Note: Fields marked with a * are required; email addresses are not published.

Legal FAQ Collections