Using WordPress as a headless system, is nothing new. You can easily build out your own REST API or use the long available HTTP REST API 1.0+ for WordPress.
But with the new HTTP REST API 2.0+ its getting really easy to build out your own REST API Namespace and assign routes for all your JSON needs.
The new REST API will make its appearance in WordPress 4.4, but you can start now by adding the plugin to your system. When the plugin detects 4.4+ it will only load functionality not already present in the core.
A route tells the API to respond to a given request with a specific function (endpoint). This adds the permalink structure to WordPress so that your functionality can be accessed via an url like this: http://yourdoman.com/wp-json/yourplugin/v1/myfunction/your_parameter
The Endpoint is the callback handled by the route. Each endpoint can have additional parameters attached:
The return values from the endpoint are converted into JSON. You can use the WP_REST_Response object , this wraps normal body data and allows you to return a custom status code.
Really powerful stuff, that makes it easy to detach WordPress and the actual client using the data provided by it.
You can read more about it here.
I am currently working on a WPLMS enhancement for a customer, that allows to simplify the payout of instructor commissions. The whole system runs on the MyCred Points System and students pay for courses with Points. The problem is how to easily payout the instructor commissions via PayPal.
There is currently no addon for MyCred available that does that magic, so I build one myself.
At the moment the payment process via PayPal is completely manual, due to budget constraints. I am basically generating a custom „Send Money“ link that prefills the PayPal email and amount to send.
The interface itself handles the payout sessions, tracks the instructor balance, paid and unpaid points.
Here some images to illustrate the admin dashboard:
This list the instructors and their point balance and allows to start the payment process.
Payout sessions make sure, that only one session can be started per instructor, as the instructor could earn new points during the process. The points converted can be changed, allowing you to payout a fixed amount of points.
Its a 3 step process. Login at PayPal. Open the „Send money“ dialog and send money to instructor. Confirm that you manually send the money and than register the payment and payout points in the system.
The session can be cancelled at any point. You can also leave the session open and continue at a later point.
On the frontend I added an interface to the BuddyPress Profile, that allows the instructor to track his payouts and balance.
The whole setup could be updated using PayPal Adaptive Payments, to make the whole process completely automated. Something to consider for the future :) Pretty happy with the manual process so far and it will be a great help for my customer to keep track of the commission payouts.
The whole setup is currently targeted for WPLMS, but can easily be adapted to other setups using the MyCred Points System.
This often comes up, when you work with jQuery and try to do a simple $(„#YourElementID“).trigger(„click“); or similar.
With inline content being loaded via ajax, you are loosing a lot of interesting usage data. These can be tracked using Google Analytics Events or by sending a Pageview.
The above allows to automate tracking by attaching simple classes and use HTML5 data attributes to assign category, action and label. Direct tracking is also possible. Lets split it up :)
This monitors links with the class .trackEVENT attached and fills the event data using HTML5 data attributes. All attributes have default values assigned.
A possible link would look like this:
The sendEvent function than sends this to Google Analytics.
Much simpler, this just gets the element text and submits the click as a new Pageview. The label gets the pagename attached and the actual page url is constructed from the label. The sendPageview function than sends this to Google Analytics.
Really simple and effective way within a simple OnePager or a bigger web application. BTW I am using delegation to make sure that also links within AJAX content can be tracked.
Finally identical inputs across different browsers and devices — both desktop and mobile.
iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers.
Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.
using getBoundingClientRect & jQuery.
„The returned value is a DOMRect object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.“
„This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.“
„Simple jQuery plugin to determine if an element is within the viewport. Optional parameters allow the user to specify a minimum percentage of the element’s dimensions that must be visible to qualify.“
When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.
I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.
You could code the viewport visibility check yourself or use the „visible“ jquery plugin.
„This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.“ jquery-visible on Github
The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.
This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.
Very basic idea to get some transitions working.
Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)
There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)
The timeout is cleared every time a resize event fires, making sure your code is only executed once the resizing actually stopped.