Custom Template Data

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>
</div>

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.