Getting Post Meta for the WP REST API

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.

Read More

Genesis and Angular: Adding Routing to Posts and Pages (Part 3)

This is the third post in a three part series on using Genesis and Angular. Part 1 can be read here, and Part 2 can be read here

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:

  1. Adding markup to my Genesis child theme
  2. Fetching data with the WP REST API and Angular
  3. Routing the data Angular on posts and pages

Ok, this is going to be a bit of a beast, so let’s get truckin’…

Read More

Using Angular to Display Content in Genesis Using the WP REST API (Part 2)

This is the second post in a three part series on using Genesis and Angular. Part 1 can be read here, and Part 3 can be read here

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 functions.php and custom.js

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…

Read More

How to Disable Phone Number Linking in iOS Safari

I was working on a client’s site recently, and they sent me a screen shot with their address in the header of the site, saying the postal code was off center.

At first I thought I had messed up my Sass styles on the media query for small screens.

Then, I realized what was going on: Safari in iOS was highjacking the phone number linking styles so it could click to call!

Thanks GIPHY!

Anyway, I took to Google, and this is a common problem.

So, here’s what I did…

Read More

Adding Angular Markup to a Genesis Child Theme (Part 1)

This is the second post in a three part series on using Genesis and Angular. Part 2 can be read here, and Part 3 can be read here

This month is Angular August, and so I’ve been focusing on learning Angular (1, not 2 yet… but soon!). I’ve set myself several tasks learning angular, one of which is developing a starter Genesis child theme using Angular and Gulp (since I’ve been wanting to check out and use Gulp more too… I still love you, Grunt). Here is what I’m trying to do with 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:

  1. Adding markup to my Genesis child theme
  2. Fetching data with the WP REST API and Angular
  3. Routing the data with Angular on posts and pages

If you’ve used Angular, you know you need to specify ng-app and ng-view in your html markup so that your Angular app will run. This is easy to do with a starter theme like _’s, but if you’re building on top of a framework like Genesis, you need to use the available hooks and filters to manage your markup.

I’m a part of the community at WP Developer Club and KnowtheCode.io, and Tonya does a great job walking through the markup.php file and structure in Genesis. Check it out and join up if you’re thirsty for knowledge!

So, here’s how I finally landed on the markup I needed to be able to add the basic Angular directives to my Genesis Markup…

(Note: Unless otherwise noted, all PHP goes in the function.php file and all JavaScript has been enqueued from a main.js file)

Read More