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.

Please note if you integrate Angular Slick into your theme, this trick won’t work anymore. Not sure why I just spotted the issue. Will post solution here if I can find any.

Updated on 052715: It turned out the position of wp_footer() did the trick.

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 set $scope.post = res[0].

2. 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.

Move page links on top of share buttons in Ryu

Yesterday when I published my thoughts about Freelance Web Developers Market Research, it’s the first time I wrote a 2000-word article on my blog, I thought it was a good idea to add page links to divide it into two pages.

I knew Ryu (the theme I used for this blog) had styled the page links so it should work fine. But later I found the page links showed after three blocks I’ve added with plugins – share buttons, related posts and author box. My visitors might not know there was a second page of that post.

When looked into the code I found the developer used wp_link_pages() under the_content() in content.php, but the plugins I used hooked their code to the end of the_content filter, that’s why the page links would always be displayed after them.

Here are the snippets I added to the child theme of Ryu to solve my problem.

1. Remove the wp_link_pages() from content.php

2. Hook wp_link_pages() to the_content filter in functions.php

Now it works and I’m still amazed that such a beautiful, elegant theme is free on WP.org.

Long Strings Will Break Your Responsive Theme On Mobile

After I switched the theme to Ryu I’m really impressed by the visual design. Until I found the theme kind of broken on my iPhone.

To be honest, it’s not Ryu’s fault, it’s me that use long strings like URL, Linux command …etc.

The solution is super easy if you know you can always find CSS solutions on CSS-Tricks. One of my long time favorite websites hosted by my long time favorite front-end developer Chris Coyier.

Just want to remind myself and other theme developers: Remember to make your beautifully crafted theme “long string safe”. Your users will be very much appreciated that.

wp_default_styles action hook

Just learnt a new action hook from the book “Build Web Apps with WordPress”:

Get the right prev/next post link when order posts by menu_order

There are 2 functions in WordPress to let you display previous and next post links: previous_post_link and next_post_link. In general, they work so well and really save a bunch time when coding a theme.

Recently in one of my projects, I created several custom post types, and made the posts ordered by menu_order. In such scenario, I found the previous and next post links didn’t behave as I expected, they still return the links based on the order of post ids.

Before I started to write my own version of previous_post_link, luckily I found the filters in get_adjacent_post could order the posts as I want. Here’s the snippet I use in my project:

At first I just added filters to change the sort, but it didn’t work. Then I realised the get_{$adjacent}_post_where should be filtered either, to help the SQL get the right posts for us to sort.

If you are interested in how to make the prev/next post links ordered by meta value, please read this thread on StackExchange for more information.