How to work with _main.js Routing? Specially how to load specific pages?

I’m pretty new to js and jQuery, I can read most of the code but I do not understand most of the more advanced concepts.
Routing like _main.js does is completely new to me…
It does seems an amazing aproach and something I do really want to learn but as it stands now I have two doubts (only two, because I haven’t ventured a lot into it yet :stuck_out_tongue: more doubts will follow!)

  • How can I load a script based on a page template? (not based on page name or url).
  • If I load a script based on the page (for example ‘contacts’) will it work with WPML like urls (like and

Any resources you could point me to read on this topic will be welcomed (on the Routing topic :smile: )

Thank you!

Did you read through the link in the file itself?

There are also comments below the link explaining how it works.

1 Like

Yes I did read it.
Also read Paul Irish original post.
But still can’t figure out how to make it work based on a template file.

The slug of your template file is appended to your body class. For example, if you have a template file template-home.php:

<body class="home page page-template page-template-template-home-php logged-in">

In your _main.js you can target only those pages with the assigned template:

var Roots = {
  // All pages
  common: {
    init: function() {
      // JavaScript to be fired on all pages
  // Template Home
  page_template_template_home_php: {
    init: function() {
      // JavaScript to be fired on the page with home template

You should convert any dashes - in the template file name to underscores _

1 Like

Thank you @Twansparant
This was exactly what I was looking for.

Sorry if my question was “dumb”, but I didnt got to understand it was the body classes.

Thank you @cfx too for your time.

Not dumb at all! I wondered the same thing in the past and ended up using if($(’.page-template-template-name’)){} within the page: template once or twice until I figured out the correct naming convention (I’ve obviously stopped using that method!). Glad you got a quick answer.

1 Like

Can I add a jquery plugin inside the init calls? A plugin such as $.fn.functionname = function() {etc…}

For jQuery plugins I think you should use bower.
Putting a jQuery plugin code on the routing does not seem right.