Question

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. Create some.'), 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 Picture

Answer 1

Do NOT ever edit core files… EVER! /slaps wrist.

If you want to do this, you could add some padding ( ~100px) to the top of the first <li> or the bottom the title. Then set a background to the div like

.custom-menu { background: url(your-image.png) center 5px no-repeat; } /*note no-repeat*/

or if you want the image clickable, dismiss everything I just told you and:

make a new first menu item in the custom menu menu. Grab the class for that specific one and add similar styles to it

.the-li-you-want { width: 200px; height: 100px; text-indent: -999px; /*hide the text on it*/ background: url(your-image.png) no-repeat; }