WordPress.org

Support

Support » Themes and Templates » Change Nav Menu Text to Pictures

Change Nav Menu Text to Pictures

  • I am currently using the Graphene theme on my WordPress site. We really like this theme, as it looks very professional, yet casual. However, it has been decided we are going to change the text to pictures. I have been able to do this using Firebug. Of course, WordPress does not use a html file for this persay, thus complicating this otherwise easy process. I have searched for it in header.php, but found that what I think I am looking for is in the functions.php file.

    /**
    
     * Defines the custom walker that adds description to the display of our Header Menu
    
    */
    
    class Graphene_Description_Walker extends Walker_Nav_Menu {
    
    	function start_el(&$output, $item, $depth, $args)       {
    
    		global $wp_query;
    
    		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    
    		$class_names = $value = '';
    
    		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
    
    		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
    
    		$class_names = ' class="'. esc_attr( $class_names ) . '"';
    
    		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
    
    		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    
    		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    
    		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    
    		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    
    		$prepend = '<img src="http://fantasycraft.byethost13.com/images/minis/';
    
    		$append = '.png">';

    Originally $prepend = <strong> and $append = </strong>, which i assumed outputted the <strong> tags Firebug for Firefox showed when viewing the html of the text. By changing it to what i did, i assumed it what input the name of the page into the <img> tag, allowing me to reference the img for that page, and replacing the text with an image. However, it still shows up as if I’ve never made any changes. My website is http://www.fantasycraft.byethost13.com/site . If anyone can help me, it would be very much appreciated!

  • The topic ‘Change Nav Menu Text to Pictures’ is closed to new replies.
Skip to toolbar