I’m working on a WordPress site for a client who is interested in tracking and providing links to local government, demographic and economic data from outside sources. I want to show it as bits of data as JavaScript instead of on a usual WordPress post. Why, you ask? I’ll get into that more in a minute. Essentially, my installation has some custom fields that hold little chunks of data, like:
- Contact information and websites for government agencies
- Links to meeting agendas
- Demographic facts and figures about local communities
- Economic data
If we’re going to get ambitious then I might tap into the American Fact Finder API at the U.S. Census Bureau in order to get an accurate, third-party representation of the communities that this client serves.
This data of course may change periodically. Aha – here is why I am putting them on the web page as little discreet chunks of data. I could more easily put everything onto a regular WordPress post dedicated, for example, to one city. But then if I want consistency and uniformity – always a good think to protect a brand – then I will have to copy the same styling to every other post with information on other cities. And then what if I or someone else need to change it? Will an innocent user error break the whole styling? Will chaos and entropy creep in?
To solve this problem, we will future-proof the layout for post writers. Each piece of data, i.e. a local government website, will have it’s own custom field. Then that field will get popped onto the website and appear as a JavaScript object. Once it is there I can use one single JavaScript file to render and style it any way I want to, and anyone can change the data on the backend admin menu at any time without rewriting the whole post.
The WordPress plugin “Post Data to JavaScript” is available on my GitHub here. It is based on the fantastic WordPress Plugin Boilerplate. Because it is designed to interact with any post type including custom post types, it is very modular and has sample JavaScript files to experiment with.
How does it work?
Post Type to JavaScript (PDJ) finds custom fields in any post type, converts them into a JavaScript object and puts them on the DOM for any other JavaScript script, library or framework to use. The object lives on the global scope and is namespaced with the object name postData.
If compared to a REST API or something that allows full database functions via HTTP (create, read, update, delete), then PDJ may be considered similar to a GET function. If you are looking for a more comprehensive API for fully interacting with the database, then this plugin is not for you. Try WP-API instead, or wait until it gets fully integrated into WordPress core.
PDJ is best for a quick and low-maintenance way to put custom field data onto the DOM as JavaScript. This way, depending on the nature of your data, you may manage it with libraries and frameworks like React, Knockout, Backbone (which ships natively in WordPress, by the way), jQuery (also native), and more. You can also use specialized libraries like D3 and chart.js to graphically render data. How cool is that?
PDJ is in version 1.0.0 and may need some refactoring, new features or bug fixes. Send me a pull request. All suggestions welcome!
