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!
Related
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 have a problem related to wordpress footer widget. I created 2 custom sidebar in my twenty-thirteen theme and I add 2-2 widgets in all sidebar to show in footer. But my all widget not coming one by one, it go left.
Please help Me.
here is image of foote and widget section:
https://lh3.googleusercontent.com/-4RKEDGwsARo/WZajbTJ60BI/AAAAAAAAAsw/VTNLuIVGHwcPr5TC0qQtp6Ctp05BiZUpQCL0BGAYYCw/h1080/2017-08-18.png
https://lh3.googleusercontent.com/-Uq98dM3YjX8/WZajeXt-H0I/AAAAAAAAAs0/0-9xxluW-mcwxmbRuXc8T-jVPcjojI5VQCL0BGAYYCw/h1080/2017-08-18.png
Here is my code:
Function.php
function twentythirteen_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Widget Area', 'twentythirteen' ),
'id' => 'sidebar-1',
'description' => __( 'Appears in the footer section of the site.',
'twentythirteen' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Secondary Widget Area', 'twentythirteen' ),
'id' => 'sidebar-2',
'description' => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Footer 1', 'twentythirteen' ),
'id' => 'sidebar-3',
'description' => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Footer 2', 'twentythirteen' ),
'id' => 'sidebar-4',
'description' => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'twentythirteen_widgets_init' );
sidebar-main
if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="animated fadeInUp sidebar-container" role="complementary">
<div class="widget-area">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 sidebar-1">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div>
<div class="col-md-3 col-sm-6 sidebar-2">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div>
<div class="col-md-3 col-sm-6 sidebar-3">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</div>
<div class="col-md-3 col-sm-6 sidebar-4">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</div>
</div>
</div>
</div><!-- .widget-area -->
</div><!-- #secondary -->
footer
<div class="site-info ">
<div class="container copyright">
<div class="row">
<div class="col-md-6">
<p class="pull-left">© 2017 SHOP</p>
</div>
<div class="col-md-6">
<?php do_action( 'twentythirteen_credits' ); ?>
<?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?>
</div>
</div>
</div>
</div><!-- .site-info -->
</footer><!-- #colophon -->
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 am creating a wordpress site using custom theme. I want to set the home link for my theme's index.php file. when i am using permalink it changes link for all the other links and not working. i am using wp_nav_menu to get the menus in header.php. How can i assign the href to index.php for home menu. can any one help? thank you in advance.
Header.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo("charset"); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title><?php bloginfo('name'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container h-sectionHeader">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="<?php echo esc_attr( get_option('logo-setting') ); ?>" class="logo" alt="logo systenics"></a>
</div>
<!-- <?php bloginfo('template_directory'); ?>/images/logo-systenics.png
--> <div class="navbar-collapse collapse">
<?php
$defaults = array(
'theme_location' => 'primary',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'nav navbar-nav',
'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' => ''
);
wp_nav_menu( $defaults ); ?>
</div><!--/.nav-collapse -->
</div>
</div>
In word press admin panel go to appearance >> menu
There is default home page in page section while you click on view all you can see home link. Which is redirection to index.php.you can drag it to your home menu.!