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.

Posts You Might Also Like:

In

25 responses

  1. Making WordPress Admin Bar Work With AngularJS Theme

    […] 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 […]

    Reply
  2. Stuart Avatar
    Stuart

    These are the best tutorials on the subject. Great work!

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      hey Stuart, thanks for your kind words! Glad my articles helped.

      Reply
  3. maciej Avatar
    maciej

    Interesting approach, however it doesn’t ensure proper post sharing on Facebook. Source code for the FB debugger remains unchanged. Still looking for another way.

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      I’ve got some ideas working out this issue. Will do some tests and post the solution if I can find one.

      Reply
  4. maciej Avatar
    maciej

    Thank you Yoren. I would really appreciate your insight. Anyway I’m doing my own research in this matter, as it also important when it comes to SEO. Unfortunately most tutorials I’ve found take the title from route, not from the post controller.

    PS. Before I got here, I got that as simple as this:
    document.title = res.title;

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      Hey Maciej,

      I found a solution by Michael Bromley who is an experienced AngularJS developer: https://github.com/michaelbromley/angular-social-demo

      He provided an ultimate solution to enable rich social media sharing of your AngularJS app, I haven’t tested it yet but I believe it should fix the problem.

      To me because I still make my Angular app a standard WordPress theme, I can take advantages of wp_title() to provide the right title of each page for social media scrapper. I can even insert those open graph meta tags for them. In my opinion it’s kind of like Michael’s solution which depends on a server-side PHP scripts.

      Let me know your thoughts. Thanks.

      Reply
  5. Maciej Avatar
    Maciej

    Thank you for that Yoren. I’ve already implemented this solution and it seems to be valid. However, I’ve encountered a complication regarding the .htaccess file, which so far remains unresolved – http://stackoverflow.com/questions/29731657/rewriterule-in-htaccess-for-angularjs-prerendered-posts. Anyway, if you could shed some more light on how to make use of wp_title() in an Angular theme… Regards

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      My theory to deal with social media scrappers or some search engines that can’t process javascript generated content, is that we should still render the page (title, content, meta tags etc.) with PHP, and only manipulate the page when the user interact with it (i.e. click a post title to view the whole post).

      So what I mentioned about the wp_title() is that just something like <?php wp_title(); ?>, and in .

      In that way we’ll output those info by PHP by default, that when a scraper visits the page, it can get correct info, just like any human who visit the page in the browser.

      But I also want to note that such method should only work if you set the Angular route path the same as the WordPress permalink structure. If they are not consistent with each other, my theory won’t work.

      I’m going to host a live site to test my theory. I’d love to share here and also love to know your thoughts. Thanks.

      Reply
  6. philip Avatar
    philip

    My question is, what is the best solution. What does the .htaccess file look for? The one guys solution is not for a wordpress APP, so the .htaccess file is already doing a rewrite. How do you do the rewrite considering the wordpress rewrite is already there?

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      Hi, Philip,

      Please note our AngularJS WordPress theme is still a standard WP theme, so the .htaccess still works if there is one.

      Technically we are not “rewriting” the routes in our Angular scripts, we just make them be consist with the WP permalink structure.

      So when WordPress sends a user to our app, Angular will know which controller and template it should call, and gets the right content back.

      Reply
  7. Kushal Jayswal Avatar
    Kushal Jayswal

    Hey Yoren,

    I found little correction in a code.

    // Old
    document.querySelector(‘title’).innerHTML = res.title + ‘ | AngularJS Demo Theme’;

    // Need to be updated
    document.querySelector(‘title’).innerHTML = res[00.title + ‘ | AngularJS Demo Theme’;

    Thanks.

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      hmm… not sure if “res[00.title” is a typo but since “res” is an object in my case, I’m sure it wouldn’t be “res[0]”.

      Reply
      1. regh Avatar
        regh

        use “res” with content retreived from route called by :ID and “res[0]” if you call them by :slug ( https://1fix.io/blog/2015/02/06/slug-angularjs-wordpress-theme/ )

        Reply
        1. Yoren Chang Avatar
          Yoren Chang

          Ha! Cool, thanks!

          Reply
  8. Kolima Avatar
    Kolima

    Hey really great tutorials,they really made me start out!
    But I’m struggling on one thing,if i need to use Wp functions in the /partials folder they shoot undefined.Do you have any workaround for have wp functions at disposal in the partials called by ng-routing?

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      Hey Kolima, we can’t call wp functions in the files in partials directory, they should be only as the templates for AngularJS. So basically if you follow this series of tutorials, you’ll need to get those data from WP API with Angular controllers, and then display them with directives or the curly braces notations {{}}.

      Reply
      1. Kolima Avatar
        Kolima

        So, i encountered this “error” while trying to setup a theme_options for some example textfield.I guess then the only workaround could be create a CPT for this fields and call it within WP Api.

        Reply
        1. Yoren Chang Avatar
          Yoren Chang

          Using CPT is definitely a creative way! Or you can create your own custom endpoints for WP API to get options.

          Reply
          1. Kolima Avatar
            Kolima

            Any hint to proceed that way?

  9. regh Avatar
    regh

    isn’t it a bad practice to change the html content from the app.controler ?
    is there an other way to do it ( using directives ? )

    Reply
    1. Yoren Chang Avatar
      Yoren Chang

      Well, basically this tut just demonstrated what we can do but not always the best practice. I may use a service for that in the later tutorials. Can’t really recall it…

      Reply
  10. Divakar LN Avatar
    Divakar LN

    “Setting title dynamically in an AngularJs” is a very good article can we use the same code in updated version angular 6?
    Thank you

    Reply
  11. David Ryan Avatar
    David Ryan

    Best Tutorials. Thanks for Sharing it.

    Reply
  12. kartik Avatar
    kartik

    its amazing, Thankyou for sharing.

    Reply

Leave a Reply

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