I had an agency contact me last week about how to customize the MapSVG WordPress Plugin. I had never heard of the plugin and wasn’t really sure what they meant at first. However, after going through it with the client and taking a look at the base plugin, I was confident there was no reason to think it couldn’t be done.

Why Customize the MapSVG WordPress Plugin?

Essentially, the agency needed to have the ability to query the WordPress posts for a custom taxonomy they put in place. They wanted to categorize posts by the county in Minnesota to which they pertained. As the plugin comes, they have no way to move past the handlebars templates that query their proprietary database.

The Process of Customizing the MapSVG Popover

The First Method

In order to not make it look blank before our results pulled up, I placed ‘Loading…’ in the MapSVG plugin’s template since that would be the first thing pulled into the page. Then, I created an object-oriented PHP script that did the WordPress query looking for the custom taxonomy the client had in place already.

Now that we have a way to see the articles we need, I created a jQuery script that:

  • listens for a click on any of the paths in the map,
  • does an Ajax call to the PHP script, and
  • replaces the ‘Loading…’ text with either a list of articles or a message saying none were found.

Customizing the MapSVG Plugin | Custom WordPress Plugin

The Second Method

At this point of trying to customize the MapSVG WordPress plugin, it totally worked. Exactly like I’d planned it, even (which almost never happens). But…

It was a little slow to update the text on mobile. This is never good. It’s especially not good since the search engines are making the push for mobile user experiences to be better.

While I doubt the Googles of the world would mimic a `touchstart` action on a path they don’t know has a need for it. Obviously, they can check for event listeners and things, but I’m not sure they do.

Anyways, I needed to make this faster. So instead of it doing an Ajax call to a PHP script every time there’s a click, I do one call when the page loads and load that into a JS variable.

However, this still wasn’t as fast as it could be.

Custom WordPress Plugin

The Final Method

So the final method to customize the MapSVG WordPress plugin took the time from the authors whenever they create, save, or delete a post instead of the end-user when making a call. When an author performs any of those three actions, it runs the query and creates the JSON file for the plugin to use.

Using this method, the custom WordPress plugin I built is only loading a JSON file and putting that data into a variable to look through. Because it’s doing this rather than making any calls when the user clicks a button, it was much faster.

The end result: a popover that shows the articles for the proper county quickly.

Need Your Own Custom WordPress Plugin?

If you need help creating your own solution to an interesting problem and want to try out a custom WordPress plugin, get in touch and we’ll chat.