Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Look at this answer, it explains how to add custom HTML to the wordpress menus: <a href="https://stackoverflow.com/a/12251157/1627227">https://stackoverflow.com/a/12251157/1627227</a></p> <p><strong>EDIT:</strong></p> <p>I've put together an example to fit your question. You can place it into <strong>functions.php</strong>. Note the comments, they explain where to add your custom code.</p> <pre><code>class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { function start_lvl(&amp;$output, $depth) { $indent = str_repeat("\t", $depth); //$output .= "\n$indent&lt;ul class=\"sub-menu\"&gt;\n"; // Change sub-menu to dropdown menu $output .= "\n$indent&lt;ul class=\"dropdown-menu\"&gt;\n"; } function start_el ( &amp;$output, $item, $depth = 0, $args = array(), $id = 0 ) { // Most of this code is copied from original Walker_Nav_Menu global $wp_query, $wpdb; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes; $classes[] = 'menu-item-' . $item-&gt;ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item-&gt;ID, $item, $args ); $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : ''; $has_children = $wpdb-&gt;get_var("SELECT COUNT(meta_id) FROM wp_postmeta WHERE meta_key='_menu_item_menu_item_parent' AND meta_value='".$item-&gt;ID."'"); $output .= $indent . '&lt;li' . $id . $value . $class_names .'&gt;'; $attributes = ! empty( $item-&gt;attr_title ) ? ' title="' . esc_attr( $item-&gt;attr_title ) .'"' : ''; $attributes .= ! empty( $item-&gt;target ) ? ' target="' . esc_attr( $item-&gt;target ) .'"' : ''; $attributes .= ! empty( $item-&gt;xfn ) ? ' rel="' . esc_attr( $item-&gt;xfn ) .'"' : ''; $attributes .= ! empty( $item-&gt;url ) ? ' href="' . esc_attr( $item-&gt;url ) .'"' : ''; // Check if menu item is in main menu if ( $depth == 0 &amp;&amp; $has_children &gt; 0 ) { // These lines adds your custom class and attribute $attributes .= ' class="dropdown-toggle"'; $attributes .= ' data-toggle="dropdown"'; } $item_output = $args-&gt;before; $item_output .= '&lt;a'. $attributes .'&gt;'; $item_output .= $args-&gt;link_before . apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after; // Add the caret if menu level is 0 if ( $depth == 0 &amp;&amp; $has_children &gt; 0 ) { $item_output .= ' &lt;b class="caret"&gt;&lt;/b&gt;'; } $item_output .= '&lt;/a&gt;'; $item_output .= $args-&gt;after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } </code></pre> <p>After you have this in place, you have to go to the point where your menu (<code>wp_nav_menu()</code>) is called. In the answer I've linked to, there's the full function call to <code>wp_nav_menu</code>. However you'll have to add this line: <code>'walker' =&gt; new Custom_Walker_Nav_Menu</code> to the arguments array, to use your custom walker object on that specific menu.</p> <p>Hope you got it ;)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload