Sidebars

So you want a sidebar?

Method 1: PHP file

Let’s say every page on the site has the same content going into its sidebar. If so, you would: Create a sidebar.php file in your theme directory (so wp-content/themes/mytheme/sidebar.php)

<?php
/* sidebar.php */
$context = array();
$context['widget'] = my_function_to_get_widget();
$context['ad'] = my_function_to_get_an_ad();
Timber::render('sidebar.twig', $context);
  • Use that php file within your main php file (home.php, single.php, archive.php, etc):

    <?php
    /* single.php */
    $context = Timber::context();
    $context['sidebar'] = Timber::get_sidebar('sidebar.php');
    Timber::render('single.twig', $context);
    
  • In the final twig file make sure you reserve a spot for your sidebar:

    {# single.twig #}
    <aside class="sidebar">
    	{{sidebar}}
    </aside>
    

Method 2: Twig file

In this example, you would populate your sidebar from your main PHP file (home.php, single.php, archive.php, etc).

  • Make a Twig file for what your sidebar should be:

    {# views/sidebar-related.twig #}
    <h3>Related Stories</h3>
    {% for post in related %}
    	<h4><a href="{{post.get_path}}">{{post.post_title}}</a></h4>
    {% endfor %}
    
  • Send data to it via your main PHP file:

    <?php
    /* single.php */
    $context = Timber::context();
    $post = new Timber\Post();
    $post_cat = $post->get_terms('category');
    $post_cat = $post_cat[0]->ID;
    $context['post'] = $post;
    
    $sidebar_context = array();
    $sidebar_context['related'] = Timber::get_posts('cat='.$post_cat);
    $context['sidebar'] = Timber::get_sidebar('sidebar-related.twig', $sidebar_context);
    Timber::render('single.twig', $context);
    
  • In the final twig file, make sure you have spot for your sidebar:

    {# single.twig #}
    <aside class="sidebar">
    	{{sidebar}}
    </aside>
    

Method 3: Dynamic

This is using WordPress’s built-in dynamic_sidebar tools (which, confusingly, are referred to as “Widgets” in the interface). Since sidebar is already used; I used widgets in the code to describe these:

<?php
$context = array();
$context['dynamic_sidebar'] = Timber::get_widgets('dynamic_sidebar');
Timber::render('sidebar.twig', $context);
<aside class="my-sidebar">
{{dynamic_sidebar}}
</aside>