Support » Themes and Templates » Inserting code into menu
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!
-
$('ul ul li').first().parent().prepend('<div id="before"/>); $('ul ul li').last().append('<div id="after">');
Not tested.
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 :/
Tested the first one to work with
$('ul ul li').first().parent().prepend('<div id="before"/>');
The other one should be
$('ul ul li').last().parent().append('<div id="after"/>');
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).Have you jQuery defined?
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">
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.
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?
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.
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 😉
- The topic ‘Inserting code into menu’ is closed to new replies.