Dev Notes

Software Development Resources by David Egan.

Customise WordPress Menu Widget


PHP, WordPress
David Egan

WordPress has a handy menu widget that allows you to select and display a navigation menu in a registered widget area (like a sidebar or footer).

By copying the code from WP core, modifying it, and adding it to either a custom function or a plugin, the menu output can be customised.

In this case, the li elements are prepended by stars (delivered by font awesome).

PHP

/*==============================================================================
  Modified Navigation Menu widget class
*=============================================================================*/

class Carawebs_Nav_Menu_Widget extends WP_Widget {

	function __construct() {
		$widget_ops = array( 'description' => __('Add a custom menu to your sidebar.') );
		parent::__construct( 'nav_menu', __('Carawebs Custom Menu'), $widget_ops );
	}
	/*
  //constructor -- name this the same as the class above
    function Carawebs_Nav_Menu_Widget() {
        parent::WP_Widget(false, $name = 'Carawebs Custom Menu');
    }
  */

	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;

		// This filter is documented in wp-includes/default-widgets.php
		$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'];

    // Add <i></i> or classes for customisation
		wp_nav_menu( array( 'fallback_cb' => '', 'menu' => $nav_menu, 'menu_class'=> 'i-ul', 'before'=>'<i class="icon-star-sharp i-li orange"></i>' ));

		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 = wp_get_nav_menus( array( 'orderby' => 'name' ) );

		// 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 ) {
				echo '<option value="' . $menu->term_id . '"'
					. selected( $nav_menu, $menu->term_id, false )
					. '>'. $menu->name . '</option>';
			}
		?>
			</select>
		</p>
		<?php
	}
}

add_action('widgets_init', create_function('', 'return register_widget("Carawebs_Nav_Menu_Widget");'));

// Unregister the default nav menu widget
function remove_WP_Nav_widget() {
	unregister_widget('WP_Nav_Menu_Widget');
}

add_action( 'widgets_init', 'remove_WP_Nav_widget' );

CSS to Style the Menu

i-ul {
  display: inline-block;
  padding-left: 0;
  margin-left: 2.142857142857143em;
  list-style-type: none;
}
.i-ul > li {
  position: relative;
}
.i-li {
  display: inline-block;
  position: absolute;
  left: -2.142857142857143em;
  width: 2.142857142857143em;
  top: 0;
  text-align: center;
}

comments powered by Disqus