Title: Inserting code into menu
Last modified: August 20, 2016

---

# Inserting code into menu

 *  Resolved [Wunsz](https://wordpress.org/support/users/wunsz/)
 * (@wunsz)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/)
 * Hi!
 * I’m actually editing the twenty eleven style to suit my needs, however I have
   a problem. I need to insert 2 divs before and after the
    <ul class=”children”
   > …
 * Now it looks like
 *     ```
       <div class="menu">
       <ul>
          <li class="page_item page-item-100 current_page_item">
             <a href="http://localhost/wordpress/?page_id=69">Menu</a>
             <ul class="children">
                <li class="page_item page-item-70">
                    <a href="http://localhost/wordpress/?page_id=70">Sub</a>
                </li>
             </ul>
          </li>
       </ul>
       </div>
       ```
   
 * And i want it to look like:
 *     ```
       <div class="menu">
       <ul>
          <li class="page_item page-item-100 current_page_item">
             <a href="http://localhost/wordpress/?page_id=69">Menu</a>
             <ul class="children">
                <div id="before"/>
                <li class="page_item page-item-70">
                    <a href="http://localhost/wordpress/?page_id=70">Sub 1</a>
                </li>
                <li class="page_item page-item-71">
                    <a href="http://localhost/wordpress/?page_id=71">Sub 2</a>
                </li>
                <div id="after"/>
             </ul>
          </li>
       </ul>
       </div>
       ```
   
 * I tried with custom walker but I believe that my knowledge in WP and PHP is quite
   inadequate to do that alone.
 * Moreover I found theoretically easier method using .before() and .after() in 
   jQuery but I can’t use them properly.
 * <script>$(“???”).after(‘<div id=”after” />’);</script>
 * I don’t really know what should I put where ??? are.
 * Thank’s in advance!

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956366)
 *     ```
       $('ul ul li').first().parent().prepend('<div id="before"/>);
       $('ul ul li').last().append('<div id="after">');
       ```
   
 * Not tested.
 *  Thread Starter [Wunsz](https://wordpress.org/support/users/wunsz/)
 * (@wunsz)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956370)
 * Inserted this:
 *     ```
       <script>
       	$('ul ul li').first().parent().prepend('<div id="before"/>');
       	$('ul ul li').last().append('<div id="after"/>');
       </script>
       ```
   
 * Just after:
 *     ```
       <?php wp_nav_menu( array( 'theme_location' => 'primary') ); ?>
       ```
   
 * However it seems not to work :/
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956372)
 * Tested the first one to work with
 *     ```
       $('ul ul li').first().parent().prepend('<div id="before"/>');
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956374)
 * The other one should be
 *     ```
       $('ul ul li').last().parent().append('<div id="after"/>');
       ```
   
 *  Thread Starter [Wunsz](https://wordpress.org/support/users/wunsz/)
 * (@wunsz)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956380)
 * Looks ok but I think that the code is not executing. How can i check that?
    Am
   I even properly placing it? (Just after the php script loading the menu).
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956383)
 * Have you jQuery defined?
 *  Thread Starter [Wunsz](https://wordpress.org/support/users/wunsz/)
 * (@wunsz)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956403)
 * I think so. At least it is added
 *     ```
       <script src="http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.7.1" type="text/javascript">
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956405)
 * I’m not sure what that file is for, but try putting this in the footer.php file,
   above the `</body>` element.
 *     ```
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
        $('ul ul li').first().parent().prepend('<div id="before"/>');
        $('ul ul li').last().parent().append('<div id="after"/>');
       });
       </script>
       ```
   
 * If there is already a link or reference to a file containing these characters,‘
   1.7.1/jquery.min.js’, your jQuery may break.
 *  Thread Starter [Wunsz](https://wordpress.org/support/users/wunsz/)
 * (@wunsz)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956407)
 * Yay! Now the script works!
 * But it when i have 2 slide down menu’s “before” is only in the first one and “
   after” is only in the last one. Is there a fix for that?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956408)
 * I assumed you only wanted jQuery to apply once through your ID `<div id="before"/
   >`; you’ll have to change this to a class.
 * Try
 *     ```
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
        $('ul ul li').each().first().parent().prepend('<div class="before"/>');
        $('ul ul li').each().last().parent().append('<div class="after"/>');
       });
       </script>
       ```
   
 * Not tested.
 *  Thread Starter [Wunsz](https://wordpress.org/support/users/wunsz/)
 * (@wunsz)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956409)
 * Yeah! Got it. This one is perfect:
 *     ```
       $('ul ul li').parent().prepend('<div id="before"/>');
        $('ul ul li').parent().append('<div id="after"/>');
       ```
   
 * Thank you very much for your help!
 * Edit. Yup thanks for the class 😉

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Inserting code into menu’ is closed to new replies.

## Tags

 * [divs](https://wordpress.org/support/topic-tag/divs/)
 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [problem](https://wordpress.org/support/topic-tag/problem/)
 * [twenty eleven](https://wordpress.org/support/topic-tag/twenty-eleven/)
 * [Walker](https://wordpress.org/support/topic-tag/walker/)

 * 11 replies
 * 2 participants
 * Last reply from: [Wunsz](https://wordpress.org/support/users/wunsz/)
 * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/inserting-code-into-menu/#post-2956409)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics