class-wp-nav-menu-widget.php (5.3 KB)
I have uploaded the default menu widget that is provided by the wordpress core located at this address →
/wp-includes/widgets/class-wp-nav-menu-widget.php.
What I was willing to do was to create a custom menu widget for the footer. Please check this live website. Currently, the menu here is hard-coded HTML, but I wish to give it a form of a Wordpress widget.
I was quite confused as I am a novice that from where to start, and I lost around 3-4 days in all this. I decided to read and study the default custom menu widget given by the WordPress.
This is the backend form given for that widget →
public function form( $instance ) {
global $wp_customize;
$title = isset( $instance['title'] ) ? $instance['title'] : '';
$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
// Get menus
$menus = wp_get_nav_menus();
// If no menus exists, direct the user to go and create some.
?>
<p class="nav-menu-widget-no-menus-message" <?php if ( ! empty( $menus ) ) { echo ' style="display:none" '; } ?>>
<?php
if ( $wp_customize instanceof WP_Customize_Manager ) {
$url = 'javascript: wp.customize.panel( "nav_menus" ).focus();';
} else {
$url = admin_url( 'nav-menus.php' );
}
?>
<?php echo sprintf( __( 'No menus have been created yet. <a href="%s">Create some</a>.' ), esc_attr( $url ) ); ?>
</p>
<div class="nav-menu-widget-form-controls" <?php if ( empty( $menus ) ) { echo ' style="display:none" '; } ?>>
<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 esc_attr( $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' ); ?>">
<option value="0"><?php _e( '— Select —' ); ?></option>
<?php foreach ( $menus as $menu ) : ?>
<option value="<?php echo esc_attr( $menu->term_id ); ?>" <?php selected( $nav_menu, $menu->term_id ); ?>>
<?php echo esc_html( $menu->name ); ?>
</option>
<?php endforeach; ?>
</select>
</p>
<?php if ( $wp_customize instanceof WP_Customize_Manager ) : ?>
<p class="edit-selected-nav-menu" style="<?php if ( ! $nav_menu ) { echo 'display: none;'; } ?>">
<button type="button" class="button"><?php _e( 'Edit Menu' ) ?></button>
</p>
<?php endif; ?>
</div>
<?php
}
Primarily I wanted that my footer menu HTML/CSS should be used in this, but I do not know the clue for that.
My footer menu HTML looks like this → https://www.screencast.com/t/Y4wDrBCDk that means we have to use one extra class footer-menu
How to do this?
Are we suppose to replace nav_menu
by our own class footer-menu
here →
$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';