While running maintenance, I sometimes find that a plugin on a client’s site has been abandoned or removed from the WordPress repository. In those cases, the best thing to do is to find a replacement for that plugin. Otherwise, the longer out of date the plugin gets, the greater chance of introducing security or compatibility issues on the site.

In some cases, though, clients don’t just want a replacement. They want that part of the site to do something new.

The Puzzle

A client had been using the Genesis Featured Widget Amplified plugin in order to have a posts grid on their homepage, but the plugin was eventually abandoned. When I let the client know about the situation, they informed me that they also wanted site visitors to be able to click a button to load more posts in that grid.

To that end, I found a new plugin, Ajax Load More, that would make both the grid and the load more button. But how to make the grid match the original design?

Assembling the Pieces

Ajax Load More is a powerful plugin that cam make just about any type of posts grid you want, but there are a few pieces that needed to be in place to make the result look the way my client wanted.

First of all, I set up the repeater templates to show only the featured image and header for each post. Then, I looked through the examples on the plugin website to put together the shortcode that would put the items together in the grid I wanted.

This only put together the bare bones of the grid, however. To finish it up, it needed some style.

To prep, I took a screenshot of the original look of the homepage. With that reference in front of me, and the examples page to pull ideas from, I added in some custom CSS to the site. This CSS made sure the grid was spaced in a way that it looked good, the featured images were rounded correctly, and the posts didn’t get bumped down a line or otherwise put out of alignment if a title was longer than usual. It also made sure the font and colour of the post titles matched the font and colour the original plugin had used.

Once I’d tested several times to make sure the posts grid loaded more rows correctly and everything looked the way it was supposed to, I deleted the old plugin and took the changes live!

The Final Result

What started with a simple need to replace an abandoned plugin turned into adding fun new functionality to the client’s homepage.

To any site visitors, the only change they would have noticed was the new button that would load more posts once clicked. Behind the scenes, though, the way that section of the homepage worked had been completely revamped.

Which is exactly what you want. When tech works well, it stays behind the scenes, letting what you’re accomplishing with it to shine all the brighter.

Facebook
Twitter
LinkedIn

Contact Us