Passing Variables

You may be required to access page-level variables from the parent page/post inside an Ajax Load More Repeater Template. This sounds like a simple task, however page level variables will be undefined when being called from within an Ajax request.

To get around this limitation, Ajax Load More provides a vars parameter that passes variables from a page template into a Repeater Template.

In the following example, page-level variables are being defined in the page template and passed to Ajax Load More via the vars shortcode parameter. Variables are then accessed from the $args array in the Repeater Template.

Page Template

In the page template, before the [ajax_load_more] shortcode we define page variables and then pass the variables to Ajax Load More via the vars shortcode parameter.

<?php 
/**
 * Template Name: ALM Passing Variables
 */
?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   <?php the_title( '<h1>', '</h1>'); ?>
   <?php
      $theme_color = 'blue'; // Page theme color. 
      $parent_id = $post->ID; // Current page ID.
      echo do_shortcode(' [ajax_load_more vars="theme_color:' . $theme_color . ';parent_id:' . $parent_id . '"]' ); 
   ?>
<?php endwhile; endif; ?>  
<?php get_footer(); ?>

Repeater Template

Repeater Templates have access to an $args array containing query data and other Ajax Load More related information by default. Variables passed from the page template using the vars parameter can be accessed under the alm_vars array key as shown below.

<?php
	// [ajax_load_more vars="theme_color:blue;parent_id:1926"]
	$vars = isset( $args ) && $args['alm_vars'] ? $args['alm_vars'] : ''; // Get `alm_vars`. 
?>
<div class="columns post-parent-<?php echo esc_html( $vars['parent_id'] ); ?>">
	<h3>
		<a href="<?php the_permalink(); ?>" class="<?php echo $vars['theme_color']; ?>"><?php the_title(); ?></a>
	</h3>
	<p>Written by: <?php the_author_link(); ?></p>
	<?php the_excerpt(); ?> 
</div>

Array Example ($args)

When passing variables using the vars parameter, the returned $args array will look like the following code sample. Notice the alm_vars array key, this array key contains the variable data that was passed to Ajax Load More.

Array
(
    [post_type] => Array
        (
            [0] => post
        )

    [posts_per_page] => 5
    [offset] => 0
    [order] => DESC
    [orderby] => date
    [post_status] => publish
    [ignore_sticky_posts] => 1
    [alm_vars] => Array
        (
            [theme] => blue
            [parent_id] => 1926
        )

    [alm_id] => default
)

« Back to Code Samples