Customise WordPress Menu Widget
PHP, WordPress
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