Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Adding multi-level menu's with Timber

I am not familiar with Timber – in-fact this is the first time I’ve ever heard of it, but I’m helping a charity out who’s web developer have left them in the lurch.

I’ve worked most things out – except getting sub-menu’s working.

When items are added to the sub-menu location in WordPress, they are appearing on the same level on the main menu.

Was wondering if someone could help me out?

Code is below for the various “twigs” – but let me know if you need the functions code as well to help out.

menu.twig:

    {% for item in menu %}
        <li class="{{ prefix }}__li {{ item.classes | join(' ') }}">
                <a class="{{ prefix }}__a" target="{{ item.target }}" href="{{ item.link }}"><span>{{ item.title }}</span></a>
                {% include "menu.twig" with {'menu': item.get_children} %}
        </li>
    {% endfor %}
{% endif %}

header.twig

<header class="header">
    <div class="header__secondary">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <nav class="header__nav nav-secondary">
                        <ul class="nav-secondary__ul">
                            {% include "menu.twig" with {
                                'menu': menu.header_secondary.items,
                                'prefix': 'nav-secondary'
                            } %}
                            <li class="nav-secondary__li nav-secondary__li--cart">
                                <a class="nav-secondary__a cart-customlocation" href="{{ cart_url }}"></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="header__primary">
        {% block header %}
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 col-md-2">
                        <a href="/" class="header__logo">
                            <img src="{{ site.theme.link }}/dist/img/logo.jpg" alt="{{ site.name }} Logo">
                        </a>
                    </div>
                    <div class="col-xs-6 col-md-10">
                        <nav class="header__nav nav" role="navigation">
                            <ul class="nav__ul">
                                {% include "menu.twig" with {
                                    'menu': menu.header_primary.items,
                                    'prefix': 'nav'
                                } %}
                            </ul>
                        </nav>
                        <div class="hamburger hamburger--spring">
                            <div class="hamburger-box">
                                <div class="hamburger-inner"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endblock %}
    </div>
</header>

functions.php

<?php
/**
 * Timber starter-theme
 * https://github.com/timber/starter-theme
 *
 * @package  WordPress
 * @subpackage  Timber
 * @since   Timber 0.1
 */

if ( ! class_exists( 'Timber' ) ) {
    add_action( 'admin_notices', function() {
        echo '<div class="error"><p>Timber not activated. Make sure you activate the plugin in <a href="' . esc_url( admin_url( 'plugins.php#timber' ) ) . '">' . esc_url( admin_url( 'plugins.php' ) ) . '</a></p></div>';
    });

    add_filter('template_include', function( $template ) {
        return get_stylesheet_directory() . '/static/no-timber.html';
    });

    return;
}

Timber::$dirname = array('views');
Timber::$autoescape = false;


/**
 * We're going to configure our theme inside of a subclass of TimberSite
 * You can move this to its own file and include here via php's include("MySite.php")
 */
class StarterSite extends TimberSite {
    /** Add timber support. */
    public function __construct() {
        add_action( 'after_setup_theme', array( $this, 'theme_supports' ) );
        add_filter( 'timber_context', array( $this, 'add_to_context' ) );
        add_filter( 'get_twig', array( $this, 'add_to_twig' ) );
        add_action( 'init', array( $this, 'register_post_types' ) );
        add_action( 'init', array( $this, 'register_taxonomies' ) );

        add_action( 'wp_enqueue_scripts', [$this, 'load_scripts'] );
        parent::__construct();

        register_nav_menu('header-secondary', 'Header Secondary');
        register_nav_menu('header-primary', 'Header Primary');

        remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0); // kill woo breadcrumbs
        remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_catalog_ordering', 30 ); // kill woo sorting
        remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_result_count', 20 ); // kill woo # results
        add_filter( 'woocommerce_add_to_cart_fragments', [$this, 'woocommerce_header_add_to_cart_fragment']);

        add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
            return array(
            'width' => 400,
            'height' => 400,
            'crop' => 0,
            );
        });


        add_action( 'after_setup_theme', function() {
            add_theme_support( 'woocommerce' );
        } );
    }

    /** This is where you can register custom post types. */
    public function register_post_types() {

        $name = "adoption";
        $singular = "Adoption";
        $plural = "Adoptions";

        $labels = array(
            'name' => _x("$plural", 'en'),
            'singular_name' => _x("$singular", 'en'),
            'all_items' => "All $plural",
            'add_new' => _x("Add New $singular", 'en'),
            'add_new_item' => _x("Add New $singular", 'en'),
            'edit_item' => _x("Edit $singular", 'en'),
            'new_item' => _x("New $singular", 'en'),
            'view_item' => _x("View $singular", 'en'),
            'search_items' => _x("Search $plural", 'en'),
            'not_found' => _x("No $singular found", 'en'),
            'not_found_in_trash' => _x("No $singular found in Trash", 'en'),
            'parent_item_colon' => _x("Parent $singular:", 'en'),
            'menu_name' => _x("$plural", 'en'),
        );

        $args = array(
            'labels' => $labels,
            'hierarchical' => false,
            'description' => $plural,
            'supports' => array(
                'title',
                'editor',
                'thumbnail',
                'revisions'
            ),
            'taxonomies' => ['adoption_type'],
            'public' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'menu_position' => 4,
            'menu_icon' => 'dashicons-welcome-view-site',
            'show_in_nav_menus' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'has_archive' => true,
            'query_var' => true,
            'can_export' => true,
            'rewrite' => true,
            'capability_type' => 'post'
        );

        register_post_type($name, $args);


        $name = "event";
        $singular = "Event";
        $plural = "Events";

        $labels = array(
            'name' => _x("$plural", 'en'),
            'singular_name' => _x("$singular", 'en'),
            'all_items' => "All $plural",
            'add_new' => _x("Add New $singular", 'en'),
            'add_new_item' => _x("Add New $singular", 'en'),
            'edit_item' => _x("Edit $singular", 'en'),
            'new_item' => _x("New $singular", 'en'),
            'view_item' => _x("View $singular", 'en'),
            'search_items' => _x("Search $plural", 'en'),
            'not_found' => _x("No $singular found", 'en'),
            'not_found_in_trash' => _x("No $singular found in Trash", 'en'),
            'parent_item_colon' => _x("Parent $singular:", 'en'),
            'menu_name' => _x("$plural", 'en'),
        );

        $args = array(
            'labels' => $labels,
            'hierarchical' => false,
            'description' => $plural,
            'supports' => array(
                'title',
                'editor',
                'thumbnail',
                'revisions'
            ),
            'public' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'menu_position' => 4,
            'menu_icon' => 'dashicons-welcome-view-site',
            'show_in_nav_menus' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'has_archive' => true,
            'query_var' => true,
            'can_export' => true,
            'rewrite' => true,
            'capability_type' => 'post'
        );

        register_post_type($name, $args);

        if(function_exists('acf_add_options_page')) {
            acf_add_options_page([
                'page_title'    => 'Theme Content',
                'menu_title'    => 'Theme Content',
                'menu_slug'     => 'theme-content',
                'capability'    => 'edit_posts',
                'redirect'      => false
            ]);
        }

        if(function_exists('acf_add_options_page')) {
            acf_add_options_page([
                'page_title'    => 'Donation Settings',
                'menu_title'    => 'Donation Settings',
                'menu_slug'     => 'donation-settings',
                'capability'    => 'edit_posts',
                'redirect'      => false
            ]);
        }

    }
    /** This is where you can register custom taxonomies. */
    public function register_taxonomies() {

        $labels = array(
            'name'                       => 'Adoption Types',
            'singular_name'              => 'Adoption Type',
            'menu_name'                  => 'Adoption Type'
        );

        $rewrite = array(
            'slug'                       => 'adoptions',
            'with_front'                 => true,
            'hierarchical'               => false,
        );

        $args = array(
            'labels'                     => $labels,
            'hierarchical'               => true,
            'public'                     => true,
            'show_ui'                    => true,
            'show_admin_column'          => true,
            'show_in_nav_menus'          => true,
            'show_tagcloud'              => false,
            'rewrite'                    => $rewrite,
        );

        register_taxonomy( 'adoption_type', 'adoption', $args );

    }

    public function load_scripts() {
        wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/dist/css/main.min.css' );
        wp_enqueue_script('slick-js', get_stylesheet_directory_uri() . '/dist/js/plugins/slick.min.js', 'jquery', false, true);
        wp_enqueue_script('main-js', get_stylesheet_directory_uri() . '/dist/js/main.js', ['jquery', 'slick-js'], false, true);
    }

    /** This is where you add some context
     *
     * @param string $context context['this'] Being the Twig's {{ this }}.
     */
    public function add_to_context( $context ) {

        $context['options'] = get_fields('options');

        $context['menu']['header_primary'] = new TimberMenu('header-primary');
        $context['menu']['header_secondary'] = new TimberMenu('header-secondary');

        $context['shop_url'] = get_permalink(woocommerce_get_page_id('shop' ));

        $context['site'] = $this;


        if (get_the_ID()) {
            // load page modules
            require_once('src/modules.php');
        }

        return $context;
    }

    public function theme_supports() {
        // Add default posts and comments RSS feed links to head.
        add_theme_support( 'automatic-feed-links' );

        /*
         * Let WordPress manage the document title.
         * By adding theme support, we declare that this theme does not use a
         * hard-coded <title> tag in the document head, and expect WordPress to
         * provide it for us.
         */
        add_theme_support( 'title-tag' );

        /*
         * Enable support for Post Thumbnails on posts and pages.
         *
         * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
         */
        add_theme_support( 'post-thumbnails' );

        /*
         * Switch default core markup for search form, comment form, and comments
         * to output valid HTML5.
         */
        add_theme_support(
            'html5', array(
                'comment-form',
                'comment-list',
                'gallery',
                'caption',
            )
        );

        /*
         * Enable support for Post Formats.
         *
         * See: https://codex.wordpress.org/Post_Formats
         */
        add_theme_support(
            'post-formats', array(
                'aside',
                'image',
                'video',
                'quote',
                'link',
                'gallery',
                'audio',
            )
        );

        add_theme_support( 'menus' );
    }

    /** This Would return 'foo bar!'.
     *
     * @param string $text being 'foo', then returned 'foo bar!'.
     */
    public function myfoo( $text ) {
        $text .= ' bar!';
        return $text;
    }

    /** This is where you can add your own functions to twig.
     *
     * @param string $twig get extension.
     */
    public function add_to_twig( $twig ) {
        $twig->addExtension( new Twig_Extension_StringLoader() );
        $twig->addFilter( new Twig_SimpleFilter( 'myfoo', array( $this, 'myfoo' ) ) );
        return $twig;
    }

    function woocommerce_header_add_to_cart_fragment( $fragments ) {
        global $woocommerce;

        ob_start();

        ?>
        <a class="cart-customlocation" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
        <?php

        $fragments['a.cart-customlocation'] = ob_get_clean();

        return $fragments;
    }

}

new StarterSite();

EDIT: Based on feedback received, the menu.twig code is as follows – however, not showing any menus now:

{% if items|default(menu.items) %}
<ul>
   {% for item in items|default(menu.items) %}
        <li class="{{ prefix }}__li {{ item.classes | join(' ') }}">
            <a class="{{ prefix }}__a" target="{{ item.target }}" href="{{ item.link }}"><span>{{ item.title }}</span></a>
            {% include "menu.twig" with {'menu': item.get_children} %}
        </li>
    {% endfor %}
</ul>
{% endif %}

EDIT 2: Below is header.twig as there’s some more menu stuff in there…

<header class="header">
    <div class="header__secondary">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <nav class="header__nav nav-secondary">
                        <ul class="nav-secondary__ul">
                            {% include "menu.twig" with {
                                'menu': menu.menu_header_secondary.items,
                                'prefix': 'nav-secondary'
                            } %}
                            <li class="nav-secondary__li nav-secondary__li--cart">
                                <a class="nav-secondary__a cart-customlocation" href="{{ cart_url }}"></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="header__primary">
        {% block header %}
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 col-md-2">
                        <a href="/" class="header__logo">
                            <img src="{{ site.theme.link }}/dist/img/logo.jpg" alt="{{ site.name }} Logo">
                        </a>
                    </div>
                    <div class="col-xs-6 col-md-10">
                        <nav class="header__nav nav" role="navigation">
                            <ul class="nav__ul">
                                {% include "menu.twig" with {
                                    'menu': menu.menu_header_primary.items,
                                    'prefix': 'nav'
                                } %}
                            </ul>
                        </nav>
                        <div class="hamburger hamburger--spring">
                            <div class="hamburger-box">
                                <div class="hamburger-inner"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endblock %}
    </div>
</header>

EDIT 3 – current config after @Gchtr input and getting the correct menus to display in the correct locations. Still no sub-menus:

menu.twig:

{% set items = items|default(menu.items) %}

{% if items %}
<ul>
    {% for item in items %}
        <li class="{{ prefix }}__li {{ item.classes | join(' ') }}">
            <a class="{{ prefix }}__a" target="{{ item.target }}" href="{{ item.link }}"><span>{{ item.title }}</span></a>
            {% if item.children %}
                {% include "menu.twig" with { items: item.children } %}
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endif %}

header.twig:

<header class="header">
    <div class="header__secondary">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <nav class="header__nav nav-secondary">
                        <ul class="nav-secondary__ul">
                            {% include "menu.twig" with {
                                'menu': menu_header_secondary,
                                'prefix': 'nav-secondary'
                            } %}
                            <li class="nav-secondary__li nav-secondary__li--cart">
                                <a class="nav-secondary__a cart-customlocation" href="{{ cart_url }}"></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="header__primary">
        {% block header %}
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 col-md-2">
                        <a href="/" class="header__logo">
                            <img src="{{ site.theme.link }}/dist/img/logo.jpg" alt="{{ site.name }} Logo">
                        </a>
                    </div>
                    <div class="col-xs-6 col-md-10">
                        <nav class="header__nav nav" role="navigation">
                            <ul class="nav__ul">
                                {% include "menu.twig" with {
                                    'menu': menu_header_primary,
                                    'prefix': 'nav'
                                } %}
                            </ul>
                        </nav>
                        <div class="hamburger hamburger--spring">
                            <div class="hamburger-box">
                                <div class="hamburger-inner"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endblock %}
    </div>
</header>

functions.php (snippet of the Header Stuff instead of the whole lot):

        public function add_to_context( $context ) {

        $context['options'] = get_fields('options');

                $context['menu_header_primary']   = new TimberMenu( 'header-primary' );
                $context['menu_header_secondary'] = new TimberMenu( 'header-secondary') ;

        $context['shop_url'] = get_permalink(woocommerce_get_page_id('shop' ));

                $context['site'] = $this;
Tags:

3

Answers


  1. 0

    it looks like you are missing <ul></ul> wrapper or you haven’t posted the code in the entire:

    {% if menu %}
    <ul>
    {% for item in menu %}
        <li class="{{ prefix }}__li {{ item.classes | join(' ') }}">
            <a class="{{ prefix }}__a"  target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
            {% include "menu.twig" with {'items': item.children} %}
        </li>
    {% endfor %}
    </ul>
{% endif %}
    Login or Signup to reply.
  2. 0

    In your StarterSite class in the add_to_context() method, you’re adding your menus like so:

    $context['menu']['header_primary'] = new TimberMenu('header-primary');
$context['menu']['header_secondary'] = new TimberMenu('header-secondary');

    When you now want to use access menu.items in your Twig, that doesn’t work, because you don’t access the nested value. It should be menu.header_primary.items. To simplify this, I’d change that to use separate context entries:

    $context['menu_header_primary']   = new TimberMenu( 'header-primary' );
$context['menu_header_secondary'] = new TimberMenu( 'header-secondary') ;

    Then, for your Twig file, you’ll always need to pass a menu variable.

    {% set items = items|default(menu.items) %}

{% if items %}
<ul>
    {% for item in items %}
        <li class="{{ prefix }}__li {{ item.classes | join(' ') }}">
            <a class="{{ prefix }}__a" target="{{ item.target }}" href="{{ item.link }}"><span>{{ item.title }}</span></a>
            {% if item.children %}
                {% include "menu.twig" with { items: item.children } %}
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endif %}

    Edit

    In your header.twig, you’ll need to remove the nesting from menu include as well (menu_header_primary.items instead of menu.menu_header_primary.items. Otherwise, Timber will the take the first menu it can find.

    <nav class="header__nav nav" role="navigation">
    <ul class="nav__ul">
        {% include "menu.twig" with {
            menu: menu_header_primary,
            prefix: 'nav'
        } %}
    </ul>
</nav>
    Login or Signup to reply.
  3. 0

    Function.php

    /**
     * Regsiter Nav Menus
     */
    public function theme_register_nav_menus() {
        register_nav_menus( array(
            'primary_menu' => esc_html__( 'Primary Menu', 'themenamehere' ),
            'secondary_menu' => esc_html__( 'Secondary Menu', 'themenamehere' ),
        ) );        
    }

    /** This is where you add some context
     *
     * @param string $context context['this'] Being the Twig's {{ this }}.
     */
    public function add_to_context( $context ) {
        $context['menu']  = new TimberMenu();
        $context['secondaryMenu']  = new TimberMenu('secondary_menu');
        $context['site']  = $this;
        return $context;
    }

    Menu.twig

    {% if menu %}
    <ul>
        {% for item in items %}
            <li class="{{ item.classes | join(' ')}}">
                {# <a target="{{ item.target}}" href="{{ item.link}}">{{ item.title}}</a> #}
                <a target="_self" href="{{ item.link}}">{{ item.title}}</a>
                {% include "menu.twig" with{'items':item.children} %}
            </li>
        {% endfor %}
    </ul>
{% endif %}

    After that include that file inside Twig file bascically in base.twig file:

    For Primary Menu Code looks like:

    {% include "menu.twig" with{'items':menu.get_items} %}

    For Secondary Menu Code looks like:

    {% include "menu.twig" with{'items':secondaryMenu.get_items} %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search