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…

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…

Category Pages In AngularJS WordPress Theme

In this tutorial I’ll be showing you how to add category archive pages to our AngularJS WordPress theme. Topics will be covered including:

  1. Get categories with WP REST API
  2. Display category links
  3. Create the route to category pages
  4. List posts in a certain category
  5. Replace the current category link with plain text to improve the usability
  6. Bonus: Display the featured image in posts list
  7. Bonus: Use JSON Formatter to improve the readability of JSON data and help you debug
  8. Updated 04/11: Get category archive page with slug

Before we get started, I hope you’ve read some tutorials from my Building themes with AngularJS and JSON REST API series, so we can be on the same page later when we dive into the code. If you’re new here, I’ll recommend that you start from the first post in this series: Using AngularJS and JSON API in Your WordPress Theme, which is listed on the Resources page at wp-api.org. It will definitely help you to build a quick and dirty AngularJS WordPress theme, so please go check it out. Read More…