Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twitter Botstrap Dropdown Navigation vs WordPress
<?php
/*
*
* Adding bootstrap support on menu items by menu walker.
*
* @Author: Jewel Ahmed
* @Author Web: http://codeatomic.com
* @Last Updated: 14 Oct, 2014
*/
if ( !class_exists( 'Mondira_Bootstrap_Walker' ) ) {
class Mondira_Bootstrap_Walker extends Walker_Nav_Menu {
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
if ( !empty( $args ) && is_object( $args ) && $args->has_children ) {
$class_names = "dropdown ";
}
$classes = empty( $object->classes ) ? array() : (array) $object->classes;
$class_names .= join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $object ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $object->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $object->attr_title ) ? ' title="' . esc_attr( $object->attr_title ) .'"' : '';
$attributes .= ! empty( $object->target ) ? ' target="' . esc_attr( $object->target ) .'"' : '';
$attributes .= ! empty( $object->xfn ) ? ' rel="' . esc_attr( $object->xfn ) .'"' : '';
$attributes .= ! empty( $object->url ) ? ' href="' . esc_attr( $object->url ) .'"' : '';
if ( !empty( $args ) && is_object( $args ) && $args->has_children ) {
$attributes .= ' class="dropdown-toggle" data-toggle="dropdown"';
}
if ( !empty( $args ) && is_object( $args ) && $args->before ) {
$item_output = $args->before;
} else {
$item_output = '';
}
$item_output .= '<a'. $attributes .'>';
if ( !empty( $args ) && is_object( $args ) && $args->link_before ) {
$item_output .= $args->link_before;
}
$item_output .= apply_filters( 'the_title', $object->title, $object->ID );
if ( !empty( $args ) && is_object( $args ) && $args->link_after ) {
$item_output .= $args->link_after;
}
if ( !empty( $args ) && is_object( $args ) && $args->has_children ) {
$item_output .= '<span class="caret"></span></a>';
} else {
$item_output .= '</a>';
}
if ( !empty( $args ) && is_object( $args ) && $args->after ) {
$item_output .= $args->after;
}
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $object, $depth, $args );
}
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\" role=\"menu\">\n";
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
}
}
/*
---------------------------------------------------------------------------------------
Adding wp_nav_menu_container_allowedtags allowed tags for menu container
@Author: Jewel Ahmed
@Author Web: http://codeatomic.com
@Last Updated: 09 Nov, 2014
---------------------------------------------------------------------------------------
*/
add_filter('wp_nav_menu_container_allowedtags', 'mondira_wp_nav_menu_container_allowedtags', 10, 2 );
function mondira_wp_nav_menu_container_allowedtags( $tags ) {
//$allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );
//see wp-includes/nav-menu-template.php
$tags[] = 'ul';
return $tags;
}
/*
---------------------------------------------------------------------------------------
Adding wp_page_menu Alternative fallback_cb for default wp_nav_menu
This fallback_cb is supposed to be used only when no menu already created by the admin user
THIS one only supposed to work for bootstrap navbar.
@Author: Jewel Ahmed
@Author Web: http://codeatomic.com
@Last Updated: 09 Nov, 2014
---------------------------------------------------------------------------------------
*/
function mondira_wp_page_menu( $args = array() ) {
$defaults = array('sort_column' => 'menu_order, post_title', 'menu_class' => 'menu', 'echo' => true, 'link_before' => '', 'link_after' => '');
$args = wp_parse_args( $args, $defaults );
$args = apply_filters( 'wp_page_menu_args', $args );
$menu = '';
$list_args = $args;
if ( ! empty($args['show_home']) ) {
if ( true === $args['show_home'] || '1' === $args['show_home'] || 1 === $args['show_home'] )
$text = __('Home');
else
$text = $args['show_home'];
$class = '';
if ( is_front_page() && !is_paged() )
$class = 'class="active"';
$menu .= '<li ' . $class . '><a href="' . home_url( '/' ) . '">' . $args['link_before'] . $text . $args['link_after'] . '</a></li>';
if (get_option('show_on_front') == 'page') {
if ( !empty( $list_args['exclude'] ) ) {
$list_args['exclude'] .= ',';
} else {
$list_args['exclude'] = '';
}
$list_args['exclude'] .= get_option('page_on_front');
}
}
$list_args['echo'] = false;
$list_args['title_li'] = '';
$menu .= str_replace( array( "\r", "\n", "\t" ), '', wp_list_pages($list_args) );
$menu = str_replace( array( "current_page_item", "page_item_has_children", "children", "sub-menu" ), array( "active", "dropdown", "dropdown-menu", "dropdown-menu" ), $menu );
if ( $menu )
$menu = '<ul class="' . esc_attr($args['menu_class']) . '">' . $menu . '</ul>';
$menu = apply_filters( 'wp_page_menu', $menu, $args );
if ( $args['echo'] )
echo $menu;
else
return $menu;
}
?>
@tojibon

This comment has been minimized.

Copy link
Owner Author

@tojibon tojibon commented Nov 9, 2014

HTML:

<div id="navbar" class="navbar-collapse collapse">
    <?php 
    $has_enabled_main_menu = false; 
    $menu_location = 'primary';
    $menu_locations = get_nav_menu_locations();
    $menu_object = ( isset( $menu_locations[ $menu_location ] ) ? wp_get_nav_menu_object( $menu_locations[ $menu_location ] ) : null );
    if( $menu_object ) {
        $has_enabled_main_menu = true;
    }

    if( $has_enabled_main_menu ) { 
        wp_nav_menu( 
            array( 
                'theme_location'  => 'primary',
                'menu_class'      => 'nav navbar-nav navbar-right',
                'menu_id'         => 'primary-menu',
                'walker'          => new Mondira_Bootstrap_Walker,
                'depth'           => 3
            )
        );
    } else {
        wp_nav_menu( 
            array( 
                'menu_class'      => 'nav navbar-nav navbar-right',
                'menu_id'         => 'primary-menu',
                'fallback_cb'     => 'mondira_wp_page_menu',
                'depth'           => 3
            )
        );
    }
    ?>
</div>
@tojibon

This comment has been minimized.

Copy link
Owner Author

@tojibon tojibon commented Nov 9, 2014

JS:

/*
---------------------------------------------------------------------------------------
    jQuery Initializing JavaScripts
---------------------------------------------------------------------------------------
*/
jQuery(function () {

    /*
    ---------------------------------------------------------------------------------------
        Main menu adjustment for twitter bootstrap dropdown menu
    ---------------------------------------------------------------------------------------
    */
    jQuery('.nav .dropdown').each( function(){
        jQuery(this).find('> a').addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
        if ( jQuery(this).find('> a').find('span.caret').length <= 0 ) {
            jQuery(this).find('> a').append('<span class="caret"></span>');
        }
        jQuery(this).find('> ul.sub-menu').removeClass('sub-menu').addClass('dropdown-menu');
    } );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment