Recently, I was asked to add a button to the visual editor for posts and pages on a WordPress install that would insert the
<!--nextpage--> code for article pagination . I had done this before, but wanted to write about it here, since I’d totally forgotten how to do it, and wanted to make sure I had a snippet or two for reference.
My friend and I are working on a little side project. It’s a job posting site for an industry we’re familiar with: ESL jobs around the world. While this project could be seen as “just another job board”, we’re hoping to add some features that will make it fun to use and valuable for schools and recruiters. I of course want to build it on WordPress, but to get a some of the functionality I want, I need to expose some post meta to the WP REST API.
In researching how to do this, I quickly found out that the WP REST API doesn’t naturally expose post or user meta. As with most things WP REST API, you don’t have to go too far down the rabbit hole before you find a practical article written by the Josh Pollock. While the
register_api_field function isn’t in use anymore, the
register_rest_field function is, so this article and that function were all I needed to get going.
Before (or while) reading the below, make you sure you give this a listen:
Let’s get down to brass tacks…
Routing is part of the magic of web applications, and not something that we really think about when we’re developing WordPress sites since it’s basically taken care of for us in using the nav menu and full on links with page reloading. But this project was all about skipping the page load, and having a view area that will dynamically load posts and pages, an “app-like state” some might say.
Using Genesis and Angular to display posts and pages in an app-like state wasn’t super straightforward. While it opened a few extra cans of worms I wasn’t expecting, adding routing for both posts and pages has proven to be super interesting, and got me digging into WP core as well to find some answers.
Let’s review the goals of this project:
Primary objective: Create a view area that will display all the contents of posts and pages without a page reload using Genesis and Angular.
Do this by:
- Adding markup to my Genesis child theme
- Fetching data with the WP REST API and Angular
- Routing the data Angular on posts and pages
Ok, this is going to be a bit of a beast, so let’s get truckin’…