I want to add a <span> in wordpress menu just after <a> tag so that it should look like this
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-13">
<span>Home</span>
</li>
Any help and suggestions will be appreciable.
Hey thanks for your reply but I got it. It should be like this
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'link_before' => '<span>','link_after'=>'</span>' ) ); ?>
It in the following file :
/wp-includes/nav-menu-template.php
html output starts on line 82
Let's be nice, here's the code, replace from line 82 to 109 :
$output .= $indent . '<li' . $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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
/**
* #see Walker::end_el()
* #since 3.0.0
*
* #param string $output Passed by reference. Used to append additional content.
* #param object $item Page data object. Not used.
* #param int $depth Depth of page. Not Used.
*/
function end_el(&$output, $item, $depth) {
$output .= "</li>\n";
}
}
Related
I have added a drop down menu to my wordpress theme. I've got it installed and it works fine. However, now I would like to display the latest posts from each category in drop down menu. Can anyone help point me in the right direction.
an example of what I'm looking for
Here is the current code of my drop down menu
class CSS_Menu_Walker extends Walker {
var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
/* Add active class */
if (in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= "</li>\n";
}
}
This method uses the built-in wp_get_recent_posts function. All you need to do is copy and paste the following code in your theme’s functions.php file or a site-specific plugin.
function wpb_recentposts_dropdown() {
$string .= '<select id="rpdropdown">
<option value="" selected>Select a Post<option>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
foreach( $recent_posts as $recent ){
$string .= '<option value="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</option> ';
}
$string .= '</select>
<script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
window.open( this.options[ this.selectedIndex ].value, "_self" );
};
</script>';
return $string;
}
add_shortcode('rp_dropdown', 'wpb_recentposts_dropdown');
add_filter('widget_text','do_shortcode');
I am new to wordpress would be great help if anyone can help me out, i have designed a website using bootstrap framework, for making it CMS i am using wordpress. i need to get menus dynamically from wordpress which i have dine using the following code
<?php wp_nav_menu(array('menu_class' => 'nav nav-justified','container_class' => 'menu_bac')); ?>
but problem i am stuck with is to get sub menus dynamically, i have been advised to use navwalker , but no idea how to add it to my own code.
can someone please help me out
You need to put your code in you function.php file this file located in your theme folder. Implement below code for extend Walker_Nav_Menu class and put your custom code based on your requirement.
class Custom_Menu extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
//print_r($args);
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (empty($children)) {
$output .= $indent . '<li' . $id . $class_names .'>';
} else {
$output .= $indent . '<li class="dropdown">';
}
$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 : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
if ($children) {
$item_output = $args->before;
$item_output .= '<a class="dropdown-toggle js-activated" data-toggle="dropdown" href="#">';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<b class="caret"></b>';
$item_output .= '</a>';
$item_output .= $args->after;
} else {
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
}
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
}
below code put in your header.php file
$defaults = array(
'theme_location' => 'primary',
'menu' => '',
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-right',
'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 Custom_Menu
);
wp_nav_menu($defaults);
Hey you can use this code for your bootstrap menu in wordpress
PHP CODE:-include this code in your header.php file
<div class="navbar-collapse collapse no-padding-lr">
<?php
$site_defaults = array(
'theme_location' => 'primary',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="site-menu">%3$s</ul>',
'depth' => 0,
'walker' => '');
wp_nav_menu($site_defaults);
?>
</div>
Here is my html for the menu:
<div id="main-menu-container">
<ul id="main-menu">
<li><span aria-hidden="true" class="icon-home"></span>Home</li>
<li><span aria-hidden="true" class="icon-briefcase"></span>Portfolio</li>
li><span aria-hidden="true" class="icon-cog"></span>Services</li>
</ul>
</div>
& the WordPress nav code:
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container_id' => 'main-menu-container',
'menu_id' => 'main-menu',
)
);
?>
As you can see, the problem is, I have different span class added to each list item. I can not use link_before & link_after, because the span classes are in between the link, not after & before.
Is there any solution to convert this kind of html menu to WordPress?
You need to use a Custom Walker. You can see a tutorial with several sample code sources here or a more general version below.
Add to functions.php
class description_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$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 ) .'"' : '';
$prepend = '<strong>';
$append = '</strong>';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
if($depth != 0)
{
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$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 );
}
}
your wp_nav_menu code
wp_nav_menu( array(
'container' =>false,
'menu_class' => 'nav',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new description_walker())
) ;
code extracted from Kriesi
In wordpress, the following function will echo out a list of categories with the posts associated with each category underneath each category name.
This works fine, except for the fact that this produces a flat structure. Some of the categories are child categories other categories, and I'd like to be able to output a list with a structure that matches this (kind of like a site map)
Is anyone able to help me figure out how to modify this code to achieve this?
function posts_by_category() {
//get all categories then display all posts in each term
$taxonomy = 'category';
$param_type = 'category__in';
$term_args=array(
'orderby' => 'name',
'order' => 'ASC'
);
$terms = get_terms($taxonomy,$term_args);
if ($terms) {
foreach( $terms as $term ) {
$args=array(
"$param_type" => array($term->term_id),
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { ?>
<div class="category section">
<h3><?php echo ''.$term->name;?></h3>
<ul>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><?php the_title(); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php
}
}
}
wp_reset_query(); // Restore global post data stomped by the_post().
}
Here is a code snippet I found the other day Hierarchical Category List with Post Titles, should do the trick.
<?php
/*****************************************************************
*
* alchymyth 2011
* a hierarchical list of all categories, with linked post titles
*
******************************************************************/
// http://codex.wordpress.org/Function_Reference/get_categories
foreach( get_categories('hide_empty=0') as $cat ) :
if( !$cat->parent ) {
echo '<ul><li><strong>' . $cat->name . '</strong></li>';
process_cat_tree( $cat->term_id );
}
endforeach;
wp_reset_query(); //to reset all trouble done to the original query
//
function process_cat_tree( $cat ) {
$args = array('category__in' => array( $cat ), 'numberposts' => -1);
$cat_posts = get_posts( $args );
if( $cat_posts ) :
foreach( $cat_posts as $post ) :
echo '<li>';
echo '' . $post->post_title . '';
echo '</li>';
endforeach;
endif;
$next = get_categories('hide_empty=0&parent=' . $cat);
if( $next ) :
foreach( $next as $cat ) :
echo '<ul><li><strong>' . $cat->name . '</strong></li>';
process_cat_tree( $cat->term_id );
endforeach;
endif;
echo '</ul>';
}
?>
I'm going nuts trying to figure out why I'm having such a difficult time getting WordPress to only show posts newer than 30-days and I could really use a second set of eyes. I'm using the following code but nothing is showing up on my site.
<?php
// Create a new filtering function that will add our where clause to the query
function filter_where( $where = '' ) {
// posts in the last 30 days
$where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'";
return $where;
}
add_filter( 'posts_where', 'filter_where' );
$the_query = new WP_Query( $query_string );
remove_filter( 'posts_where', 'filter_where' );
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2 class="title"><?php the_title(); ?></h2>
<div class="meta">
<span class="date">
<strong><?php the_time('d'); ?></strong>
<strong><?php the_time('M'); ?></strong>
</span>
</div>
<div class="entry">
<?php if ( function_exists( 'get_the_image' ) ) {
get_the_image( array( 'custom_key' => array( 'post_thumbnail' ), 'default_size' => 'full', 'image_class' => 'alignleft', 'width' => '170', 'height' => '155' ) ); }
?>
<?php the_content('Read More'); ?>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php
include('includes/wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
<?php
function filter_where($where = '') {
//posts in the last 30 days
$where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'";
return $where;
}
add_filter('posts_where', 'filter_where');
query_posts($query_string);
?>
This works
The way you're doing looks fine. Try putting posts_per_page => -1 as the argument.
The following works for me:
function filter_where( $where = '' ) {
$where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'";
return $where;
}
add_filter( 'posts_where', 'filter_where' );
$args = array(
'posts_per_page' => -1,
);
$the_query = new WP_Query($args);
remove_filter( 'posts_where', 'filter_where' );
while ($the_query->have_posts()) {
$the_query->the_post();
// do stuff
}
Hope it helps.
I know this is super old but, you can do this with WP_Query now.
$args = array(
'post_type' => 'post', // or whatever post type you want
'posts_per_page' => -1, // get all posts that apply, i.e. no limit
'date_query' => array(
array(
'after' => '-30 days',
'column' => 'post_date',
),
),
);