Tools & Tech / November 2015

Custom Bootstrap Menus with Omeka

A month ago, we received a question from University of North Carolina Libraries about our starter Omeka theme—How do you add a Bootstrap dropdown menu in a custom Omeka theme? We decided to tackle this issue via a blog post and update our open source project.

Omeka uses the public_nav_main function here it is in the documentation to control the output. Since Omeka is built using the Zend framework, you get access to all the helpers that you would get with Zend’s navigation menu. Since you’ll need to add classes on more than what they give you, you’ll need to use the setPartial function to build your own HTML output.

$partial = array('menu.phtml', 'default');
$nav = public_nav_main();  // this looks like $this->navigation()->menu() from Zend
$nav->setUlClass('nav navbar-nav')->setPartial($partial);
echo $nav->render();

We added that to a function in the starter theme’s functions.php file to make life easier (so now you can just call public_nav_menu_bootstrap() to get a jumpstart). As for the partial side, that’s slightly more complicated. So, to help out, we added a sample version that allows for pretty Bootstrap dropdowns when you create child pages in your navigation. This file is located in the common directory, menu-partial.phtml:

<ul class="nav nav-pills navbar-left">
    <?php $count = 0 ?>
    <?php foreach ($this->container as $page): ?>
        <?php if( ! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?>
        <?php $hasChildren = $page->hasPages() ?>
        <?php if( ! $hasChildren): ?>
            <li <?php if($page->isActive()) echo 'class="active"'?> role="presentation">
                <a class="nav-header" href="<?php echo $page->getHref() ?>">
                    <?php echo $this->translate($page->getLabel()) ?>
        <?php else: ?>
            <li class="dropdown <?php if($page->isActive()) echo 'active'; ?>" role="presentation">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    <?php echo $this->translate($page->getLabel()) ?>
                    <span class="caret"></span>

                <ul class="dropdown-menu" id="page_<?php echo $count ?>">
                    <?php foreach($page->getPages() as $child): ?>
                        <?php if( ! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?>
                        <li <?php if($child->isActive()) echo 'class="active"'?>>
                            <a href="<?php echo $child->getHref() ?>">
                                <?php echo $this->translate($child->getLabel()) ?>
                    <?php endforeach ?>
        <?php endif; ?>
        <?php $count++ ?>
    <?php endforeach; ?>

This partial gets called by Zend and walks through building the navigation—first, each top level page, and if it has child pages each page below it. If you’re doing something custom, it should be easy to manipulate or create your own walker for your project!

If you haven’t checked out our Omeka starter theme, fork it now and start your own project!