- Vue
- WordPress REST API
- PHP
- Sass
During the initial website creation by Soak Digital for Business Focus Magazine, they required a post filter section that didn’t use WordPress’ built-in archive. The client preferred that the url remain unaffected by post queries and they wanted a loading animation rather than a page load if possible.
This was the first project that I had used Vue on. Previously, I’d only gone through about an hour or two of tutorials on the basics. This task was handed to me with a day and a half to get it functioning, tested and handed over to the client for them to look over just before the launch of the website.
As time was a big factor in getting it together, I searched for any NPM packages that could help me along the way. In the end, I found a loading spinner module that worked wonders called Vue Loading Overlay. There was also a good pagination module specifically for Vue called Vuejs Paginate. Both of these allowed me to focus more on getting the actual post queries working as expected alongside the filters.
The biggest challenge was getting the custom fields available to the WordPress REST API, so that we could generate new AJAX requests based on the filters applied rather than loading everything in from the outset (which, with the number of posts available would have been a heavy operation).
After a little bit of research, it turns out WordPress makes it relatively easy to get hold of custom fields for a post as long as you use the rest_api_init action hook in your functions file. Jobs a good’un.
With a couple of simple dropdowns, populated by categories used in the custom fields, it was then just a case of using the AJAX-returned JSON whenever a request was made (triggered by changing the filters or using the page navigation).
The styling remained the same as was designed and built previous to this, so it was a case of reusing them alongside the Masonry scripts used on posts elsewhere on the site.
The images and posts shown in the images are property of Business Focus Magazine and the design and other webwork was done by Soak Digital.
Back to Work