Add Image to Custom Menu Widget?

  • Hi, i have found the code for Custom Menu Widget under /wp-includes/default-widgets.php, what i want to do is add a static image on top of the Menu UL, i already made the list vertically and i’d like to put one image on top after the widget title and before the list, but i have little knowledge with PHP. here is the code for the custom menu widget:

    /**
 * Navigation Menu widget class
 *
 * @since 3.0.0
 */
 class WP_Nav_Menu_Widget extends WP_Widget {

	function __construct() {
		$widget_ops = array( 'description' => __('Use this widget to add one of your custom menus as a widget.') );
		parent::__construct( 'nav_menu', __('Custom Menu'), $widget_ops );
	}

	function widget($args, $instance) {
		// Get menu
		$nav_menu = ! empty( $instance['nav_menu'] ) ? wp_get_nav_menu_object( $instance['nav_menu'] ) : false;

		if ( !$nav_menu )
			return;

		$instance['title'] = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );

		echo $args['before_widget'];

		if ( !empty($instance['title']) )
			echo $args['before_title'] . $instance['title'] . $args['after_title'];

		wp_nav_menu( array( 'fallback_cb' => '', 'menu' => $nav_menu ) );

		echo $args['after_widget'];
	}

	function update( $new_instance, $old_instance ) {
		$instance['title'] = strip_tags( stripslashes($new_instance['title']) );
		$instance['nav_menu'] = (int) $new_instance['nav_menu'];
		return $instance;
	}

	function form( $instance ) {
		$title = isset( $instance['title'] ) ? $instance['title'] : '';
		$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';

		// Get menus
		$menus = get_terms( 'nav_menu', array( 'hide_empty' => false ) );

		// If no menus exists, direct the user to go and create some.
		if ( !$menus ) {
			echo '<p>'. sprintf( __('No menus have been created yet. <a href="%s">Create some</a>.'), admin_url('nav-menus.php') ) .'</p>';
			return;
		}
		?>
		<p>
			<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
			<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('nav_menu'); ?>"><?php _e('Select Menu:'); ?></label>
			<select id="<?php echo $this->get_field_id('nav_menu'); ?>" name="<?php echo $this->get_field_name('nav_menu'); ?>">
		<?php
			foreach ( $menus as $menu ) {
				$selected = $nav_menu == $menu->term_id ? ' selected="selected"' : '';
				echo '<option'. $selected .' value="'. $menu->term_id .'">'. $menu->name .'</option>';
			}
		?>
			</select>
		</p>
		<?php
	}
}

    Sample Pic

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • I’d actually turn to css for this, not PHP.

    here’s how I’d do it… Identify the #id and or css class of your widget’s UL… for example, when I add a custom menu widget to my site, what get’s output in my browser is something like <ul id="menu-global-top-right-container">, and the widget “wrapper” is: <div id="nav_menu-3" class="widget widget_nav_menu">

    So then I would add something like the following css to my child theme or theme’s style.css file:

    #nav-menu-3 ul#menu-global-top-right-container:before {
  display: block;
  width: IMAGEWIDTH;
  height: IMAGEHEIGHT;
  background: url(URLTOIMAGE); no-repeat top center BGCOLOR;
  margin: 1em auto;
  padding: 0;
  border: BORDERSIZE STYLE COLOR;
}

    The only problem I foresee with using this approach is if you are using a responsive theme, then you would probably want to inject actual html code into the template using a hook/filter if one such hook exists. I believe one worth looking into would be the widget-title filter. You could append your image to the rendered code of the widget title, using the ‘widget-title’ filter… I’m pretty sure with that approach something like this would work:

    function add_custom_menu_image($content) {

  $image_div = '<img class="my_menu_image_header" src="https://mydomain.com/images/my_menu_image.png" alt="WIDGET_TITLE" border="0" />';
  $content = $content . $image_div;

}
add_filter( 'widget-title', 'add_custom_menu_image' );

    You would just tweak that code above to suit your needs and paste it into your theme’s functions.php file, and you should be good to go.

    I hope these code samples help point you in the right direction!

    – Greg J

    Oops, there is a slight flaw in my php code above.

    If you were to apply that add_custom_menu_image() filter above, it would insert that image after the content of all widgets.

    You actually need a way to test and make sure it’s the widget you want… When I figure that bit out, I’ll post it here, or hopefully someone else will come along and enlighten us ??

    Meanwhile, I believe the CSS approach I showed you above is good to go.

    -greg

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add Image to Custom Menu Widget?’ is closed to new replies.

Tags