Each template has a pre-defined set of variables passed to it by core. You can also pass your own custom params (variables or functions) to templates by using the template-args filter:

Pass additional data to all templates

For example to pass a “user_is_logged_in” variable to all templates in your theme:

//In functions.js or any custom js module.
//Here we assume that the authentication module (Auth) is included.
App.filter( 'template-args', function( template_args ) { 
	template_args.user_is_logged_in = Auth.userIsLoggedIn();
	return template_args;
} );

Then you can test if a user is logged in in your templates using the “user_is_logged_in” variable:

//For example in single.html template:
<h1>My post title</h1>
<% if ( user_is_logged_in ){ %>
    <%= post.content %>
<% } else { %>
    <p>Please log in to view post content</p>
<% } %>

Pass additional data to a chosen template

To pass custom data stored in local storage (under the “my-data” key, using the PersistentStorage module) to the “my-custom-template.html” template:

App.filter( 'template-args', function( template_args, view_type, view_template ) {
    //Here we assume that the PersistentStorage module is included.
    if ( view_template === 'my-custom-template') { //Don't need .html here
        template_args.my_custom_data = PersistentStorage.get( 'my-data' );
    return template_args;
} );

Then to use our custom data in “my-custom-template.html” template:

My first key value: <%= my_custom_data.first_key %>

Pass functions to templates

To pass a date formatting function to single, page and archive templates:

//In functions.js

//Define our date formatting function:
//(Here we suppose that the Moment.js lib has been included)
function format_date_using_moment_js( post_date ) {
	var gmt_offset = Config.gmt_offset * 3600;
	var moment_post_date = Moment( new Date( ( post_date - gmt_offset ) * 1000 ) );
	return moment_post_date.format( 'MMMM Do YYYY' );

//Then pass this function to single, page and archive templates using the "template-args" filter:
App.filter( 'template-args', function( template_args, view_type, view_template ) {
        if (view_type === 'single' || view_type === 'page' || view_type === 'archive') {
                template_args.format_date = format_date_using_moment_js;
        return template_args;
} );

Then use our format_date function in templates:

<div class="post-meta">
        By <span class="post-author"><%= post.author %></span><span class="post-publish-date"><%= format_date( post.date ) %></span>

To Know More

More on “template-args” filter here.

General notions about templates can be found in the “Template Files” section of the doc.

Also see the tutorial about customizing templates.

Published by Mathieu on January 5, 2017

Freelance Senior Web Developer, WordPress since 2009, JS/Backbone since 2012, Custom Back-End devs, WebApps and Plugins for clients and the community.

Leave a Reply

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

Having questions?

FAQ | Tutorials | Documentation


Contact Us