Databases
StackOverflow2013
Postsdbo
POAdd custom markup to Wordpress menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd custom markup to Wordpress menu
    text
    copied!<p>I've been search for a long time now for a solution to this problem but found nothing so you guys will be my last hope!</p> <p>I'm trying to build a new CSS3 menu on a Wordpress 3 site that I'm working on. I would need to extend the default menu mark-up but not sure how.</p> <p>This is the tag I'm using in the theme to output the menu at the moment:</p> <pre><code>&lt;?php wp_nav_menu( array( 'container_class' =&gt; 'menu-header', 'theme_location' =&gt; 'primary' ) ); ?&gt; </code></pre> <p>At the moment my default menu mark-up looks like this:</p> <pre><code>&lt;div class="menu-header"&gt; &lt;ul id="menu-main-menu" class="menu"&gt; &lt;li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I need to add 2 div's around each <code>&lt;ul class="sub-menu"&gt;...&lt;/ul&gt;</code> So I would need the mark-up to look like this:</p> <pre><code>&lt;div class="menu-header"&gt; &lt;ul id="menu-main-menu" class="menu"&gt; &lt;li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt; &lt;div class="sub-menu-container"&gt; &lt;div class="submenu"&gt; &lt;ul class="sub-menu"&gt; &lt;li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt; &lt;div class="sub-menu-container"&gt; &lt;div class="submenu"&gt; &lt;ul class="sub-menu"&gt; &lt;li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Does anyone know how to do this please?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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