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).
Related
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 ?
Wordpress menu is adding several additiom and empty a tags (exacly two)
if (has_nav_menu('secondary')) :
?>
<nav id="menu-secondary-title" class="nav-anchors">
<div class="wrap">
<a id="menu-secondary-anchor" class="menu-secondary-anchor" title="<?php _e('Secondary Mobile Menu', 'path'); ?>" href="#menu-secondary-mobile"><?php //_e( 'Check Us Out!', 'path' ); ?></a>
<div id="mobile-menu-secondary">
<img src="<?php echo get_template_directory_uri(); ?>/images/Hamburger_icon.svg.png"
<?php wp_nav_menu(array('theme_location' => 'secondary', 'container_class' => 'menu-secondary-mobile-top', 'menu_class' => '', 'menu_id' => 'menu-secondary-items', 'fallback_cb' => '')); ?>
</div>
</div><!-- .wrap -->
</nav><!-- #menu-secondary-title -->
<nav id="menu-secondary" class="menu-container">
<div class="wrap clr">
<?php wp_nav_menu(array('theme_location' => 'secondary', 'container_class' => 'menu', 'menu_class' => '', 'menu_id' => 'menu-secondary-items', 'fallback_cb' => '')); ?>
</div><!-- .wrap -->
</nav><!-- #menu-secondary .menu-container -->
<?php endif; ?>
Please, help me find where could be something wrong. Which which next wordpress file can I explore, to find where is problem?
I'm slowly losing my sanity trying to find out why the sub menu items suddenly stopped working. I've removed and replaced every bit of code and file I can think of to see where the problem went wrong. I'm hoping it's just something painfully obvious to someone who hasn't been staring at code for the last 5 hours.
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<link href="http://fonts.googleapis.com /css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,3 00,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<div class="brand"><img id="logo" class="img-responsive img-center" src="http://www.gallantrywebdesign.com/mark_reed/images/printing_color_postcards_header.png" width="678" height="200" alt="Printing Color Postcards.com"/></div>
<div class="address-bar">Marketing Products & Services | sanitationpostcards.com</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="http://www.gallantrywebdesign.com/wordpress/">Printing Color Postcards</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<?php
wp_nav_menu( array(
'menu' => 'menu',
'theme_location' => 'menu',
'depth' => 2,
'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>
</nav>
<?php if( is_home() || is_front_page() ) :?>
<?php endif;?>
<div class="container">
<div class="row">
functions.php
<?php
function footer_widgets() {
register_sidebar(array(
'name' => __( 'Footer 1', 'the-bootstrap' ),
'id' => 'footer-1',
'before_widget' => '<aside class="widget well %2$s" id="%1$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar(array(
'name' => __( 'Footer 2', 'the-bootstrap' ),
'id' => 'footer-2',
'before_widget' => '<aside class="widget well %2$s" id="%1$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar(array(
'name' => __( 'Footer 3', 'the-bootstrap' ),
'id' => 'footer-3',
'before_widget' => '<aside class="widget well %2$s" id="%1$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
// Hook The 'widgets_init' Action
add_action( 'widgets_init', 'footer_widgets', 11);
function wpbootstrap_scripts_with_jquery()
{
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
register_nav_menus( array(
'menu' => __( 'Primary Menu', 'wpbootstrap' ),
) );
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
This is the URL
I don't think it's the css, so I didn't post it here. I will upon request.
Thanks for any insight!
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>
$argsThumb = array(
'order' => 'ASC',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null
);
$attachments = get_posts($argsThumb);
if ($attachments) {
foreach ($attachments as $attachment) { ?>
<div class="item">
<a href="<?php wp_get_attachment_url($attachment->ID, 'large', false, false); ?>" class="zoom" rel="group">
<span class="thumb">
<img class="small" src="<?php wp_get_attachment_url($attachment->ID, 'medium', false, false); ?>" />
</span>
</a>
</div>
<?php } } ?>
wp_get_attachment_url takes only one parameter + you need to echo:
<?php echo wp_get_attachment_url( $attachment->ID ); ?>
Note: to get specific image sizes, use wp_get_attachment_image_src