Timber/ Twig - Trying to include sidebar content as part of my footer

Question

I'm hoping somebody with more experience using timber can help me? I'm trying to create a Wordpress theme using timber/ twig and I want to be able to include yelp reviews in the footer on every page within the site.

I've got the following files:

sidebar.twig

<!-- Review and contact button Section -->
{% if sidebar %}
    <section class="reviewSection">
        <div class="review__container">
            {{sidebar.text}}
        </div>
    </section>
{% endif %}

footer.twig

{% include('templates/_embeds/_sidebar.twig') %}
<!-- Footer -->
<footer>
    {# <div class="footer__contact">
        <div class="FooterCTABox">
            <a class="cta--contact FooterCTA"href="{{site.url.path}}/contact">Book Now</a>
            <a class="cta--phone FooterCTA"href="tel:080979767645">Call Us</a>
        </div>
    </div> #}
    <div class="footer__main">
        <div class="main__container">
            <div class="main__addressCol footerCol">
                <h4>Get in touch</h4>
                <div class="footerCol__content footerCol__content--address">
                    <p><span>1 Address Blvd<br />place<br />San Diego<br />Zipcode</span><br /><span class="address__contact"tel: <a href="">0880009123123</a></span><br /><span class="address__contact"email: <a href="">[email protected]</a></span></p>
                </div>
            </div>
            <div class="main__linkCol footerCol">
                <h4>Links</h4>
                <div class="footerCol__content">
                    <ul>
                        <a href="{{site.theme.path}}/faqs"><li>FAQS</li></a>
                        <a href="{{site.theme.path}}/blog"><li>Blog</li></a>
                        <a href="{{site.theme.path}}/gallery"><li>Gallery</li></a>
                        <a href="{{site.theme.path}}/events"><li>Events</li></a>
                        <a href="{{site.theme.path}}/contact"><li>Contact</li></a>
                    </ul>
                </div>
            </div>
            <div class="main__socialCol footerCol">
                <h4>Follow us</h4>
                <div class="footerCol__content footerCol__content--social">
                    <ul>
                        <a href=""><li>Facebook</li></a>
                        <a href="<li>Instagram</li></a>
                        <a href=""><li>Yelp</li></a>
                    </ul>
                </div>
            </div>
            <div class="main__logoCol footerCol">
                <picture>
                    <img src="{{site.theme.path}}/images/logo-text-sm.png" alt="Logo" />
                </picture>
          
            </div>
        </div>
    </div>
    <div class="footer__end">
        <div class="end__links">
            <ul>
                <li class="end__date">{{ "now"|date("Y") }} &#169; {{ site.name }}</li>
                <a href="{{site.url}}/terms" class="end__links__link"><li>Terms &amp; Conditions</li></a>
                <li class="web">Website Designed &amp; managed by - <a href="#" class="end__links__link">Web Design</a></li>
            <ul>
        </div>
    </div>
</footer>
<script type="text/javascript" src="{{site.theme.path}}/scripts/script.js"></script>
</body>
</html>

sidebar.php

<?php
/* sidebar.php */
$context = array();
$context['sidebar'] = Timber::get_sidebar('Primary Sidebar');
Timber::render('/templates/_embeds/_sidebar.twig', $context);

sidebar.scss

.reviewSection {
    background-color: #fff;
    height: auto;
    min-height: 200px;
    @include flex(center, center, row);
    @media (max-width: $mobileScreen) {
        margin-top: 30px;
    }
    .review__container {
        margin: auto;
        width: 70%;
        height: 25%;
        min-height: 150px;
        background-color: #d32323; // to be removed once the actual yelp plugin is in there.
        @include flex(center, center, row);
        h3 {
            color: $textPrimary;
        }
        @media (max-width: $tabletScreen) {
            width: 90%;
            margin: 0;
        }
    }
}

And within Wordpress I've created a widget that is currently using the Yelp review plugin.

The issue I'm getting is that when I run the code, the sidebar HTML shows, but not the actual sidebar content from the plugin. I just get the big red placeholder box with no content. I've also included the sidebar screenshot from Wordpress itself in case that's useful and I've done something wrong there.

Would be very grateful for any help anyone has. I've tried searching for a few days to get the answer and I'm just not sure what's going wrong.

Many thanks

Also, if there's an easier way to do it, ie. what I've done has made things more complicated than it needs to be, just let me know. This is my first time using Timber and WP so I appreciate any help people can give. Thanks — Thomas Hewitt

Karolína Vyskočilová Karolína Vyskočilová · Accepted Answer · 2021-02-06T16:15:47

You don't need sidebar.php (since you're loading it via twig already) and you need to load sidebar content into context globally to be loaded whenever you need it.

Move this line:

$context['sidebar'] = Timber::get_sidebar('Primary Sidebar');

Same as the menu here: https://timber.github.io/docs/guides/menus/#setting-up-a-menu-globally

They are other ways around but I like the top one best. But if you want to have a look on multiple options go and check the official documentation for sidebars.

Timber/ Twig - Trying to include sidebar content as part of my footer

1 Answers