http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Mon, 20 May 2013 04:19:37 +0000 http://themeshaper.com/forums/topic/thematic-menus-wrapping-the-ltligt-in-the-ltagt#post-26701 Sun, 29 Apr 2012 00:11:14 +0000 colfelt 26701@http://themeshaper.com/forums/ <p>It's all on my local server right now. Nevermind, your suggestion was WAY better. As usual, I was looking for a complicated way to solve a simple problem. </p> <p>Displaying the A element as a block and giving it a width attribute is all that was required.</p> <p>Thanks again HtV! </p> http://themeshaper.com/forums/topic/thematic-menus-wrapping-the-ltligt-in-the-ltagt#post-26697 Sat, 28 Apr 2012 17:54:35 +0000 helgatheviking 26697@http://themeshaper.com/forums/ <p>do you have a link to the styling you're using / trying to achieve? i think it is a mistake to invert the markup... you're probably better off wrapping the text in an extra span so<br /> <code>&lt;li&gt;&lt;a&gt;&lt;span&gt;</code> which should also be easier to create via a Walker.</p> <p>but maybe you just need to put display: block on the A element and then add your padding to that. </p> http://themeshaper.com/forums/topic/thematic-menus-wrapping-the-ltligt-in-the-ltagt#post-26694 Sat, 28 Apr 2012 13:55:40 +0000 colfelt 26694@http://themeshaper.com/forums/ <p>I read through ALL 5 pages of posts in Helga's epic Thematic Menus Demystified topic and the other topics I could find. But I *think* I have a new challenge for this forum.</p> <p>Is there a "clever" way to flip the order of the <strong>li</strong> and <strong>a</strong> tags output in wp_nav_menu? I know I could remove thematic_access and smash in my own hand-rolled menu in it's place. But that seems like a clumsy solution.</p> <p>Why do I want to do this? Well, I've re-oriented my menu so it's vertical. And I have created nice backgrounds on hover with CSS, so the list items are a bit like buttons. But, you still have to click on the actual word in the menu list item (which is what the anchor tag wraps) and you can't click the rest of the block list item that is highlighted on hover (because the <strong>a</strong> doesn't wrap the <strong>li</strong>). In short, it's a usability problem when something highlights that you can't click.</p> <p>Does anybody know how I would alter the code (via my own functions.php) that generates wp_nav_menu (it's in includes/nav-menu-template - function start_el - line 67)? to switch these tags around?<br /> <pre><code>function start_el(&#38;$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( &quot;\t&quot;, $depth ) : &#39;&#39;; $class_names = $value = &#39;&#39;; $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes; $classes[] = &#39;menu-item-&#39; . $item-&gt;ID; $class_names = join( &#39; &#39;, apply_filters( &#39;nav_menu_css_class&#39;, array_filter( $classes ), $item, $args ) ); $class_names = &#39; class=&quot;&#39; . esc_attr( $class_names ) . &#39;&quot;&#39;; $id = apply_filters( &#39;nav_menu_item_id&#39;, &#39;menu-item-&#39;. $item-&gt;ID, $item, $args ); $id = strlen( $id ) ? &#39; id=&quot;&#39; . esc_attr( $id ) . &#39;&quot;&#39; : &#39;&#39;; $output .= $indent . &#39;&lt;li&#39; . $id . $value . $class_names .&#39;&gt;&#39;; $attributes = ! empty( $item-&gt;attr_title ) ? &#39; title=&quot;&#39; . esc_attr( $item-&gt;attr_title ) .&#39;&quot;&#39; : &#39;&#39;; $attributes .= ! empty( $item-&gt;target ) ? &#39; target=&quot;&#39; . esc_attr( $item-&gt;target ) .&#39;&quot;&#39; : &#39;&#39;; $attributes .= ! empty( $item-&gt;xfn ) ? &#39; rel=&quot;&#39; . esc_attr( $item-&gt;xfn ) .&#39;&quot;&#39; : &#39;&#39;; $attributes .= ! empty( $item-&gt;url ) ? &#39; href=&quot;&#39; . esc_attr( $item-&gt;url ) .&#39;&quot;&#39; : &#39;&#39;; $item_output = $args-&gt;before; $item_output .= &#39;&lt;a&#39;. $attributes .&#39;&gt;&#39;; $item_output .= $args-&gt;link_before . apply_filters( &#39;the_title&#39;, $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after; $item_output .= &#39;&lt;/a&gt;&#39;; $item_output .= $args-&gt;after; $output .= apply_filters( &#39;walker_nav_menu_start_el&#39;, $item_output, $item, $depth, $args ); } /** * @see Walker::end_el() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Page data object. Not used. * @param int $depth Depth of page. Not Used. */ function end_el(&#38;$output, $item, $depth) { $output .= &quot;&lt;/li&gt;\n&quot;; } }</code></pre> <p>I'm not confident that I can create something that will work... </p>