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.!
Related
Having trouble getting the navwalker to expand on mobile.
I have added the code to functions php
// Register Custom Bootstrap Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
Here is my navwalker code, if anyone can help me resolve this conundrum I would be most greatful. Please excuse the formatting on here.
<nav class="main-menu navbar navbar-bg thetop" role="navigation">
<div class="container-fluid">
<!-- 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="<?php echo home_url(); ?>">
<?php if (function_exists('the_custom_logo')) {
the_custom_logo();
}
else{
bloginfo('name');
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'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())
);
?>
</ul>
<!-- Search Form -->
<form id="searchform" class="navbar-form navbar-right" role="form" action="<?php echo home_url( '/' ); ?>">
<div class="input-group">
<input type="text" class="form-control" name="s" placeholder="Ara"><span class="input-group-btn"><button type="submit" class="btn btn-default btn-primary -red"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div>
</nav>
Nevermind I figured this out. I am building a new theme using wpBootstrapStarter. Recently updated the theme which also updated bootstrap release using jquery 3.3.2. I just downgraded and all is well.
I guess the devs didn't fully test before release. Good job i spotted via console.
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!
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).
I'm trying to make WordPress theme with the materialize framework but I'm really confused by the navbar part. I've searched on the internet but found nothing, it seems nobody works with materialize.
The only thing that I have found is to make it with nav_walker, like it is done in bootstrap but I don't know how to do it with materialize.
I have created a snippet that will allow you to create a navbar for wordpress with materializecss. However, it will not allow you to create children in the menu (dropdown bar). For this, you will need to create a customized nav walker.
The snippet and instructions can be found here:
https://github.com/kristofferandreasen/wp_materialize_navigation
It is based off the site vel linked to in the comments.
This should do the job:
<div class="m-container nav">
<div class="container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<i class="mdi-navigation-menu"></i>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu side-nav', 'menu_id' => 'mobile-nav','items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>', ) ); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'hide-on-med-and-down' ) ); ?>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</div>
(Source: see the navigation part of this here: https://www.34sp.com/hosting-news/blog/wordpress-materialized-creating-material-design-theme-pt-1-theme-setup/)
I made this gist, a page index.php where I use the wordpress menu.
I don't believe this is the best solution but is a good start and works fine. Feel free to improve and use it as you wish.
https://gist.github.com/knoonrx/a27381877cfc9e4826fae28ec2544490
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name') ?></title>
<link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/materialize.min.css" media="screen,projection">
<link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/style.css">
<style>
nav .sub-menu {
position: absolute;
min-width: 115px;
display: none;
transition: all .3s;
background-color: #ee6e73;
z-index: 1;
}
nav .sub-menu li {
white-space: nowrap;
float: none;
}
li.menu-item-has-children:hover > .sub-menu {
display: block;
}
</style>
</head>
<header>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="nav-wrapper">
<div class="container">
Logo
<i class="mdi-navigation-menu"></i>
<?php
$menu = [ // mobile side menu array
'menu_class' => 'menu side-nav',
'menu_id' => 'mobile-nav',
'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
];
wp_nav_menu( $menu ); // mobile side menu
$menu = [ // desktop menu array
'menu_class' => 'right hide-on-med-and-down'
];
wp_nav_menu( $menu ); // desktop menu
?>
</div>
</div>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</header>
<br>
<br>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$(".button-collapse").sideNav();
});
</script>
</body>
</html>
Materialize CSS Wordpress Sub Menu
I have an online store developed in Wordpress/WooCommerce and I need to add some flags, in top navigation.
In header.php I saw that that section is called by woo_top() function, but I don't find it.
Please help me to find this function or how to add some code in top navigation.
// Hook In
add_action( 'woo_top', 'woo_bootstrapped_nav' );
// Our hooked in Function
function woo_bootstrapped_nav() { ?>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php bloginfo( 'name' ); ?>
<?php
$args = array(
'theme_location' => 'top-bar',
'depth' => 2,
'container' => 'div',
'container_class' => 'nav-collapse collapse pull-left',
'menu_class' => 'nav',
'walker' => new Bootstrap_Walker_Nav_Menu()
);
wp_nav_menu($args);
?>
<ul class="nav secondary-nav pull-right">
<li class="dropdown"> <?php echo do_shortcode('[fblike style="button_count" width="90" float="left"][google_plusone size="medium" float="left" annotation="bubble"][twitter_follow username="twitter_name" show_screen_name="false" count="false" float="left"]'); ?></li>
</ul>
</div>
</div>
</div>
<?php } // End woo_bootstrapped_nav()
here in above code add flag images below home url link.