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’…
In my last post on the subject, we left off with two-way bindings to show that our Angular markup was working in Genesis. That’s great! But we want to use Angular to display content in Genesis using the WP REST API, right?
Ok, so, we’ve got some work cut out for us. Let’s dive back in. Unless otherwise noted, everything is in
Note: this is not best practice, as you want to keep your code in modular files, but hey, this is just a quick bootstrapping example… We’re just learning here!
Let’s get start…
In doing theme or plugin development, maybe you’ve noticed that the various browsers represent fields and inputs differently. Two recent projects, I ran into this inconsistency, and the client wanted everything uniform.
So, here’s what the different browsers represent a dropdown select: [Read more…] about Changing Select Menus for Cross-Browser Compatibility