Toolset Views – “Load more” functionality

Toolset Views is a great plugin to display whatever you might think of. I’ve worked with the plugin for quite a while and a lacking feature is the ability to append, or paginate, data to the current view with the click of a button, much like the often and very used “Load more” button you can find around the web.

Today I decided that enough is enough. Reading more than 7 posts requesting this functionality, stretching as far back as to 2014 and with no date for this feature to appear, I started looking into the actual code that paginates the views.

For the project I’m currently working on I’m not in need of the fade effect for anything and since it’s the default for all pagination I’m hacking into that part. Line 1334 of wpv-pagination-embedded.js starts of the function self.pagination_effects which includes the fade function at line 1730.

This is a very quick and hack version but to get the Load More functionality up and running you can simply do this:

line 1752 – change the css from absolute to relative.
line 1762 – comment out – removing the fadeOut function
line 1763 – remove .remove() at the end of the line
line 1773 – comment out
line 1775 – remove .hide()

You can now insert a “Next” button or “Load More” with the Next pagination functionality into your filter like and that should do it:

[wpv-filter-start hide=”false”][wpv-filter-controls][wpv-pagination][wpv-pager-next-page]<div class=”button-white”>Load more</div>[/wpv-pager-next-page][/wpv-pagination][/wpv-filter-controls][wpv-filter-end]

As stated earlier, this is a very hacky solution. It’s really ugly and I don’t suggest using it in the long term. What is needed is a true option to append data but for now, this will do, at least for me.