WordPress.org

Ready to get started?Download WordPress

Forums

Change Nav Menu Text to Pictures (1 post)

  1. UDK450
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic