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 $ = 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.

46 thoughts on “Using Slug To Get Single Post In AngularJS WordPress Theme”

  1. 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 ( 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!

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


  3. 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 !

  4. 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 “$ = res[0];” which will keep content.html code as it was.

  5. @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? 😉

  6. 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!

  7. Nice tutorial,
    However, I think this method doesn’t with the v2 api rest.
    $ = 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 ?

  8. 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:

      • 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:

          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.

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

  10. 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?


  11. Hi Yoren
    Am working on wordpress theme with Angular2, and am using this:

    getPost(slug): Observable {

    return this.http
    .get(this._wpBase + `posts?slug=${slug}`)
    .map((res: Response) => res.json());
    to get the posts, but it doesn’t work upon build and deploy. When I tried using fields in place of slug, I get the last post instead the list of post titles.

  12. Hi Yoren,
    it’s always me… 🙂

    I would like to use as permalinks settings a custum structure which is: /%category%/%postname%/

    Basically with 2 category: 1) articles 2) tracks
    I would like to have something like /articles/:slug and /tracks/:slug

    And gives to each category a different template based on different controller/partial. Can you give me any tips about this? What would be the best approach to make this work?
    Thanks in advance!


    • At the moment I’m using a dumb solution which is something like:

      .when(‘/tracks/:slug’, {
      templateUrl: myLocalized.partials + ‘content.html’,
      controller: ‘Content’
      .when(‘/articles/:slug’, {
      templateUrl: myLocalized.partials + ‘articles.html’,
      controller: ‘Articles’

      And I build the a links manually based on the section (i.e. tracks/{{post.slug}} or articles/{{article.slug}} )
      But I guess there is a smart solution…

      • Hey Luca, honestly I used the dumb solution as yours when I was in need. I’m not as avid on AngularJS as the time I wrote the series of tutorials, so I never had the chance to dig a better solution. Feel free to come back and share with us when you find one!

        • Yes this is working, but it encounters in many errors, for instance you can access to the same page with multiple layout. If I have a slug like ” track-example ” you can see it as ” /tracks/track-example ” and ” /articles/track-example “. You have to pay attention to all the internal href you do


Leave a Comment