Skip to content

Instantly share code, notes, and snippets.

@donchenko
Created November 9, 2016 11:51
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donchenko/4ac5f1380ae687f11bfd13f379531f60 to your computer and use it in GitHub Desktop.
Save donchenko/4ac5f1380ae687f11bfd13f379531f60 to your computer and use it in GitHub Desktop.
Wordpress custom Walker for Bootstraping menu and wp_list_pages
// Add custom walker to functions.php
class BS_Page_Walker extends Walker_Page {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class='dropdown-menu' role='menu'>\n";
}
public function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
if ( $depth ) {
$indent = str_repeat( "\t", $depth );
} else {
$indent = '';
}
$css_class = array( 'page_item', 'page-item-' . $page->ID );
if ( isset( $args['pages_with_children'][ $page->ID ] ) ) {
$css_class[] = 'page_item_has_children';
}
if ( ! empty( $current_page ) ) {
$_current_page = get_post( $current_page );
if ( in_array( $page->ID, $_current_page->ancestors ) ) {
$css_class[] = 'current_page_ancestor';
}
if ( $page->ID == $current_page ) {
$css_class[] = 'current_page_item';
} elseif ( $_current_page && $page->ID == $_current_page->post_parent ) {
$css_class[] = 'current_page_parent';
}
} elseif ( $page->ID == get_option('page_for_posts') ) {
$css_class[] = 'current_page_parent';
}
/**
* Filter the list of CSS classes to include with each page item in the list.
*
* @since 2.8.0
*
* @see wp_list_pages()
*
* @param array $css_class An array of CSS classes to be applied
* to each list item.
* @param WP_Post $page Page data object.
* @param int $depth Depth of page, used for padding.
* @param array $args An array of arguments.
* @param int $current_page ID of the current page.
*/
$css_classes = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
if ( '' === $page->post_title ) {
$page->post_title = sprintf( __( '#%d (no title)' ), $page->ID );
}
$args['link_before'] = empty( $args['link_before'] ) ? '' : $args['link_before'];
$args['link_after'] = empty( $args['link_after'] ) ? '' : $args['link_after'];
/** This filter is documented in wp-includes/post-template.php */
if ( isset( $args['pages_with_children'][ $page->ID ] ) ) {
$output .= $indent . sprintf(
'<li class="%s"><a href="%s" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">%s%s%s <span class="caret"></span></a>',
$css_classes,
get_permalink( $page->ID ),
$args['link_before'],
apply_filters( 'the_title', $page->post_title, $page->ID ),
$args['link_after']
);
} else {
$output .= $indent . sprintf(
'<li class="%s"><a href="%s">%s%s%s</a>',
$css_classes,
get_permalink( $page->ID ),
$args['link_before'],
apply_filters( 'the_title', $page->post_title, $page->ID ),
$args['link_after']
);
}
if ( ! empty( $args['show_date'] ) ) {
if ( 'modified' == $args['show_date'] ) {
$time = $page->post_modified;
} else {
$time = $page->post_date;
}
$date_format = empty( $args['date_format'] ) ? '' : $args['date_format'];
$output .= ' ' . mysql2date( $date_format, $time );
}
}
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php //this will be where you add your statement if we're on a parent/child page
wp_list_pages(array(
'title_li' => '',
'child_of' => $post->ID,
'walker' => new BS_Page_Walker(),
));
?>
</ul>
</div>
</div>
@uandidezign
Copy link

uandidezign commented Apr 22, 2019

Hey nice snippet. Worked Great! Was wondering if you know how I would tweak the code so I can enable the links for the submenu items that have children. Right now, it'll add a caret and disable the link, which I only need the top level nav link to disabled with caret. Any suggestions would be great!

https://rubberfab.xyz/resources/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment