Since October 2014, I developed a new hobby on building a WordPress theme with AngularJS. If you’re interested in “why” rather than “how”, honestly I can’t say there’re plenty of advantages about this approach/stack bla bla bla… Though there do be some in my opinion.
If you’re interested in my learning path, I’d love to share so I’ve written a series of tutorials for you. You might spend around 5 to 20 minutes on each post and I try my best not to bore you.
Any suggestion or feedback will be very much welcome. Here’s the list of my articles:
- Using AngularJS and JSON API in Your WordPress Theme:
An introduction to use the WP REST API and AngularJS in a WordPress theme. I wrote it based on a tutorial video from WordPress.tv – Eric Wolfe: Building a WordPress Theme Using AngularJS, but added my own flavors. This post is now listed on Resources section at WP-API.org, which might lead some of you to this repository.
- AngularJS WordPress Theme: Display Post Content with ngBindHtml:
You might be wondering why AngularJS displayed post content with HTML tags but not rendered them. In this tutorial you’ll find the answer and learn two approaches to solve it.
- Use AngularJS Custom Directives In A WordPress Theme:
Custom directives are very powerful in AngularJS. I’ll show you how to create a search form directive
<search-form>in this theme, and make it work like the WordPress built-in template tag
- Minification Errors in My AngularJS WordPress Theme:
After minifying AngularJS scripts, our theme suddenly stopped working. How did that happen? We’ll dig into another important concept called Dependency Injection (DI) in AngularJS.
- Using Slug To Get Single Post In AngularJS WordPress Theme:
Everyone knows pretty links bring pretty SEO performance, so we shall add post slug to our permalink structure, right? I’ll get you all set in this short post.
- Making WordPress Admin Bar Work With AngularJS Theme:
Oops, the WordPress admin bar dosen’t work with our AngularJS theme. Let’s see what we can do to fix it.
- Setting Page Title Dynamically In AngularJS WordPress Theme:
Changing the page title dynamically is an important feature in our AngularJS WordPress Theme. We need to incorporate this feature into our theme.
- Filtering image_send_to_editor To Add Target Attribute To Link:
If you insert an image link in the post content, it will work funny (not as expected) in our AngularJS theme. With a very short snippet, boom! The problem goes away.
- Category Pages In AngularJS WordPress Theme:
Show me some category pages in this AngularJS WordPress theme, you said? Sure. I covered pretty much everything you need to know about this topic.
- Adding Slick Carousel To Your AngularJS WordPress Theme:
Adding a slick carousel to your post to display all attached media can’t be easier with Angular Slick.
- Pagination In AngularJS WordPress Theme:
My second tutorials on creating custom directives in AngularJS WordPress Theme. This time we’ll create a
postsNavLinkdirective which works like the built-in WordPress template tag
posts_nav_link(). They even take the same parameters!
- When Page Not Found In Your AngularJS WordPress Theme:
A good developer should always keep an eye on error responses from the application. Let’s start with the popular “page not found” error and see how to deal with it.
- Improving Your AngularJS WordPress Theme With A Service:
The first tutorial we talk about AngularJS
servcies. We’ll introduce how to share data between controllers by creating a new
- Tidy Up Your AngularJS WordPress Theme With A Service:
It’s the second post we talk about Angular services. We’ll see how to use the
WPServiceto organize and share code across the theme, which helps us tidy up our code.
- Adding Fields To The JSON Response Of The WP REST API:
This post is only 10% related to AngularJS, but you’ll learn how to better work with AngularJS just by manipulating the fields in the JSON response of the WP REST API.
- Getting Posts By Taxonomy Or Meta Field With WP-API v2.0:
The WP-API v2.0 works in a more WP_Query way, but there’re still a few concepts need to be clarified. Wanna know how many query parameters are available? Let’s dig into the source of WP-API and WordPress.
- Upgrading Your AngularJS Theme To Work With WP API V2:
The WP API v2 is almost ready so I’m upgrading the AngularJS theme project to work with it. Other than just changing the routes, you’ll be surprised how the version 2 differs from version 1.
- Cookie Authentication In A AngularJS WordPress Theme:
I’ll walk you through what are cookie authentication, WordPress nonces and AngularJS
$httpProvider.interceptorsin this tutorial. By sending the nonce in the headers with each API requests, getting authenticated with WP API in a theme is actually very easy.
- Display Post Excerpt To The More Tag With WP API V2:
Are you looking for a solution to display post excerpt based on the
<!--more-->tag? I have some not-so-shiny tricks to show you.
- Getting Categories With Posts In A Single WP API Request:
This short tutorial will show you how to add an extra field to the category route response, so you can get related posts for each category with just a single API call.
- Removing Content From WP API Response When Listing Posts:
You can conditionally add or remove fields from WP API response. Sounds cool, huh?