Support » Plugins » Hacks » 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 )
    		$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>';
    			<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; ?>" />
    			<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'); ?>">
    			foreach ( $menus as $menu ) {
    				$selected = $nav_menu == $menu->term_id ? ' selected="selected"' : '';
    				echo '<option'. $selected .' value="'. $menu->term_id .'">'. $menu->name .'</option>';

    Sample Pic


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;

    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="" 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.


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