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.

Share the post:Tweet about this on TwitterShare on Google+1Share on Facebook0Share on LinkedIn1
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!

39 Comments

Submit a comment
  • Hi, really liked your tutorial. It was a very good starting point for me to build themes using Angular for WP. It would be great if you can guide me on using OAuth1 for getting list of users, get articles for some users. I have been checking on net for quite some time but not getting any answers. Great if you can point me at the right direction.

    • hey, Abhijit, thanks for your kind words. I’ve done the search about oauth with WP API and get the same results with you. I haven’t tested it by myself (https://github.com/WP-API/client-cli) but it looked a easy start. I hope I can write some tutorials about it soon, thought it may be an much advanced topic than mosts posts I’ve written.

      I’ll send an email to notify you if I do write about the oauth topic. Talk you soon!

  • Thanks Yoren. I appreciate your mention in the article. I’d love to work with you to build a full-scale WordPress Application using Angular.

    I need to understand how to use the WP-API much better and then I think I can make WordPress very powerful.

    Other concerns of course are SEO, building SPAs can have a negative effect on search, though I know there are some ways around it.

    Please keep me updated on what you learn.

    Thanks

  • Hi Yoren, thank you for all your tutorials !!

    For get page, it’s simple, we add : type[]=page to the request. But how to do this with route ?

    Thank you !

    • Hey Nicolas, just tweet you back. Have you tried /wp-json/pages?filter[name]=some-page ?

  • Just a thought: to make things a bit more accessible in the content.html file and avoid continually pointing at item 0 in an array, you can just change the Content controller to use “$scope.post = res[0];” which will keep content.html code as it was.

  • @YOREN,

    So nice, your work! But I just can’t get something out of my head: How can we give the crawlers something to eat when they come?

    As it is now, they would just find a sad empty page. (Testable if reloading any of the sub-pages with javascript turned off). Do you have any idea already on how to solve these problems? Otherwise we will all go back to the stone-age of flash seo-wise 😉

    • And I’d also like to note that Google have announced they can interpret JavaScript now (last year as I recall). So it could be an accessibility issue more than SEO issue I guess. 😉

      • Damn, I missed that you answered… A “subscribe to comments” plugin would be great. I am from Germany and over here everybody is super-conscious about accessibility, so I would have to re-write all the pages server-side.

        Another approach could be to let Angular build the html and then save it to a transient named after the current url once a day. Then, the post could render this transient, if javascript is turned off.

        Any thoughts?

        • I’ll say for now for better accessibility, we should still render the page with server-side scripts like PHP and only load (change) content with JavaScript when the user interacts with the page (a click with mouse or enter with keyboard).

          Somehow I even think things might be easier (for developers) if we build a separate site for disabled users. But I know it’s not recommended.

          I’d love to install subscribe to comments plugin which:
          1. doesn’t rely on 3rd-party service
          2. doesn’t create extra tables in database
          Any suggestion? 😉

  • Ah ok, I see, this actually creates separate tables… Then I don’t have any idea 😉

  • This is a great tutorial, already using this tutorial on my local (wordpress). so im curious to implement this tutorial on mobile apps using ionic, i get “?filter[name]=undefined” object in console on $routeParams.slug or ID. still can’t figure it out, did i missed something on this tutorial or is there a different method if we want to use it on mobile apps using ionic or phonegap.

    • Hey there, I haven’t used ionic yet but I doubt if my scripts can fully compatible with it.

      For example, ionic relies on ui-router heavily so you should be using state instead of route to set the routes in your app. In that case, the $routeParams will become $stateParams either.

      I’m just guessing based on ionic tutorials I’ve read. Let me know how exactly you solve this. Good luck!

  • Nice tutorial,
    However, I think this method doesn’t with the v2 api rest.
    $scope.post = res[0]; returns the last post.
    Also do you have any idea to display the next post and the previous post, relative to the post inside a single post ?

  • Thank you very much for these tutorials…..
    Really helpful….I have just started to connect angular and wordpress….
    So far I have made a few wordpress sites from scratch….though dont have much experience in angular….just basics….hope dont have to make angular sites only by themselves…..I mean dont know can make wordpress theme by angular without too much knowledge of angular….
    BEST REGARDS…..and wish all the best in your work :))

    • Hi Dragan, thanks for your kind words. I believe this series of tuts can help you with an easy start about WP and AngularJS. If you feel good about such stack and would like to go further, just check this project out: https://getmoxied.net/lean/.

      • Hello again :)),

        thank you very much for the answer and just one more question.
        Which plugins should I use during making wp rest api themes…
        Are there some established plugins or should create some by myself like custom post types because future employers can appreciate more if I make some custom post type by myself…..
        Any words is highly appreciated…..thanks in advance……Best regards :))

        • Hi Dragan, I think it’s a quite broad question that might indicate you’re new to WP / REST API development. I highly recommend Josh Pollock’s articles and a course to you: http://joshpress.net/learn-modern-wordpress-with-me/.

          Josh is very passionate about WordPress and he’s also a REST API advocator. I believe his course can help you on building a career as a professional WP developer.

          Wish you best luck and feel free to let me know your thoughts.

  • Hi Yoren,

    Brilliant tutorial you have here, loved them all. I have one question regarding SEO. As we all know, Yoast is the most popular WP plugin for SEO. How do we make it work in Angular-WP like a regular WP theme? Mainly I’m referring to the meta tags it can add into every individual pages. Secondly, the way it can manipulate breadcrumbs.

    Thank you very much.

    • Hi Shaiful, the best way I can think of is to extend WP API with custom endpoints so you can expose breadcrumbs and meta tags to your Angular theme (template). It will require a specific amount of work especially when dealing with breadcrumbs, but it should work that way.

    • Hey Yaroslav, sorry I missed your comment. It’s been a while I haven’t kept up with WP API v2, but the same approach should technically still work. Have you tried and failed at this?

  • Hi Yoren,

    Thanks for the good work.

    I have some problems with ng-route. Although I could make it work while on index (home) to /:slug navigation, it gets error -page not found- when I hit /:slug directly or refresh the page in slug view.

    I did use the and did the whole routing just like yours, but no idea about this situation. Any ideas?

    Thanks,

    • Hey Gokhan, Have you set the permalink in WordPress as the same as the Angular route? That should fix this issue.

Submit a comment

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