If you are looking to infinitely load your blog posts or content elements on a WordPress website built with Oxygen, we wrote this blog post for you. If you've ever been on a major news website, you may have noticed that many implement this technique to get more pageviews and advertising revenue.

When the user is finished reading the first article, another one is automatically loaded below it. Typically, this article is related to the first one, resulting in lower balance rates, and more time spent on the website. Not only is this beneficial to the user, as they are recommended related content which is automatically loaded for them, the website benefits from the extended time spent on their content.

If you scroll to the bottom of this blog post, you will notice that another one is automatically loaded for you. Our website is built with Oxygen Builder, and we implemented this technique of infinitely loading a blog post on our site due to the benefits mentioned above. It's relatively simple to do, requires a single plugin that is incredibly well coded, and takes just a few minutes to implement.

The Plugin: Ajax Load More

To implement the single loading of individual posts on your WordPress website built with oxygen builder, we're going to need to pick up a free plugin and a paid add-on. The free plugin is called Ajax load more, and the paid add-on is called Single Posts Addon.

ALM is a well coded plugin that allows you to implement infinite loading of content, post types, and more on your WordPress website by using Ajax technology. Of course, you can code this yourself without the need for any plugin, and you can use a third party JavaScript library, but this plugin makes it much simpler and easier to implement.

This, paired with the single posts add-on, utilizes the built in WordPress functions of get last post and get next post , hooks into that, and then uses Ajax to render and display the content as the user scrolls to the bottom of the initial post. You can configure this to load a set number of posts and then destroy the function, or infinitely load posts until the user gets to the very first one.

Again, if you need an example of how this plugin looks and functions on the front end, just scroll down to the bottom of this blog post, and a new one will be loaded for you. We use this plugin on our Oxygen website to infinitely load content.

Install the plugin and the add-on, and then move on to the next section of this article which shows you how you can very simply and easily implement this on your website by just copying and pasting a couple lines of code and changing a div.

Implement Ajax Load More In An Oxygen Builder Website

Once the plugin is installed, navigate to your template that applies to your single post content.

Here’s ours:

Open it in the Oxygen Builder. Wrap all of the content (sections, divs, columns) in one main div, like so.

We will use this div to specify the content that will be infinitely loaded. Anything in this div will be loaded as the user scrolls down the page. That means that you should contain your blog post title, content, and featured image as a minimum.

Change the ID of this div to something recognizable. Ours is as follows:

Now, add a second div, below the first one. Make it 100% wide. This div will contain the code block that toggles that Ajax Load More plugin, and the posts following the initial on will be populated into it.

Add a code block to this div, and paste the following PHP code in:

<?php
// Ajax Load More shortcode
echo do_shortcode('

(add bracket) ajax_load_more single_post="true" single_post_id="'. get_the_ID() .'" single_post_target="#isotropicpostcontent" loading_style="infinite skype" post_type="post" pause_override="true" (add bracket)

');
?>Code language: HTML, XML (xml)

The shortcode is commented out. If it wasn't content would be infinitely loaded here. To add to your own site, add [] (and remove "add bracket") around the shortcode.

This uses the DO shortcode feature to call a shortcode after the next post id is populated. Simply copy and paste this into your code block, and change single_post_target="#isotropicpostcontent" to the id that you assigned to the div wrapping around your content.

Save the page, and your blog posts will now load infinitely. It's really that simple, and made much easier because oxygen builder allows you to create templates on the front end and populate them with PHP code. With a traditional WordPress website, utilizing templates within a theme, you would need to create a child theme, and then edit the Single.PHP file with similar code.

Conclusion

We hope that this article taught you how to infinitely load blog posts in a website built with Oxygen. This is really helpful if you're a content website and want to boost your metrics, make yourself more appealing to advertisers, or get more pageviews. You can easily configure this plugin to toggle a page view event when loading something new, and it's really expandable if you're looking to infinitely load other types of content on your website.

If you have any questions about adding this plugin to your website created in Oxygen Builder, reach out in the comments section below.