wp_nav_menu change & add sub-menu & li>a class name? - wordpress

I found lots of methods to change the "sub-menu", but the problem is my friend coded a new Walker_Nav_Menu and here is the code.
All I want is:
to add a class in 3rd line where CLASS="ADD New HERE"
to change the class in 4th line, from <ul class="sub-menu"> to <ul class="dropdown">
again add a class in the 5th line, just like the 3rd line.
<ul id="menu-herid" class="nav navbar-nav" data-breakpoint="800">
<li id="menu-item-2821" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a CLASS="ADD New HERE" href="http://theme.dev/home/">Home</a>
<ul class="sub-menu">
<li id="menu-item-2838" class="menu-item menu-item-type-post_type menu-item-object-page">
Blog with Slideshow
</li>
</ul>
</li>
</ul>
// Navigation with description
if (! class_exists('hs_description_walker')) {
class hs_description_walker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = 'class="dropdown"';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$description = ! empty( $item->description ) ? '<span class="desc">'.esc_attr( $item->description ).'</span>' : '';
if($depth != 0) {
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before;
if (isset($prepend))
$item_output .= $prepend;
$item_output .= apply_filters( 'the_title', $item->title, $item->ID );
if (isset($append))
$item_output .= $append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
}
Now the thing is I wanted the sub-menu to be changed to ""

$defaults = array(
'theme_location' => '',
'menu' => 'menu-name',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => new My_Walker_Nav_Menu() //call walker
);
//Add this in your theme functions.php file
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown\">\n";
}
}

you try to this code...
HTML DEMO
Reference link
Wordress Code
<nav class="navbar-collapse collapse photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>

Related

Repeater Fields in Widget Form Function in Wordpress

I've been trying to add repeater fields in my wordpress widget form. I found two plugin examples but they don't work anymore. When I click on "Add row", nothing happens.
https://www.commoninja.com/discover/wordpress/plugin/social-repeater-widget
https://www.zealousweb.com/wordpress-plugins/repeater-entries-widget/
I noticed both use jquery in their widgets which I guess doesn't work anymore in the newer Wordpress versions?
/**
* Back-end widget form.
*
* #see WP_Widget::form()
*
* #param array $instance Previously saved values from database.
*/
public function form($instance)
{
$max_entries = get_option( 'max_entries' );
$max_entries = (empty($max_entries)) ? '5' : $max_entries;
$widget_add_id = $this->id . "-add";
$title = !empty($instance['title']) ? $instance['title'] : __('Social Repeater Widget', 'srw-widget');
$srw_html = '<p>';
$srw_html .= '<label for="'.$this->get_field_id('title').'"> '. __( 'Widget Title', 'srw-widget' ) .' :</label>';
$srw_html .= '<input id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$title.'" />';
$srw_html .= '<div class="'.$widget_add_id.'-input-containers"><div id="entries">';
for( $i =0; $i<$max_entries; $i++){
if(isset($instance['block-' . $i]) || isset($instance['social_platform-' . $i]))
{
$srw_tab_title = !empty($instance['social_platform-' . $i]) ? $instance['social_platform-' . $i] : __( 'Add Social Profile Details', 'srw-widget' );
$display = (!isset($instance['block-' . $i]) || ($instance['block-' . $i] == "")) ? 'style="display:none;"' : '';
$srw_html .= '<div id="entry'.($i+1).'" '.$display.' class="entrys"><span class="entry-title" onclick = "slider(this);"> '.$srw_tab_title.' </span>';
$srw_html .= '<div class="entry-desc cf">';
$srw_html .= '<input id="'.$this->get_field_id('block-' . $i ).'" name="'.$this->get_field_name('block-' . $i ).'" type="hidden" value="'.$instance['block-' . $i].'">';
$social_platform = esc_attr( $instance['social_platform-' . $i] );
$social_platform_link = esc_attr( $instance['social_platform_link-' . $i] );
$srw_html .= '<p class="last desc">';
$srw_html .= '<label for="'.$this->get_field_id('social_platform-' . $i).'"> '. __( 'Social Platform', 'srw-widget' ) .' :</label>';
$srw_html .= '<input class="widefat" id="'.$this->get_field_id('social_platform-' . $i).'" name="'.$this->get_field_name('social_platform-' . $i).'" type="text" value="'.$social_platform.'" placeholder="'.__( 'Enter Social Platform name', 'srw-widget' ).'" />';
$srw_html .= '</p><p>';
$srw_html .= '<label for="'.$this->get_field_id('social_platform_link-' . $i).'"> '. __('Social platform Link', 'srw-widget' ) .' :</label>';
$srw_html .= '<input class="widefat" id="'.$this->get_field_id('social_platform_link-' . $i).'" name="'.$this->get_field_name('social_platform_link-' . $i).'" type="url" value="'.$social_platform_link.'" placeholder="'.__( 'Enter Social Platform Link', 'srw-widget' ).'"/>';
$srw_html .= '</p>';
/* end wrapper with delete entry option */
$srw_html .= '<p><span class="delete-row">'. __( 'Delete Row', 'srw-widget' ) .'</span></p>';
$srw_html .= '</div></div>';
}
}
$srw_html .= '</div></div>';
$srw_html .= '<div id="message">'. __( 'Sorry, you reached to the limit of','srw-widget') .' "'.$max_entries.'" '. __( 'maximum entries', 'srw-widget' ) .'.</div>' ;
$srw_html .= '<div class="'.$widget_add_id.'" style="display:none;">' . __('Add New Platform', 'srw-widget') . '</div>';
?>
<script>
jQuery(document).ready(function(e) {
jQuery.each(jQuery(".<?php echo $widget_add_id; ?>-input-containers #entries").children(), function(){
if(jQuery(this).find('input').val() != ''){
jQuery(this).show();
}
});
jQuery(".<?php echo $widget_add_id; ?>" ).bind('click', function(e) {
var rows = 0;
jQuery.each(jQuery(".<?php echo $widget_add_id; ?>-input-containers #entries").children(), function(){
if(jQuery(this).find('input').val() == ''){
jQuery(this).find(".entry-title").addClass("active");
jQuery(this).find(".entry-desc").slideDown();
jQuery(this).find('input').first().val('0');
jQuery(this).show();
return false;
}
else{
rows++;
jQuery(this).show();
jQuery(this).find(".entry-title").removeClass("active");
jQuery(this).find(".entry-desc").slideUp();
}
});
if(rows == '<?php echo $max_entries;?>')
{
jQuery("#rew_container #message").show();
}
});
jQuery(".delete-row" ).bind('click', function(e) {
var count = 1;
var current = jQuery(this).closest('.entrys').attr('id');
jQuery.each(jQuery("#entries #"+current+" .entry-desc").children(), function(){
jQuery(this).val('');
});
jQuery.each(jQuery("#entries #"+current+" .entry-desc p").children(), function(){
jQuery(this).val('');
});
jQuery('#entries #'+current+" .entry-title").removeClass('active');
jQuery('#entries #'+current+" .entry-desc").hide();
jQuery('#entries #'+current).remove();
jQuery.each(jQuery(".<?php echo $widget_add_id; ?>-input-containers #entries").children(), function(){
if(jQuery(this).find('input').val() != ''){
jQuery(this).find('input').first().val(count);
}
count++;
});
});
});
</script>
<style>
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block;}
#rew_container input,select,textarea{ float: right;width: 60%;}
#rew_container label{width:40%;}
<?php echo '.'.$widget_add_id; ?>{
background: #ccc none repeat scroll 0 0;font-weight: bold;margin: 20px 0px 9px;padding: 6px;text-align: center;display:block !important; cursor:pointer;
}
.desc{height:55px;}
#entries{ padding:10px 0 0;}
#entries .entrys{ padding:0; border:1px solid #e5e5e5; margin:10px 0 0; clear:both;}
#entries .entrys:first-child{ margin:0;}
#entries .delete-row{margin-top:20px;float:right;text-decoration: underline;color:red;}
#entries .entry-title{ display:block; font-size:14px; line-height:18px; font-weight:600; background:#f1f1f1; padding:7px 5px; position:relative;}
#entries .entry-title:after{ content: '\f140'; font: 400 20px/1 dashicons; position:absolute; right:10px; top:6px; color:#a0a5aa;}
#entries .entry-title.active:after{ content: '\f142';}
#entries .entry-desc{ display:none; padding:0 10px 10px; border-top:1px solid #e5e5e5;}
#rew_container #entries p.last label{ white-space: pre-line; float:left; width:39%;}
#message{padding:6px;display:none;color:red;font-weight:bold;}
</style>
<div id="rew_container">
<?php echo $srw_html;?>
</div>
<?php
}
I'm pretty new to php and wordpress so any help would be appreciated.
Please try the below code to create a repeater field in the widget.
dd_action( 'widgets_init', 'services_widget' );
function services_widget() {
register_widget( 'services_widget' );
}
class services_widget extends WP_Widget {
public function __construct() {
$widget_ops = array(
'classname' => 'services_widget',
'description' => 'Add a service description.'
);
$control_ops = array( 'width' => 400, 'height' => 350 );
parent::__construct( 'services_widget', 'Services', $widget_ops, $control_ops );
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
if( have_rows('service', 'widget_' . $args['widget_id']) ):
echo '<ul>';
while ( have_rows('service', 'widget_' . $args['widget_id']) ) : the_row();
echo '<li class="service one-half">';
$title = get_sub_field( 'title', 'widget_' . $args['widget_id'] );
$body = get_sub_field( 'body', 'widget_' . $args['widget_id']);
$button = get_sub_field( 'button', 'widget_' . $args['widget_id'] );
$button_link = get_sub_field( 'button_link', 'widget_' . $args['widget_id'] );
if( $title ) {
echo '<h4>' . $title . '</h4>';
}
if( $body ) {
echo '<p>' . $body . '</p>';
}
if( $body ) {
echo '<a class="more" href="' . $button_link . '">' .$button . '</a>';
}
echo '</li><div class="clearfix"></div></ul>';
endwhile;
endif;
echo $args['after_widget'];
}
public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
$filter = isset( $instance['filter'] ) ? $instance['filter'] : 0;
$title = sanitize_text_field( $instance['title'] );
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox"<?php checked( $filter ); ?> /> <label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
if ( current_user_can( 'unfiltered_html' ) ) {
$instance['text'] = $new_instance['text'];
} else {
$instance['text'] = wp_kses_post( $new_instance['text'] );
}
$instance['filter'] = ! empty( $new_instance['filter'] );
return $instance;
}
}

Writing a custom nav walker for wordpress

I am trying to write a custom navigation menu for my custom wordpress theme.
<ul class="MainMenu nav navbar-nav ">
<li class="has-megamenu">
MENU
<div class="megamenu">
<ul class="container megamenu-background">
<li class="col-md-3 megamenu-column">
<h4>Column 1</h4>
<ul class="main-menu-ul">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="col-md-3 megamenu-column">
<h4>Column 2</h4>
<ul class="main-menu-ul">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="col-md-3 megamenu-column">
<h4>Column 3</h4>
<ul class="main-menu-ul">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="col-md-3 megamenu-column">
<h4>Column 4</h4>
<ul class="main-menu-ul">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown">Contact</li>
<li class="dropdown">Our Story</li>
Problem is How Can I write this structure walker
This is how i manage to solve this using wordpress walker_nav_menu https://developer.wordpress.org/reference/classes/walker_nav_menu/
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
/**
* Unique id for dropdowns
*/
public $submenu_unique_id = '';
/**
* Starts the list before the elements are added.
* #see Walker::start_lvl()
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
$before_start_lvl = '<div class="megamenu">';
if($depth==0){
$output .= "{$n}{$indent}{$before_start_lvl}<ul id=\"$this->submenu_unique_id\" class=\"container megamenu-background sub-menu dropdown-content\">{$n}";
}
else{
$output .= "{$n}{$indent}<ul id=\"$this->submenu_unique_id\" class=\"sub-menu dropdown-content\">{$n}";
}
}
/**
* Ends the list of after the elements are added.
* #see Walker::end_lvl()
*/
public function end_lvl( &$output, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
$after_end_lvl = '</div>';
if($depth==0){
$output .= "$indent</ul>{$after_end_lvl}{$n}";
}
else{
$output .= "$indent</ul>{$n}";
}
}
/**
* #see Walker::start_el()
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
// set active class for current nav menu item
if( $item->current == 1 ) {
$classes[] = 'active';
}
// set active class for current nav menu item parent
if( in_array( 'current-menu-parent' , $classes ) ) {
$classes[] = 'active';
}
/**
* Filters the arguments for a single nav menu item.
*/
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
// add a divider in dropdown menus
if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '<li class="divider">';
} else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
$output .= $indent . '<li class="divider">';
} else {
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
//adding col-md-3 class to column
if( in_array('menu-item-has-children', $classes ) ) {
if( $depth === 1 ) {
$class_names = $class_names ? ' class="col-md-3 mega-menucolumn '.esc_attr( $class_names ) . '"' : '';
} else {
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
}
}else{
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
}
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
if( in_array('menu-item-has-children', $classes ) ) {
$atts['href'] = ' ';
$this->submenu_unique_id = 'dropdown-'.$item->ID;
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['class'] = '';
}
$atts['class'] .= 'menu-item-link-class ';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
if( ! in_array( 'icon-only' , $classes ) ) {
$title = apply_filters( 'the_title', $item->title, $item->ID );
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
// set icon on left side
if( !empty( $classes ) ) {
foreach ($classes as $class_name) {
if( strpos( $class_name , 'fa' ) !== FALSE ) {
$icon_name = explode( '-' , $class_name );
if( isset( $icon_name[1] ) && !empty( $icon_name[1] ) ) {
$item_output .= '<i class="fa fa-'.$icon_name[1].'" aria-hidden="true"></i> ';
}
}
}
}
$item_output .= $args->link_before . $title . $args->link_after;
if( in_array('menu-item-has-children', $classes) ){
if( $depth == 0 ) {
$item_output .= ' <i class="fa fa-bolt" aria-hidden="true"></i>';
}
}
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
/**
* Ends the element output, if needed.
*
*/
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$output .= "</li>{$n}";
}
} //
Rather than building this as one big Menu in the WordPress Admin, I'd suggest building a separate Menu for each column in the megamenu, and then one more for the Contact / About / Account links. The reason I'd do it that way is because you're including a Column Title for each megamenu column, and the WordPress Admin Menu UI doesn't include a way to add non-link items to menus out of the box. The easiest way to add the "Column Title" content and keep it editable would be to make individual Menus, and use the Menu Title as the Column Title.
For functions.php:
<?php
// Register the menus
add_action( 'after_setup_theme', 'register_menus' );
function register_menus() {
register_nav_menu( 'megamenu1', __( 'Megamenu Column 1', 'theme-text-domain' ) );
register_nav_menu( 'megamenu2', __( 'Megamenu Column 2', 'theme-text-domain' ) );
register_nav_menu( 'megamenu3', __( 'Megamenu Column 3', 'theme-text-domain' ) );
register_nav_menu( 'megamenu4', __( 'Megamenu Column 4', 'theme-text-domain' ) );
register_nav_menu( 'support', __( 'Support Menu', 'theme-text-domain' ) );
}
// Add the menu title
add_filter( 'wp_nav_menu_items', [ $this, 'include_menu_title' ], 10, 2 );
function include_menu_title( $nav_items, $args ) {
if ( ! isset( $args->show_title ) || false === $args->show_title ) {
return $nav_items;
}
if ( $args->theme_location && ( $locations = get_nav_menu_locations() ) && isset( $locations[ $args->theme_location ] ) ) {
$menu = wp_get_nav_menu_object( $locations[ $args->theme_location ] );
// Add the menu title. We add the UL element manually, because otherwise it would wrap AROUND the H4 later in execution of the wp_nav_menu function.
$nav_items = '<h4>' . $menu->name . '</h4><ul class="' . $args->menu_class . '">' . $nav_items . '</ul>';
}
return $nav_items;
}
// Add the dropdown class to support menu items.
add_filter('nav_menu_css_class', function($classes, $item, $args) {
if ( 'support' !== $args->theme_location ) {
return $classes;
}
$classes[] = 'dropdown';
return $classes;
}, 10, 3);
And then for header.php:
<ul class="MainMenu nav navbar-nav">
<li class="has-megamenu">
Megamenu
<div class="megamenu">
<div class="container megamenu-background">
<?php
$common_args = [
'show_title' => true, // This is a custom arg used to indicate we want the title included.
'items_wrap' => '%3$s', // Remove the UL element. We'll add it back at the right place in the filter.
'container_class' => 'col-md-3 megamenu-column',
'menu_class' => 'vpm-menu-ul',
];
wp_nav_menu( array_merge( ['theme_location' => 'megamenu1'], $common_args ) );
wp_nav_menu( array_merge( ['theme_location' => 'megamenu2'], $common_args ) );
wp_nav_menu( array_merge( ['theme_location' => 'megamenu3'], $common_args ) );
wp_nav_menu( array_merge( ['theme_location' => 'megamenu4'], $common_args ) );
?>
</div>
</div>
</li>
<?php
wp_nav_menu([
'theme_location' => 'support',
'items_wrap' => '%3$s', // Remove the UL element.
'container' => false, // Remove the container div.
]);
?>
</ul>

wordpress wp_nav_menu before after

<nav>
<ul class="menu sf-js-enabled">
<li class="item1">
<span>menuitem-1</span>
<ul>
<li>submenu-1-1</li>
<li>submenu-1-2</li>
</ul>
</li>
<li class="item2">
<span>menuitem-2</span>
<ul>
<li>submenu-2-1</li>
<li>submenu-2-2</li>
<li>submenu-2-3</li>
<li>submenu-2-4</li>
</ul>
</li>
</ul>
</nav>
I am trying to make a custom wordpress menu, but i have a problem with this code. As you can see there is a span tag before menuitem-1 and menuitem-2 and a close span tag too, but there isn't around submenu items.
I tried to do with this:
<?php wp_nav_menu(array('container' => 'nav', 'container_class' => ' ', 'theme_location' => 'primary', 'menu_class' => 'menu sf-js-enabled', 'before' => '<span>', 'after' => '</span>') );?>
but if i use this method there are also span tags around submenu items but i dont need those tags.
Is there any solution for this?
I created a custom class "my_nav_walker" insert to my function.php and modified these lines of the original class from class-walker-nav-menu.php
now works fine!
$item_output = ($depth == 0 ? $args->before . '<span>' : $args->before); //MODIFIED LINE original --> $item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= ($depth == 0 ? $args->after . '</span>' : $args->after); //MODIFIED LINE original --> //$item_output .= $args->after;
then put this to my header
<?php
$walker = new my_nav_walker;
wp_nav_menu(array(
'container' => 'nav',
'container_class' => ' ',
'theme_location' => 'primary',
'menu_class' => 'menu sf-js-enabled',
'walker' => $walker));
?>

Wordpress Author Query

I've changed my approach and edited the get_related_author fucntion, but its only bringing in 1 post can someone see where I'm going wrong?
function get_related_author_posts() {
global $authordata, $post;
$authors_posts = get_posts( array( 'author' => $authordata->ID,
'post__not_in' => array( $post->ID ), 'posts_per_page' => 5 ) );
foreach ( $authors_posts as $authors_post ) {
$output = '<div class="listio"><ul><li> <div class="author-post">';
$output .= '<div style="background: url(<?php echo $src[0]; ?> ) !important;
width: 80px; height: 50px; float: left; margin-right: 13px;
background-size: 80px 50px!important; background-color: pink;"></div>';
$output .= '<a href="' . get_permalink( $authors_post->ID ) . '">' .
apply_filters( 'the_title', $authors_post->post_title, $authors_post->ID ) .
'</a>';
$output .= '</div></li></ul></div>';
}
return $output;
}
There you go:
function get_author_related_posts($author_id, $excluded_post){
global $wpdb;
$author_posts = $wpdb->get_results(
"
SELECT post_author, ID
FROM $wpdb->posts
WHERE post_author = '$author_id' and ID != '$excluded_post'
ORDER BY ID DESC
"
);
return $author_posts;
}

wp_nav_menu() : custom walker

I am starting at WP theming, and it's been more than one day that I am looking to do the similar menu with the wp_nav_menu function :
<div class="ui simple dropdown item">
CATEGORY NAME WITH SUB-CATEGORIES
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" >Sub Category 1</div>
<div class="item" >Sub Category 2</div>
</div>
</div>
Also, if there's no sub categories, the HTML output would be like this :
<div class="ui simple dropdown item">
CATEGORY NAME WITHOUT SUB-CATEGORY
</div>
What do I have to put in my functions.php ?
Any hint or any help would be very much appreciated !
Thanks.
Add next code to functions.php:
class SH_Nav_Menu_Walker extends Walker {
var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent";
$output .= "<i class=\"dropdown icon\"></i>\n";
$output .= "<div class=\"menu\">\n";
}
function end_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</div>\n";
}
function start_el(&$output, $item, $depth, $args) {
$value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array();
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', '', $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes . $id . $value . $class_names . '>';
$item_output .= '<div class="item">';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</div>';
$item_output .= "</a>\n";
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
and call wp_nav_menu in the "right" place with next parameters:
wp_nav_menu(array('items_wrap' => '<div id="%1$s" class="%2$s ui simple dropdown item">%3$s</div>', 'theme_location' => 'sidebar_right_menu', 'walker' => new SH_Nav_Menu_Walker))

Resources