Upgrading Your AngularJS Theme To Work With WP API V2

Today in this post, I’ll be showing you how to upgrade the AngularJS WordPress theme that we have been working on for a very long time, to work with the latest WP API v2 (beta 4 at the time of this writing).

To be honest I didn’t expect the WP API v2 would be so much different from the version 1. When I talked about upgrading the theme in some comments of my tutorials, I thought it just about updating the routes and that’s all. It turned out I was wrong and the mistakes I’ve made are pretty worthy of documenting. So here we go. Read More…

Getting Posts By Taxonomy Or Meta Field With WP-API v2.0

In the post adding fields to the JSON response of the WP REST API, you’ve learned about how to manipulate the data from the WP REST API (WP-API). Another topic I got asked very often, is how to get posts by certain filters – mostly taxonomy and meta field. So today let’s talk about it.

Before we get started, if you’re looking for the workarounds for WP-API v1.x, Josh has written great tutorials for you. Here are the links of them:

  1. Working with Taxonomies Using the JSON REST API
  2. Working with Meta Data Using the JSON REST API

In the following article, I’ll show you the quick answers and a more bigger picture beyond them. If you’re not interested in the later one, feel free to skip it. Read More…

So Here Comes The Higgs

Today I changed the theme here from Ryu to Higgs by Codestag. This is the first time I bought a premium theme from Envato. I choose very carefully that I’ve followed the works by Codestag for a while. And somehow they conviced me.

Now with Higgs I only changed the color and widgets then left everything else by default. It looks almost as I expected. Just it requires the Jetpack to display the site logo, which is the plugin I’m allergic to, so I would rather to give up the beautiful logo for a while… until next time I change the theme again.

As most beautiful themes, Higgs also requires a hero image for each post, it’s optional but without it, the first post would be sticky to the header area. I’m a little uncomfortable with it but it’s Friday so I’ll leave it that way.

I hope everything gets well and you can still enjoy the reading here. If not, just shoot me an email: yoren [at] 1fix.io. I’ll see what I can do for you.


Updated July, 20: I just found the style of Gists is broken in Chrome. For example the gist below:

The indentation behaves well in Firefox and Safari, but acts weird in Chrome. Any idea?

Updated July, 20, part-2: I can’t believe it’s the text-rendering broke the theme! After this modification, things go well again!

body {
	text-rendering: auto;
	-webkit-font-smoothing: auto;

Adding Fields To The JSON Response Of The WP REST API

The WP-API team got the documentation updated, so be sure to check this post out before you modifying the JSON response. (Thanks PDuran for this.)

Since I started the series about building themes with AngularJS and WP REST API, I got asked lots of questions that sometimes they were involved more with AngularJS, and sometimes they were more concerned with WP REST API.

To be honest, I prefer WP REST API related questions because they usually take less time for me to solve. After all, I’m quite new to AngularJS so before answering each question I’ll do some research to make sure my answer will be backed up.

Most questions related to WP REST API can be solved by manipulating data in the JSON response. Yes, though the post title might imply the “adding” part, we can also “update” or “remove” fields (data) with the same approach. Let’s get started. Read More…

Tidy Up Your AngularJS WordPress Theme With A Service

In the previous post, I spent some time to walk you through the basics about services in AngularJS, including what is a service, how to create a factory service, and what exactly can be improved with the new WPService created by us.

So basically it’s mainly about how to share data between controllers with a service (which looks so magical especially when we change the routes). If you’re convinced by the example I just demoed, I’m glad to show you another important usage about services, which we’ve mentioned that they are designed to organize and share code across the AngularJS app. That’s why I’m saying we can tidy up our AngularJS WordPress theme with a service.

Let’s start by taking a look at the controllers in scripts.js – the Main and Paged controller, to see if there’s anything can be rewritten to be reusable, and move the reusable code into our WPService service. Read More…

Improving Your AngularJS WordPress Theme With A Service

Remember last time I’ve promised that I’ll tidy up our AngularJS app by creating a new service? Today in this tutorial (and the next one), I’ll show you nothing but creating a new service called WPService, and by adding the WPService service as a dependency for our controllers, we’ll also rewrite the code piece by piece. If you’re ready now, just open your favorite editor and dive into the code with me. Read More…

When Page Not Found In Your AngularJS WordPress Theme

It’s good to see you in the latest post of my Building themes with AngularJS and JSON REST API series, I hope you enjoy the previous tutorial about pagination in AngularJS WordPress theme. Today I want to show you how to deal with “page not found” scenario in our project. You might be a little bit surprised that we’ve sort of talked about it when we learned the “otherwise” method in $routeProvider. It turns out that we still have a few things to cover. So if you have a couple of minutes, just open your favorite code editor and get started. Read More…

Pagination In AngularJS WordPress Theme

In this tutorial, I’ll be showing you how to add a simple pagination to your AngularJS WordPress theme. We’ll create a custom directive with AngularJS which works like the WordPress built-in function posts_nav_link(), that will display previous and next posts links in your index and category pages.

Before we get started, let’s take a look at the posts_nav_link() function first. By its description from the WordPress Codex, posts_nav_link()displays links for next and previous pages. Useful for providing “paged” navigation of index, category and archive pages.’  So after we add our custom directive “postsNavLink” to our AngularJS app, we expect to see a paged navigation in our index and category pages: Read More…

Counting Posts In WordPress

Every now and then you would need to display the total post count in your WordPress application (website). There are several methods you can use for such a simple task, but can you tell the difference and choose the right method (function) which runs faster and consumes less resources? I’d like to share my findings with you in this post. Read More…

Adding Slick Carousel To Your AngularJS WordPress Theme

Last time we just learned about Getting Attached Media For A Certain Post With REST API, now we should be ready for implementing this technique and fetching all attached images into a slider.

After this quick tutorial, you’ll have a Slick carousel showed in each post, when there are more than one image attached to the post. It will look like the following GIF animation:

Slick Carousel in the post content view

Since this post is in my Building themes with AngularJS and JSON REST API series, please be sure you’ve downloaded the latest project files before we get started. Read More…