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.

I’m a senior web developer helping clients build their websites to grow businesses. Currently I’m based in Taipei, Taiwan.

I write things about WordPress, AngularJS and life. Whenever you’d like to find someone to talk about these topics, just get in touch!

12 Comments

Submit a comment
  • Hi,

    I think there’s an error in the code above. Shouldn’t the be outside the div#page ?

    • Oh I think you’re right though it’s still workable. I’ll update the theme later.

    • Hey are you still logged in? Or, did you set show_admin_bar to false in your functions.php?

  • First of all thank you for this great tutorial!

    I´ve got a little note using the admin bar:

    Angualar does not need to reload the page. Because of that, while I´m reading (for example) a post with the ID of 1 –> going back to main view and move forward to the post with the ID of 2.

    The case is:
    when I now want to edit the post of the ID 2, the wordpress post editor shows me the edit page of the post with the ID 1

    Solution?:
    href=”{{post.slug}}” onclick=”location.reload()”

    best regards!

    • Hey Jay, Thanks for the feedback. I don’t quite understand if you meant my solution doesn’t work for you or just propose another approach? Would love to hear back from you to clarify things. Cheers!

      • I think he just mean that edit bar dont update its content with the page, from the home page we dont have the “edit page” link but if you go to an article and refresh the page WP will add the “edit post” link to the bar that will not change his href when we goes to another page…
        is there a way to refresh this edit link (or the edit bar content)?

  • A year after writing the tutorial series – and still a great resource! Doesn’t happen often with web tutorials (since web is so fast-paced…)

    Thank you!

    But the wp_footer is still on the wrong place in your code sample… 🙂

    • Hey Robert, Thanks for the heads up! Glad to know this series still helps after more than a year. 😉

Submit a comment

Your email address will not be published. Required fields are marked *