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 moreAdding Slick Carousel To Your AngularJS WordPress Theme

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 moreCategory Pages In AngularJS WordPress Theme

Filtering image_send_to_editor To Add Target Attribute To Link

A reader of my Building themes with AngularJS and JSON REST API series asked me how to make image links in WordPress work with AngularJS. This is a very good question that you must bump into when building your own AngularJS WordPress theme.

Read moreFiltering image_send_to_editor To Add Target Attribute To Link

Setting Page Title Dynamically In AngularJS WordPress Theme

Changing the page title dynamically is an important feature in our AngularJS WordPress Theme. If you have checked some articles related to this topic, you might find it’s a bit hard to integrate those methods to our theme. There are two reasons: We just moved the ng-app=”app” from html to #page div, that means the …

Read moreSetting Page Title Dynamically In AngularJS WordPress Theme

Making WordPress Admin Bar Work With AngularJS Theme

In my tutorials of AngularJS WordPress theme, I’ve always put ng-app=”app” in html tag. Maybe I haven’t mentioned, but in fact, the ng-app=”app” can go with any HTML tag in your page, as long as it makes sense. For example, it’s obvious the body tag should be the second best place to insert the ng-app=”app” …

Read moreMaking WordPress Admin Bar Work With AngularJS Theme

Using Slug To Get Single Post In AngularJS WordPress Theme

In the first post of my AngularJS WordPress theme series, I set the post title to link to {{post.ID}} so I can get a single post with the default route in WP API: /posts/<id>. Couple days ago Ryan asked me can we use slug instead of ID, and reminded me that in the original demo video (Eric …

Read moreUsing Slug To Get Single Post In AngularJS WordPress Theme