AJAX & WordPress for Frontend Editing

I know, with the advent of many MVC frameworks and the evolution of the WordPress REST API, the AJAX way of doing things might seem a bit odd, or old or ..

Nevertheless, some small things can be accomplished pretty quick with the help of the AJAX handler within WordPress. Especially for viewer-facing functionality.

For a showcase WP Meetup in Antwerp I gathered some projects and types of functionalities where I added some AJAX functionality to improve the flow and the UX of some projects.

In my presentation on what AJAX essentially is —  and I kept it beginner level for people who had never heard the acronym before — I explained what it is, what it can be used for, and why it’s sometimes better to use than classic page posting and reloading.

Basically it does the same stuff other functions do, but it does it behind the scenes, and without reloading the page, although you still can. E.g. a newsletter subscription form which verifies validity of an e-mail address, posts it to the server, validates it again, creates a database entry and writes the email down and returns a success to the frontend, upon which the form disappears and a success message appears. Or a show me more posts link upon clicking it, or scrolling past it. Or lots of user-generated content like webapps.

AJAX is about asynchronous updating (parts of) a web page, by exchange of data with the server behind the scenes without reloading the whole page.

I also showed some examples I all built. Like e.g.

  • letting people login through the frontend and redirecting them to their account page
  • letting the same people change their profile through the frontend
  • letting certain people with specific roles judge over the acceptance of user generated input (yay or nay), which changed the status of that specific post, making it available in certain collections and/or viewable for all.
  • letting people vote for e.g. X, Y, Z (popstars, products, flowers, submissions of whatever doesn’t matter..), triggering a chain of events which lead to generating a unique url, which they get in their inbox, which upon click registers their vote and excludes from further voting.
  • letting real estate sales people putting an option down for a property, which excludes all others for claiming the same property for a while, making the property available to that specific realtor for two weeks, unless he doesn’t close the deal or makes it available again.
  • doing all these kinds of stuff and sending mails out to admins, other users, other super-users, etc with notification and/or direct action urls built-in

All this kinda stuff to prevent users having to login in the backend. Some of the functions I showed were available to all, even without any login credentials (the voting functionality), some required a login and some privileges (the realtors) and others were that expanded that there were various roles and capabilities.

This was also a showcase where site development is headed. With the rise of MVC Javascript frameworks like Angular, React, Ember, Backbone etc and the way WP can be used as a decoupled backend for data storage and manipulation, we will be seeing much more of these kinds of behavioural and structural changes in how sites are built with WP and a perfect setup for my next talk on WordPress and the REST API and -insert JS MVC framework. I still have some stuff to discover, but slowly I’m getting there.

Want to know more about WP and AJAX ? Google is your friend, and the WordPress codex is your best friend.

Some sites I featured in my presentation are also in my portfolio, but the one that’s most interesting is halted at a budget level operation unfortunately, another one is not live yet, and the others are mainly for registered users to see the power of AJAX frontend administration. But do built your own and see if you can make a post from the frontend or add a popularity counter for your articles, based on views or a button.. Experiment, explore, learn..

Not a developer, but need this as well ? get in touch !

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>