Adding multi-level menu's with Timber - wordpress

Question

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 ' . esc_url( admin_url( 'plugins.php' ) ) . '</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 Timber\Site
* You can move this to its own file and include here via php's include("MySite.php")
*/
class StarterSite extends Timber\Site {
/** 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 Timber\Menu('header-primary');
$context['menu']['header_secondary'] = new Timber\Menu('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 Timber\Menu( 'header-primary' );
$context['menu_header_secondary'] = new Timber\Menu( 'header-secondary') ;
$context['shop_url'] = get_permalink(woocommerce_get_page_id('shop' ));
$context['site'] = $this;

Answer 1

In your StarterSite class in the add_to_context() method, you’re adding your menus like so:
$context['menu']['header_primary'] = new Timber\Menu('header-primary');
$context['menu']['header_secondary'] = new Timber\Menu('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 Timber\Menu( 'header-primary' );
$context['menu_header_secondary'] = new Timber\Menu( '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>

Answer 2

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 Timber\Menu();
$context['secondaryMenu'] = new Timber\Menu('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} %}

Answer 3

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 %}