Title: Adding HTML and Javascript into PHP for Menu items Last modified: August 20, 2016 --- # Adding HTML and Javascript into PHP for Menu items * [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * (@pepperstreetuk) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/) * Hi, I’m new to WordPress and struggling a bit with the PHP side of things. I want to add some javascript to the menu items I have on the site. I have prototype in HTML here [http://www.pepperstreet.co.uk/pitchandco/index.html](http://www.pepperstreet.co.uk/pitchandco/index.html) * My wordpress site is at [http://pitchandco.com/staging](http://pitchandco.com/staging) * I can’t work out how to get the javascript into the code with all the #(*/ bits in the right place. * The menu is just the default so I think I’ve found the code in the includes folder post-template.php is that correct, this means it will change the main nav but not the custom menus I have elsewhere? I have found this code: * `$output .= $indent . '
  • ID) . '">' . $link_before. apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '';` * What I need is this on something like it!!!!! * `Contact ` * So that as I rollover a nav item the image id=”blank” changes. Please help v stuck. * Any help much appreciated. * Helen Viewing 9 replies - 1 through 9 (of 9 total) * [Adam](https://wordpress.org/support/users/umbercode/) * (@umbercode) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164865) * Never go change things inside the wp-includes or wp-admin folders! Keep your own code isolated to your own theme folder and/or plugin folder. Never change files outside those. The reason is that when you update WordPress those files will get overwritten by newer version and thus delete your changes. Second, using the event-attributes (onmouseover, onmouseout) on HTML elements is not recommended in general. You better create a hook from inside your external script itself. Easiest way to do this is using jQuery with something like: $(“a.myelement”). mouseover(function() { MM_swapImage(etc.); }); HOWEVER, if I guess correctly those MM_functions are from MacroMedia (from the older Dreamweaver of Flash products?) and their function is simply to change the background of the link that you hover over, right? Which is far better done using CSS: a:hover { image: url(contact. gif); } * Thread Starter [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * (@pepperstreetuk) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164893) * Hum i don’t think i can use css because i am trying to change a different image to the link. So rolling over a text link, changes the image next to the logo with an ID of blank. The code is old dreamweaver code, i think but it does work. I can’t see how else to alter it as the menu seems to be built in the includes folder. * [Adam](https://wordpress.org/support/users/umbercode/) * (@umbercode) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164910) * Changing an image on a link is exactly what you can do with CSS. Doing it with JavaScript is like ironing your shirt using a bulldozer; a bit too much. While it is possible to change the default code of the navigation from within your theme (no need to mess with includes) there is really no need, since WordPress adds, very conveniently, its own id’s and classes which you can use for adding and changing the background image. For example: * ``` #menu-site .menu-item-20 a { background: url('image-normal.png'); } #menu-site .menu-item-20 a:hover { background: url('image-hover.png'); } ``` * This would apply the background image image-normal.png to a navigation-link, and when you hover over that link the background image would change to image- hover.png. * Thread Starter [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * (@pepperstreetuk) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164911) * Yes but this code is changing the image you hover over. I need a different image to change when you rollover the nav link. So as i roll over a menu item, the logo – completely different image changes not the menu item. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164912) * Try some jQuery like, * ``` jQuery(document).ready(function($) { $('#menu-site .menu-item-20 a').hover(function() { $('.hdr-logo').toggleClass('newLogo'); }); }); ``` * Then add a CSS background image to that particular class. * Thread Starter [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * (@pepperstreetuk) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164914) * Oh that looks more like it … I take it WordPress comes with jquery already so i don’t need to call it? * Also being a bit of a dimwit with jquery could you expand? Can i add this into the header.php? And how do ireference the php path you need to call images? All that blog info stylesheet directory stuff? Can i just repeat for multiples. E. g each menu item rollover will change the logo to something different see [http://www.pepperstreet.co.uk/pitchandco/index.html](http://www.pepperstreet.co.uk/pitchandco/index.html) this is just the html prototype but i’m trying to get mywordpress menu to do this. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164917) * > I take it WordPress comes with jquery already so i don’t need to call it? * Usually this is the case, but View Source your webpage and see whether jQuery is being referenced. * > Can i add this into the header.php? * I think you need to [enqueue](http://codex.wordpress.org/Function_Reference/wp_enqueue_script) the JavaScript, but if you want you can add it into footer.php. * > Can i just repeat for multiples. E.g each menu item rollover will change the > logo to something different * Yes, this is fine. E.g * ``` jQuery(document).ready(function($) { //First menu item $('#menu-site .menu-item-20 a').hover(function() { $('.hdr-logo').toggleClass('firstLogo'); }); //Second menu item $('#menu-site .menu-item-21 a').hover(function() { $('.hdr-logo').toggleClass('secondLogo'); }); }); ``` * Thread Starter [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * (@pepperstreetuk) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164936) * I a so sorry but I’m simply struggling with this. Not a developer by nature. Have set up a simple test … or not as the case might be … [http://www.pepperstreet.co.uk/pitchandco/test.html](http://www.pepperstreet.co.uk/pitchandco/test.html) * I am completely lost as to what is calling what where and why? What is your (‘ secondlogo’) I also assumed that _#menu-site .menu-item-21 a_ would be the call to my _ul li a_ no? * Oh dear perhaps I should stick to designing 🙁 * Thread Starter [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * (@pepperstreetuk) * [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164938) * Ohhh with a bit jiggling I think I get it now just to weave that into wordpress. Thank you sooooo much. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Adding HTML and Javascript into PHP for Menu items’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 9 replies * 3 participants * Last reply from: [pepperstreetuk](https://wordpress.org/support/users/pepperstreetuk/) * Last activity: [13 years, 6 months ago](https://wordpress.org/support/topic/adding-html-and-javascript-into-php-for-menu-items/#post-3164938) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics