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:
We just moved the
#pagediv, that means the
titleelement is beyond the scope of our
app. Most of the tutorials use the
$scope.titleapproach to change page title, unfortunately it won’t work with our theme.
Most tutorials will predefine a title for each route, for example there are 3 files
c.html, and their titles are like
Page C. In such scenario it’s much easier to get and set the page title on
$routeChangeSuccessevent. 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.
25 thoughts on “Setting Page Title Dynamically In AngularJS WordPress Theme”
These are the best tutorials on the subject. Great work!
hey Stuart, thanks for your kind words! Glad my articles helped.
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.
I’ve got some ideas working out this issue. Will do some tests and post the solution if I can find one.
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;
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.
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
So what I mentioned about the wp_title() is that just something like
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.
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?
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.
I found little correction in a code.
document.querySelector(‘title’).innerHTML = res.title + ‘ | AngularJS Demo Theme’;
// Need to be updated
document.querySelector(‘title’).innerHTML = res[00.title + ‘ | AngularJS Demo Theme’;
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”.
use “res” with content retreived from route called by :ID and “res” if you call them by :slug ( https://1fix.io/blog/2015/02/06/slug-angularjs-wordpress-theme/ )
Ha! Cool, thanks!
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?
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
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.
Using CPT is definitely a creative way! Or you can create your own custom endpoints for WP API to get options.
Any hint to proceed that way?
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 ? )
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…
“Setting title dynamically in an AngularJs” is a very good article can we use the same code in updated version angular 6?
Best Tutorials. Thanks for Sharing it.
its amazing, Thankyou for sharing.