function add_custom_nav( $items, $args ) {
if( $args->theme_location == 'menu-1' ) {
return "<div>I AM going CraZY</div>" . $items;
}
return $items;
}
add_filter('wp_nav_menu_items','add_custom_nav', 10 , 2);
I looked up a lot of examples, but when I try calling it, there's no change.
<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
You can use Walker class to add elements after specific class.
Add Something like this in your function.php,
class Walker_Nav_Pointers extends Walker_Nav_Menu
{
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n",
$item->url,
( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
$item->title
// Add your code to add your elements.
);
}
}
then,
<?php
wp_nav_menu(array('walker' => new Walker_Nav_Pointers()););
?>
Check this. Hope this will help you. Thanks.
Related
I have customized a menu for my header, and this is the code:
class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( array_search( 'menu-item-has-children', $item->classes ) ) {
$output .= sprintf( "\n<li class='dropdown %s'><a href='%s' class=\"dropdown-toggle\" data-toggle=\"dropdown\" >%s</a>\n", ( array_search( 'current-menu-item', $item->classes ) || array_search( 'current-page-parent', $item->classes ) ) ? 'site-nav__item--active' : '', $item->url, $item->title );
} else {
$output .= sprintf( "\n<li class='site-nav__item' %s><a class='site-nav__link' href='%s'>%s</a>\n", ( array_search( 'current-menu-item', $item->classes) ) ? ' class="site-nav__item--active"' : '', $item->url, $item->title );
}
}
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"dropdown-menu\" role=\"menu\">\n";
}
}
What I need to do, is I have to give one of my menu item a custom class in the WordPress back-end, Admin area.
I have added the custom class, but it doesn't show up.
That tells me, and also looking at other code, I need some sort of array or class variable and then if there is a class from the back-end wp admin area, then insert it in the li class. Not sure how to do it though.
I have some code that generates a sidebar menu on my Wordpress site as below...
<ul>
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&sort_column=menu_order&child_of=".$post->post_parent."&echo=1");
else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=1");
if ($children) { ?>
<?php echo $children; ?>
</div>
<?php } ?>
</ul>
This outputs code in the following way...
<ul>
<li class="page_item page-item-94 current_page_item">Menu Item</li>
</ul>
The problem is, I need it to use my Bootstrap 3 styles and output the list as below...
<div class="list-group submenu">
Menu Item
</div>
Basically I need to add the class of list-group-item to the a tag in the output list items. Is that at all possible?
You can do this through jquery
$(document).ready(function(){
$("ul").find("li").each(function(){
$(this).addClass("YourClass");
})
})
Your can your Walker Class to simply extend the output of wp_list_pages modify your $output put the Class in functions.php
class NS_CS_Walker extends Walker_page {
function start_el( &$output, $page, $depth, $args, $current_page ) {
if ( $depth ) {
$indent = str_repeat( "\t", $depth );
} else {
$indent = '';
}
extract( $args, EXTR_SKIP );
$output .= $indent . '<li><div>' . get_post_meta( $post_id, $key, $single ) . '</div></li>';
// modify your output here
} // End start_el
} // End Walker Class
Then your rendering code should be
$args = array(
'walker' => new NS_CS_Walker()
// your extra $args would be here
);
wp_list_pages( $args );
Currently I am working on a wordpress website, but I stumbled upon a little problem.
I am using wp_page_menu to make a navbar to get to my other pages. Now it directs me to www.mysite.com/sport, but I need it to direct me to www.mysite.com/sport#header or www.mysite.com/sport/#header.
Does anyone know how I can do this?
I tried using different plugins, or changing the slug or permalink, but this didn't give me the result I wanted.
Thanks for helping guys!
Ok. Here is your code. I just override default walker of wordpress. Please focus on text #header in this code.
If you worry about this code. So you can go to file: ...wp-includes/post-template.php at line 1238. It same code but I have add #header after get_permalink().
Hope that help.
class WPSE_HasHeader_Custom_Walker extends Walker_Page {
function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
if ( $depth )
$indent = str_repeat("\t", $depth);
else
$indent = '';
extract($args, EXTR_SKIP);
$css_class = array('page_item', 'page-item-'.$page->ID);
if( isset( $args['pages_with_children'][ $page->ID ] ) )
$css_class[] = 'page_item_has_children';
if ( !empty($current_page) ) {
$_current_page = get_post( $current_page );
if ( in_array( $page->ID, $_current_page->ancestors ) )
$css_class[] = 'current_page_ancestor';
if ( $page->ID == $current_page )
$css_class[] = 'current_page_item';
elseif ( $_current_page && $page->ID == $_current_page->post_parent )
$css_class[] = 'current_page_parent';
} elseif ( $page->ID == get_option('page_for_posts') ) {
$css_class[] = 'current_page_parent';
}
$css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
if ( '' === $page->post_title )
$page->post_title = sprintf( __( '#%d (no title)' ), $page->ID );
/** CHANGE LINK HERE **/
$output .= $indent . '<li class="' . $css_class . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '';
if ( !empty($show_date) ) {
if ( 'modified' == $show_date )
$time = $page->post_modified;
else
$time = $page->post_date;
$output .= " " . mysql2date($date_format, $time);
}
}
}
wp_list_pages(array(
'sort_column' => 'menu_order',
'title_li' => '',
'echo' => 1,
'walker' => new WPSE_HasHeader_Custom_Walker()
));
Updated:
The second way:
Thanks Mere Development. I thinks this is same idea with him but it much more simple in your case. Like this:
$link = wp_list_pages(array(
'sort_column' => 'menu_order',
'title_li' => '',
'echo' => 0,
));
echo preg_replace('/<a(.*)href="([^"]*)"(.*)>/', '<a$1href="$2#header"$3>', $link);
Christian's answer is great, and it got me thinking about alternative ways to do this, especially ones that allow you to use your wp_page_menu() function as originally requested. So here's another approach using a filter.
Add this function before your wp_page_menu() call, or in functions.php
function wp_list_pages_addhash($output) {
$dom = new DOMDocument;
$dom->loadHTML($output);
$links = $dom->getElementsByTagName('a');
foreach ($links as $link) {
$link->setAttribute('href', $link->getAttribute('href') . '#header');
}
$output = $dom->saveHTML();
return $output;
}
add_filter('wp_list_pages', 'wp_list_pages_addhash');
Then use your wp_page_menu call as you were originally in your theme:
wp_page_menu();
Explanation: It finds every href attribute of every link in the output of wp_list_pages and adds '#header' to the end. wp_page_menu in turn uses wp_list_pages to create output.
in a wordpress theme, i am trying to add a div line as
<div class="safirCustomMenu">
and to do it i modified the function file as the following but the result is unfortunately nothing php code is below, could you please tell me where i am wrong
function widget($args, $instance) {
$instance['selectedMenu'];
$selectedMenu = extract( $args, EXTR_SKIP );
echo '<div class="safirCustomMenu">';
wp_nav_menu( array( 'menu' => $selectedMenu, 'container' => 'ul', 'link_before' => '<span>', 'link_after' => '</span>' ) );
echo '</div>';
}
}
Never do this. remove those div from your function and following code in your functions.php file:
class Walker_Page_Custom extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class='safirCustomMenu'><ul>\n";
}
function end_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul></div><!--safirCustomMenu-->\n";
}
}
and the call your wp_nav_menu just like this:
<?php
$navArgs = array('walker' => new Walker_Page_Custom());
wp_nav_menu($navArgs);
?>
I want to get all categories in wordpress site but separately parent and child categories(in such way it's easily for me to style). In the following code I get parent categories but all children categories are repeated for every parent.
Thanks!
<?php
$args = array(
'orderby' => 'name',
'parent' => 0
);
$categories = get_categories( $args );
$categories_sub = get_categories();
foreach ( $categories as $category ) {
echo '<ul class=" span-5 colborder list_main "> ' . $category->name . '<br/>';
foreach ( $cat->parent > 1 and $categories_sub as $cat) {
$temp=$category->name + '/';
if(get_category_parents($cat)==$temp) {
echo '' . $cat->name . '<br/>';
}
$temp="";
}
echo '</ul>';
}
?>
There are several ways to create HTML list of categories.
wp_list_categories()
Default CSS selectors
Simplest way is to display a list of categories with wp_list_categories() and style the output with default CSS selectors:
li.categories
li.cat-item
li.cat-item-7
li.current-cat
li.current-cat-parent
ul.children
The Walker_Category class
The Walker class is for traversing the hierarchical data like menus or categories. It is an abstract class that has four abstract methods start_el(), end_el(), start_lvl(), end_lvl(). It is not required to override all abstract methods of the class, only those methods that are needed.
$args = array( 'hide_empty' => false, 'walker' => new MyWalker(), 'title_li' => false );
wp_list_categories( $args );
class MyWalker extends Walker_Category {
function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '" >' . $category->name . '</a><br/>';
}
function end_el( &$output, $page, $depth = 0, $args = array() ) {}
function start_lvl( &$output, $depth = 0, $args = array() ) {
$output .= '<ul class="span-5 colborder list_main">'.PHP_EOL;
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$output .= '</ul>'.PHP_EOL;
}
}
Recursive Function
Recursive Function is also a good way to traverse through categories. This way you have to manually get the categories on each node. Since the get_categories() function returns all the children categories in all subnodes, id of the current category must be passed on to be able to display only the current level categories.
get_the_categories();
function get_the_categories( $parent = 0 )
{
$categories = get_categories( "hide_empty=0&parent=$parent" );
if ( $categories ) {
echo '<ul class="span-5 colborder list_main">';
foreach ( $categories as $cat ) {
if ( $cat->category_parent == $parent ) {
echo '<a href="' . get_category_link( $cat->term_id ) . '" >' . $cat->name . '</a><br/>';
get_the_categories( $cat->term_id );
}
}
echo '</ul>';
}
}
i had implemented this code a while ago but you can give it a try..
// get_categories() function will return all the categories
$upaae_categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $upaae_categories as $single_cat ) {
if($single_cat->parent < 1) // Display if parent category and exclude child categories
{
echo 'Parent: '.$single_cat->name;
// now get all the child categories
$child_categories=get_categories(
array( 'parent' => $single_cat->term_id )
);
if(sizeof($child_categories)>0){ /* this is just for ensuring that this parent category do have child categories otherwise a category cannot be a parent if does not have any child categories*/
echo '###childs###</br>'
foreach ($child_categories as $child) {
echo $child->name.'</br>';
}// end of loop displaying child categories
} //end of if parent have child categories
}
}