I created two menus for my wordpress theme
One for desktop and other for mobile with this code:
function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'top Menu' ),
'footer-menu' => __( 'footer Menu' ),
'extra-menu' => __( 'Socials Menu' ),
'mobile-menu' => __( 'mobile Menu' ),
)
);
}
add_action( 'init', 'register_my_menus' );
i called this two codes in header.php:
menu in header:
<div class="mobile-menu"></div>
<ul class="menu">
<li class="page_item page-item-2">About</li>
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
));
?>
</div>
<div class="clear"></div>
<ul id="mobile-nav">
<?php
wp_nav_menu(array(
'theme_location' => 'mobile-menu',
));
?>
</ul>
<div class="clear"></div>
</div>
Result: mobile menu not shown
do you have a solution to display mobile menu ?
Related
I need the nav menu structure like the following.
<ul class="side-menu-list">
<li>Parent Page 1
<ul>
<li>Traditional Braces</li>
<li>Lingual Braces</li>
<li>Invisalign</li>
<li>Temporary Anchorage Devices</li>
<li>Surgical Orthodontics</li>
<li>TMJ Treatment</li>
<li>All About Retainers</li>
<li>Emergency Treatment</li>
</ul>
</li>
</ul>
<ul class="side-menu-list">
<li>Paent Page 2
<ul>
<li>Early Treatment/Prevention</li>
<li>Two-Phase Treatment</li>
<li>Hometown Smiles Gallery</li>
</ul>
</li>
</ul>
Which means every parent page and its sub pages should be wrapped in a ul. So iam looking for a custom walker menu so that every main menu and its sub menus will be wrapped in a ul tag dynamically.
// Register two menus
// Go to Menus and add menu items to each menu
// call the wp_nav_menu function twice.
// this goes in functions.php
register_nav_menus( array(
'primary' => __( 'Primary', 'text-domain' ),
'secondary' => __( 'Secondary', 'text-domain' )
) );
<ul class="side-menu-list">
<li>Parent Page 1
// display the menu on front end
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_id' => 'primary',
'container_class' => 'primary',
'menu_class' => 'ul-class' ) );
</li>
</ul>
<ul class="side-menu-list">
<li>Parent Page 1
wp_nav_menu(
array(
'theme_location' => 'secondary',
'depth' => 2,
'container' => 'div',
'container_id' => 'secondary',
'container_class' => 'secondary',
'menu_class' => 'ul-class' ) );
</li>
</ul>
I'm developing my own wordpress theme for the first time, using bootstrap, and I've run into an issue when using the wp-bootstrap-navwalker.
I've created two menus, one that is visible in sm, md and lg, and one that is visible in xs. In xs it is supposed to be collapsed, and open on pressing the button, however after I added the wp-bootstrap-navwalker to my html, it is no longer working.
Here is my html:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="description" content="Storhamar kunstløp har i dag nærmere 100 medlemmer og løpere på skøyteskole-, aspirant- og konkurransenivå. Her er man velkommen uansett ambisjonsnivå!">
<meta name="keywords" content="Storhamar, SIL, kunstløp, figure skating, Hamar, skøyter, idrettslag, kunstløpklubb, skøyteklubb">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<!--Fonts-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'>
<!--Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="container-fluid hidden-xs">
<img src="<?php header_image(); ?>" class="img-responsive center-block">
</header>
<!-- Navbar ================================================== -->
<nav id="main-nav" class="navbar hidden-xs" data-spy="affix" data-offset-top="280">
<div class="container-fluid" id="main-nav-list">
<?php
wp_nav_menu( array(
'menu' => 'primary-lg',
'theme_location' => 'primary-lg',
'depth' => 1,
'container' => 'div',
'container_class' => 'container-fluid',
'container_id' => 'main-nav-list',
'menu_class' => 'nav navbar-nav main-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
<!-- Mobile Navbar ================================================== -->
<nav id="mobile-nav" class="navbar mobile-nav navbar-default navbar-static-top visible-xs">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'menu' => 'primary-xs',
'theme_location' => 'primary-xs',
'depth' => 1,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="<?php header_image(); ?>" class="img-responsive visible-xs center-block">
<main class="container">
Here is my functions.php:
<?php
if ( ! isset( $content_width ) ) {
$content_width = 660;
}
function SILkunstlop_setup() {
load_theme_textdomain('SILkunstlopLang', get_template_directory() . '/languages');
add_theme_support( 'title-tag' );
add_theme_support( 'automatic-feed-links' );
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
register_nav_menus( array(
'primary-lg' => __( 'Hovedmeny stor', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'primary-xs' => __( 'Hovedmeny liten', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'sidebar-menu' => __( 'Sidemeny', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'sidebar-menu2' => __( 'Sidemeny skøyteskole', 'SILkunstlop-wp' ),
) );
}
add_action('after_setup_theme', 'SILkunstlop_setup');
//Load the theme CSS
function theme_styles() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
}
//Load the theme JS
function theme_js() {
//Adds JQuery from Google's CDN. Code pulled from www.http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true );
if ( is_singular() ) wp_enqueue_script('comment-reply');
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'theme_js' );
function new_excerpt_more( $more ) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');
/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'aktuelt',
'id' => 'aktuelt',
'before_widget' => '<div class="col-sm-8 hashtag">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => 'footer',
'id' => 'footer',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
function searchResult() {
printf( __('Søkeresultat for: %s', 'SILkunstlopLang'), get_search_query());
}
$args = array(
// 'width' => 980,
'height' => 180,
'default-image' => get_template_directory_uri() . '/images/header.svg',
'uploads' => true,
);
add_theme_support( 'custom-header', $args );
$args = array(
'default-color' => 'A9C5DD',
'default-image' => get_template_directory_uri() . '/images/background.jpg',
'default-attachment' => 'fixed',
'default-repeat' => 'none',
'default-position-x' => 'center',
'default-position-y' => 'center',
'uploads' => true,
);
add_theme_support( 'custom-background', $args );
?>
Does anyone have a clue to where my issue is originating?
Thanks a lot for any clues given, and let me know if I should include some more information!
Best,
Elena
So I actually found the problem myself in the end, after studying the html once again with inspect element.
I didn't realise that the div around my nav is actually superfluous and just duplicated the container added by the menu. So after I removed the surrounding div with class of "collapse navbar-collapse" the menu collapsing menu worked again (opens on clicking the button).
what i want to achieved is this
<div class="someclass"> // in place of <ul>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
.
.
.
</div>
This is the patter which is used by semantic UI for horizontal menu
I have achieved this much
<div class="ui secondary menu">
Services
Portfolio
Shop
</div>
by using code
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
But i want to add
class="item"
to
Services
Please guide..
thankx
Finally I able to do this..
<div id="menu1" class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
<script>
jQuery( "#menu1 a" ).addClass( "item" );
</script>
You can use 'menu_class'=> 'item'
Example:
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
Read the codex about function wp_nav_menu, you're using it wrong, do something like this:
echo strip_tags(wp_nav_menu(
'items_wrap' => '<div id="%1$s" class="%2$s">%3$s</div>',
'menu_class' => 'myclass ui',
'echo' => false,
), '<a>');
In wordpress admin > appereance > menus, you can define classes for each link. Just make sure you've turned it on at the screen options.
But you can also do something like this to add a class.
Thankx Fermolina for your answer unfortunately it give me this output which dosent work
Code use
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'test-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
OUTPUT no class in
<div class="ui secondary menu">
Home
</div>
I need to use custom items_wrap format but it seems like it doesn't work at all.
<?php wp_nav_menu( array(
'menu_class' => 'menu',
'menu' => 'mobile-menu',
'theme_location' => 'main-navigation',
'container' => false,
'items_wrap' => '<ul data-role="listview">%3$s</ul>' ) ); ?>
The OUTPUT
<div class="menu">
<ul>
<li class="page_item page-item-2">Sample Page</li>
</ul>
Problem is that in output <ul> doesn't have data-role assigned as it should have.
Anyone have an idea why this function doesn't get the parameter right?
You could try this code:
<ul class="menu">
<?php wp_nav_menu( array(
'menu' => 'mobile-menu',
'theme_location' => 'main-navigation',
'container' => false,
'items_wrap' => '%3$s' ) ); ?>
</ul>
I have created a custom post type named "Training" & a Custom Taxonomy for the same named "Table Of Content"
I need to create a Page template to display Table Of Content Something like this
<div id="TableOfContents">
<ul class="sections">
<li> <a>Custom Taxonomy 1</a>
<ul class="sidenav">
<li class="selected"> Child Taxonomy 1
<ul class="items">
<li> Post Title 1 </li>
<li> Post Title 2 </li>
<li> Post Title 2 </li>
</ul>
</li>
<li class="selected"> Child Taxonomy 2
<ul class="items">
<li> Post Title 1 </li>
<li> Post Title 2 </li>
<li> Post Title 2 </li>
</ul>
</li>
</ul>
</li>
<li> <a>Custom Taxonomy 2</a>
<ul class="sidenav">
<li class="selected"> Child Taxonomy 1
<ul class="items">
<li> Post Title 1 </li>
<li> Post Title 2 </li>
<li> Post Title 2 </li>
</ul>
</li>
<li class="selected"> Child Taxonomy 2
<ul class="items">
<li> Post Title 1 </li>
<li> Post Title 2 </li>
<li> Post Title 2 </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Here is the php code in functions.php for creating custom taxonomy
// Custom Taxonomy for Training
$labels = array(
'name' => 'Table of Content',
'singular_name' => 'Table of Content',
'search_items' => 'Search Table of Content',
'popular_items' => 'Popular Table of Content',
'all_items' => 'All Table of Content',
'parent_item' => 'Parent Table of Content',
'edit_item' => 'Edit Table of Content',
'update_item' => 'Update Table of Content',
'add_new_item' => 'Add New Table of Content',
'new_item_name' => 'New Table of Content',
'separate_items_with_commas' => 'Separate Table of Content with commas',
'add_or_remove_items' => 'Add or remove Table of Content',
'choose_from_most_used' => 'Choose from most used Table of Content'
);
$args = array(
'label' => 'Table of Content',
'labels' => $labels,
'public' => true,
'hierarchical' => true,
'show_ui' => true,
'show_in_nav_menus' => true,
'args' => array( 'orderby' => 'term_order' ),
'rewrite' => array( 'slug' => 'table-of-content', 'with_front' => false ),
'query_var' => true
);
register_taxonomy( 'tableofcontent', 'training', $args );
Thanks & Regards
Here is the final code I managed to working out:
<div class="content" role="main">
<?php $term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
echo '<h3 class="tax-title">' . $term->name . '</h3>';
?>
<div id="TableOfContents">
<div class="ui-boxmenu">
<ul class="sections">
<?php
$taxonomyName = "tableofcontent";
$parent_terms = get_terms($taxonomyName, array(
'parent' => $term->term_id,
'orderby' => 'menu_order',
'hide_empty' => false
));
foreach ($parent_terms as $pterm) {
//Get the Child terms
$terms = get_terms($taxonomyName, array(
'parent' => $term->term_id,
'orderby' => 'menu_order',
'hide_empty' => false
));
foreach ($terms as $term) {
echo '<li><a>' . $term->name . '</a>';
$childs = get_terms($taxonomyName, array(
'parent' => $term->term_id,
'orderby' => 'menu_order',
'hide_empty' => false
));
echo '<ul class="sidenav">';
foreach ($childs as $child) {
echo '<li>' . $child->name . '';
$wpq = array ('taxonomy'=>'tableofcontent','orderby' => 'menu_order','order' => 'ASC','term'=>$child->slug);
$myquery = new WP_Query ($wpq);
$article_count = $myquery->post_count;
if ($article_count) {
echo "<ul class=\"items\">";
while ($myquery->have_posts()) : $myquery->the_post();
echo "<li>".$post->post_title."</li>";
endwhile;
echo "</ul>";
}
echo '</li>';
}
echo '</ul>';
echo '</li>';
}
}
?>
</ul>
</div>
</div>
<script language="javascript">
$('.ui-boxmenu').boxmenu();
</script>
<script type="text/javascript">
// Default add class selected to First Item in Box Menu
jQuery(document).ready(function($) {
$("ul.sections li:first").addClass("selected");
$("ul.sections li:first .sidenav li:first").addClass("selected");
$("ul.sections li:first .sidenav li ul.items").addClass("selected");
$("ul.sections li:first .sidenav li ul.items li:first").addClass("selected");
});
</script>
<?php
$singleterm = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
$args = array(
'post_type' => 'training',
'tableofcontent' => $singleterm->slug,
'orderby' => 'menu_order',
'showposts' => 1,
'order' => 'ASC',
);
$posts = get_posts( $args );
foreach ($posts as $post) : setup_postdata($post);
?>
<h2 class="content-subhead"><?php the_title() ?></h2>
<?php the_content() ?>
<?php endforeach; wp_reset_postdata(); ?>
</div>
Regards