WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Inserting code into menu (12 posts)

  1. Wunsz
    Member
    Posted 1 year ago #

    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!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    $('ul ul li').first().parent().prepend('<div id="before"/>);
    $('ul ul li').last().append('<div id="after">');

    Not tested.

  3. Wunsz
    Member
    Posted 1 year ago #

    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 :/

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Tested the first one to work with

    $('ul ul li').first().parent().prepend('<div id="before"/>');
  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    The other one should be

    $('ul ul li').last().parent().append('<div id="after"/>');
  6. Wunsz
    Member
    Posted 1 year ago #

    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).

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you jQuery defined?

  8. Wunsz
    Member
    Posted 1 year ago #

    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">
  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  10. Wunsz
    Member
    Posted 1 year ago #

    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?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  12. Wunsz
    Member
    Posted 1 year ago #

    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 ;)

Topic Closed

This topic has been closed to new replies.

About this Topic