WordPress

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:

Pagination in your AngularJS WordPress theme Continue reading

Standard
WordPress

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. Continue reading

Standard
WordPress

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. Continue reading

Standard
WordPress

Page fragment caching is a must-have function for cache plugins like W3 Total Cache, it’s a shame that such functions didn’t get much attention.

W3 Total Cache answered the “How do I implement page fragment caching?” question in the Developers section in their plugin FAQ page:

First you need to define W3TC_DYNAMIC_SECURITY in your wp-config.php file.

define('W3TC_DYNAMIC_SECURITY', 'somesecurestring');

Edit your templates with the following syntax to ensure that dynamic features remain so. Replace W3TC_DYNAMIC_SECURITY with content of the constant or use echo to print constant:

Example 1:
<!-- mfunc W3TC_DYNAMIC_SECURITY any PHP code --><!-- /mfunc W3TC_DYNAMIC_SECURITY -->
Example 2:
<!-- mfunc W3TC_DYNAMIC_SECURITY -->any PHP code<!-- /mfunc W3TC_DYNAMIC_SECURITY -->
Example 3:
<!--MFUNC W3TC_DYNAMIC_SECURITY -->
echo rand();
<!--/mfunc W3TC_DYNAMIC_SECURITY -->
Example 4:
<!-- mclude W3TC_DYNAMIC_SECURITY path/to/file.php --><!-- /mclude W3TC_DYNAMIC_SECURITY -->
Example 5:
<!-- mclude W3TC_DYNAMIC_SECURITY -->path/to/file.php<!-- /mclude W3TC_DYNAMIC_SECURITY -->
Be aware that WordPress functions will not be available.

The answer itself is pretty much clear except it forgot to mention a most important step: YOU NEED TO ADD ‘mfunc’ TO THE ‘Ignored comment stems’ SETTINGS.

Source: WooThemes http://www.lost-in-code.com/platforms/wordpress/w3tc-fragment-caching-mfunc/

Without this step you’ll waste 100 hours on testing the page fragment caching and never getting it worked. Thanks to WooThemes pointed it out and hope I can save someone else’s 100 hours.

Added on March 27:

After couple of days I found the fragment caching still acted weird. Sometimes it worked fine but sometimes didn’t. After some research I believe it’s related to the “Page cache method” I set.

The site I need to implement fragment caching is sometimes very high volume. So if I set the “Page cache method” to “Disk: Enhanced”, which is recommended by W3TC, the old cache files would be used while the new cache files are being generating. Read explanation here. Changed the setting to “Disk: Basic” can fix the issue.

The other thing to note is if you need to use WordPress functions in your fragment caching block, you should enable the “Late initialization”, which may increase response time.

Now the fragment caching finally worked on my client’s website. I highly recommend anyone who needs a powerful WordPress cache plugin, just go with W3 Total Cache. WP-Rocket is great but it doesn’t support fragment cache yet.

Implementing Page Fragment Caching in W3 Total Cache

Aside
Gist

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:

  1. We just moved the ng-app="app" from html to #page div, that means the title element is beyond the scope of our app. Most of the tutorials use the $scope.title approach to change page title, unfortunately it won’t work with our theme.
  2. Most tutorials will predefine a title for each route, for example there are 3 files a.html, b.html and c.html, and their titles are like Page A, Page B and Page C. In such scenario it’s much easier to get and set the page title on $routeChangeSuccess event. But our case is a bit different that we’ll need to get a post from WP API first to know what the title is.

This post from stackoverflow gave me an idea to change the title with the global variable document. Here’s the snippet I use to change the page title dynamically (line 7, line 14).

Note that I use document.querySelector('title').innerHTML rather than document.title, so special characters like HTML entities won’t be decoded. You can get full project files from the GitHub repo.

If you have any question related to my AngularJS WordPress theme series, just leave a comment here, I’ll get back to you as soon as I can.

Standard
Gist

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" if we’d like to enable AngularJS on the whole page.

There is another topic Ryan reminded me few days ago, he noticed the admin bar can’t work with our AngularJS theme. It looked all right, but when clicked the links, the page wouldn’t go to admin panel, but stayed on the same page without content:

Admin Bar doesn't work with AngularJS

In this situation, we can’t see any errors in JavaScript console, that means there is nothing wrong in our code. So what’s the real problem?

You should realize now that with my hint in the first paragraph, it has to do with the position of ng-app. The ng-app is basically a way AgularJS declares that “this part of page belongs to me“. When we set the whole html to be manipulated by AngularJS, clicking any link on the page, AngularJS will check if the pattern of the URL matches a route, then display the template accordingly.

Since the URLs in the admin bar don’t match any of the routes, it starts acting weird.

So what can we do? We need to move the admin bar to somewhere not ruled by All Mighty AngularJS.

    1. If you use the project files from my previous tutorial, please add wp_footer(); to index.php first, and make sure there’s nothing like add_filter('show_admin_bar', '__return_false'); in the functions.php, or the admin bar won’t be displayed.
    2. Modify index.php to code below, so admin bar can get away from AngularJS:

Another thing to note is we should add a default route to our app for the best practice. We can do so by adding otherwise method at line 15, and please note that I changed the route of content page either, or the $routeProvider will never fall back to otherwise:

Now if a visitor tries to go some page doesn’t exists, the homepage will show.

Just download the full project files on GitHub (with bonus content that I will introduce in my next article – How To Dynamically Set the Page Title). While waiting for the next post, you can find more information about ngApp on the official AngularJS documentation.

Standard
Gist

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 Wolfe: Building a WordPress Theme Using AngularJS), Eric did use the slug rather than ID. At first I replied to him it’s because Eric used the JSON API not WP API (JSON REST API), by default the WP API can only get post by ID.

The answer was not so persuasive I thought it’s better to double checked. Luckily I found the right answer in Josh‘s article on Torquewe can get posts by slug with filter parameter.

So here are the snippets you’ll need to update, if you prefer to use slug in our project files (from my previous tutorials):

1. js/scripts.js

  • line 6: Change /:ID to /:slug
  • line 16: Change 'wp-json/posts/' + $routeParams.ID to 'wp-json/posts/?filter[name]=' + $routeParams.slug
  • line 17: With this approach, we’ll get an array of posts, so we need to change $scope.post to $scope.posts

2. partials/content.html

  • line1, line2: Change post to posts[0]

3. partials/main.html

  • line 5: Change {{post.ID}} to {{post.slug}}

You can get the full code from a branch of the project repo. I hope short posts like this can also help readers understand better about AngularJS and WordPress, especially how to accomplish a specific task. See you soon.

Standard