Infinite scroll in pure JavaScript for Ghost or WordPress blog

This blog used to be based on WordPress. Although there are loads of ready-to-use WordPress plugins I tried not to use them if something is relatively easy to implement. Why? Because WordPress plugins are the main source of security vulnerabilities. Above all, this goes for not very popular ones.

I migrated to Ghost and it seems that the mechanism that I had created previously still works. Although this article shows an example for WordPress, it should work fine on Ghost too.

Main concept

Here is the list of key features:

• It is written in pure JavaScript (no external dependencies).
• In order to load older posts, the user needs to click “Load more” button. Another option would be to load posts automatically if the user reaches the bottom of the page. I decided to use the button for this but feel free to adjust it to your needs.
• Under the hood, it replaces built-in navigation.
• CSS classes’ names of generated HTML markup are configurable. However, it’s your responsibility to create styles for that.
• Infinite scrolls works (or at least should work) on all WordPress pages like the main page, archives, search result and others.

The operating principle is quite simple. Both WordPress and Ghost provide a basic navigation mechanism with “Older posts” and “Newer posts” links. My script replaces navigation HTML with the “Load more” button. If the user clicks this button AJAX request for the next page is sent to the server. We take the URL of this request from the "Older posts" link before removing navigation from the DOM. The server returns HTML code for a page containing older posts. Then we crop out HTML elements, which means DIVs (of even better articles) with posts’ headers and texts, and put them to the current page. After that, we again convert navigation from returned page to the “Load more” button.

It may sound a little bit weird to expect HTML code when using AJAX. We could use also WordPress rest API to load posts. Unfortunately, it would require more effort and it is not doable with simple JavaScript code. This solution is sufficient for a simple blog and supports most scenarios out of the box.

Configuration

The script starts with configuration JSON. It lets us configure selectors of all HTML elements that are controlled by this mechanism. In addition to this, it’s possible to specify classes’ names for "load more section" elements, which are generated at runtime. You should adjust it to your website.

1var infiniteScrollConfig = {2    /* selectors */3    articlesContainerId: 'br-articles-container',4    articleSelector: '#br-articles-container article',5    navigationSelector: '.br-common-navigation',6    nextPageLinkSelector: '.nav-previous > a',7
8    /* custom classes */9    loadMoreContainerClass: 'br-load-more',10    buttonClass: 'br-load-more__button',11    loaderClass: 'br-load-more__loader',12    errorInfoClass: 'br-load-more__error',13
14    /* texts */15    buttonText: 'Load more',16    errorInfoText: 'Something went wrong! Please reload the page.',17};18...

This configuration is later passed together with document to IIFE on the bottom of the script.

1...2        }3    }4}(document, infiniteScrollConfig));

Let me also explain in brief the purpose of the needed selectors.

• articlesContainerId is an id of an element that contains all articles (posts). This is typically main or div element. In my case it looks like this:

  

• articleSelector as the name says is a selector of elements that contain bodies of articles. It typically contains the post’s header, metadata, and first paragraph or information about what is it about. These elements are usually direct children of containers element.
• navigationSelector is a selector of WordPress navigation. It’s usually nav HTML element that contains "Older posts" and "Newer posts" links.

  

• nextPageLinkSelector specifies anchor element with "Older posts" link.

Helper classes and functions

Subsequently, there is a beginning of IIFE. We’ve got some classes and functions that are later used in the infinite scroll mechanism.

To clarify, “classes” mean function constructors that are wrappers for HTML elements generated at runtime. LoadMoreContainer is a parent element for “Load more” button. It may also contain a loader if the request is in progress, or error message if occurred.

1...2(function(document, config) {3    function LoadMoreContainer(handleLoadMore) {4        var element = document.createElement('div');5        element.classList.add(config.loadMoreContainerClass);6
7        var button = new Button(handleLoadMore);8        element.appendChild(button.htmlElement);9
10        this.setLoading = function() {11            element.innerHTML = '';12            var loader = new Loader();13            element.appendChild(loader.htmlElement);14        }15
16        this.setError = function() {17            element.innerHTML = '';18            var errorInfo = new ErrorInfo();19            element.appendChild(errorInfo.htmlElement);20        }21
22        this.remove = function() {23            element.parentElement.removeChild(element);24        }25
26        this.htmlElement = element;27
28        function Button(clickHandler) {29            var btn = document.createElement('button');30            btn.classList.add(config.buttonClass);31            btn.textContent = config.buttonText;32            btn.addEventListener('click', clickHandler, false);33            this.htmlElement = btn;34        }35
36        function Loader() {37            var loader = document.createElement('div');38            loader.classList.add(config.loaderClass);39            loader.setAttribute('aria-busy', 'true');40            loader.setAttribute('role', 'alert');41            this.htmlElement = loader;42        }43
44
45        function ErrorInfo() {46            var errorSpan = document.createElement('span');47            errorSpan.classList.add(config.errorInfoClass);48            errorSpan.textContent = config.errorInfoText;49            this.htmlElement = errorSpan;50        }51    }52    ...

There are also some helper functions that return the navigation elements or URL for the next page.

1function getNavigation(htmlElement) {2    if (!htmlElement) {3        return null;4    }5
6    return htmlElement.querySelector(config.navigationSelector);7}8
9function getNavigationLink(htmlElement) {10    if (!htmlElement) {11        return null;12    }13
14    var navigationNextLink = htmlElement.querySelector(15        config.nextPageLinkSelector16    );17
18    if (navigationNextLink) {19        return navigationNextLink.getAttribute('href');20    }21
22    return null;23}

Infinite scroll mechanism

Then the most important code begins. We grab needed HTML elements like content and navigation. getNavigationLink function returns "Older posts" link URL that will be used later. If all required pieces of the puzzles are available we initialize infinite scroll.

First of all, built-in navigation is removed, and “Load more container” is rendered on the page. We pass click handler (handleLoadMore) to the created container (it’s used by a button). Then, when the user clicks the button we change its state to “loading” so Loader appears. The script invokes AJAX request using XMLHttpRequest. When request result is available we remove the current container, take new articles from response HTML, append them to the current page and initialize new “Load more container”. In case of an error, we create the Error element that contains a message specified in configuration JSON.

1var content = document.getElementById(config.articlesContainerId);2var navigation = getNavigation(content);3var nextUrl = getNavigationLink(navigation);4
5if (content && navigation && nextUrl) {6    navigation.parentElement.removeChild(navigation);7    appendLoadMoreContainer();8
9    function appendLoadMoreContainer() {10        var container = new LoadMoreContainer(handleLoadMore);11        content.appendChild(container.htmlElement);12
13        function handleLoadMore() {14            container.setLoading();15
16            var request = new XMLHttpRequest();17            request.onreadystatechange = function () {18                if (this.readyState === XMLHttpRequest.DONE) {19                    if (this.status >= 200 && this.status < 400) {20                        container.remove();21
22                        var responseHtml = document.createElement('html');23                        responseHtml.innerHTML = this.responseText;24
25                        var articles = responseHtml.querySelectorAll(26                            config.articleSelector27                        );28
29                        for (var i = 0; i < articles.length; i++) {30                            content.appendChild(articles[i]);31                        }32
33                        nextUrl = getNavigationLink(responseHtml);34
35                        if (nextUrl) {36                            appendLoadMoreContainer();37                        }38                    } else {39                        container.setError();40                    }41                }42            };43
44            request.open('GET', nextUrl, true);45            request.send();46        }47    }48}

Generated HTML markup

There are few states of “Load more container”. You should write your own CSS styles for each of them. Of course, class names (and texts) will be different according to your configuration.

1// Button visible2<div class="br-load-more">3    <button class="br-load-more__button">Load more</button>4</div>5
6// Request in progress (loader)7<div class="br-load-more">8    <div class="br-load-more__loader" aria-busy="true" role="alert"></div>9</div>10
11// Error12<div class="br-load-more">13    <span class="br-load-more__error">An error has occurred. Please reload the page.</span>14</div>

You can find the final script here.

Conclusion

This simple script can make WordPress or Ghost blog a little bit more convenient to use. It does not require any external libraries. As it comes to WordPress blog, besides the main page, it should handle (depending on your theme) other pages like search results, archives, tags, etc. However, it may require some more adjustments from your side.