WordPress.org

Ready to get started?Download WordPress

Forums

Adding HTML and Javascript into PHP for Menu items (10 posts)

  1. pepperstreetuk
    Member
    Posted 1 year ago #

    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

    My wordpress site is at 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 . '<li class="' . $css_class . '"><a>ID) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

    What I need is this on something like it!!!!!

    <a href="#" onmouseover="MM_swapImage('blank','','<?php bloginfo('stylesheet_directory'); ?>/images/global/logo/contact.gif',1)" onmouseout="MM_swapImgRestore()">Contact</a>

    So that as I rollover a nav item the image id="blank" changes. Please help v stuck.

    Any help much appreciated.

    Helen

  2. Umbercode
    Member
    Posted 1 year ago #

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

  3. pepperstreetuk
    Member
    Posted 1 year ago #

    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.

  4. Umbercode
    Member
    Posted 1 year ago #

    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.

  5. pepperstreetuk
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  7. pepperstreetuk
    Member
    Posted 1 year ago #

    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 this is just the html prototype but i'm trying to get mywordpress menu to do this.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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 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');
     });
    
    });
  9. pepperstreetuk
    Member
    Posted 1 year ago #

    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

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

  10. pepperstreetuk
    Member
    Posted 1 year ago #

    Ohhh with a bit jiggling I think I get it now just to weave that into wordpress.
    Thank you sooooo much.

Topic Closed

This topic has been closed to new replies.

About this Topic