I have been learning how to use wordpress along with php and I am currently trying to convert a static website I have built using wordpress.
At the minute I am having trouble with the wordpress 'wp_nav_menu' being that I have a so-called split menu with the main navigation links on the left and some social media links on the right.
Here is my current markup:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Computer Services</li>
<li>Accountancy Services</li>
<li>Payroll Services</li>
<li>About Us</li>
</ul>
<ul class="nav navbar-nav navbar-right social-icons">
<li>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</li>
</ul>
</div>
And how far I have gotten with the wordpress integration:
<?php
wp_nav_menu( array (
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
));
?>
Although I understand the social media links aren't exatly a menu I would like to know and understand how to have them still apart of the same container e.g.
<div class="navbar-collapse collapse">
Any help regarding the matter would be greatly appreciated and I am willing to learn from any mistakes as I am sure I have already made some (or bound to).
Related
while making my custom navigation menus for my own Worpress theme, navigation menu's css code's some codes are working, some are not working while entering php navigation code for Wordpress theme.
This my php code for wordpress navigation menu
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'ul',
'container_class' => '',
'menu_class' => 'nav-link',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);?>
so i am having so many classes in navigation menu so my css code is very long that's why i am adding my html code for my navigiation bar. this my html code for navigation menu.
<ul>
<li class="nav-link" style="--i: .6s">
Home
</li>
<li class="nav-link" style="--i: .85s" >
Categories<i class="fas fa-caret-down"></i>
<div class="dropdown ">
<ul>
<li class="dropdown-link">
Motivation
</li>
<li class="dropdown-link">
Health
</li>
<li class="dropdown-link">
<a class=" href="/pages/science&tech.php">Science & Technology</a>
</li>
<li class="dropdown-link">
<a href='/pages/finance.php'>Finance</a>
</li>
<li class="dropdown-link">
Random
</li>
<div class="arrow"></div>
</ul>
</div>
</li>
<li class="nav-link" style="--i: 1.1s">
Archives<i class="fas fa-caret-down"></i>
<div class="dropdown">`enter code here`enter code here`
<ul>
<li class="dropdown-link">
Contact us
</li>`enter code here`
<li class="dropdown-link">
Privacy Policy
</li>
<li class="dropdown-link">
Terms & Condition
</li>
<li class="dropdown-link">
Disclaimer
</li>
<div class="arrow"></div>
</ul>
</div>
</li>
<li class="nav-link" style="--i: 1.35s">
About
</li>
</ul>
something wrong in my php code. can you give correct code for my navigation bar.
We don't see you code in context, but your 'container' element has wrong. You must set a nav or div, not ul (i suggest nav tag). Remember define 'container_class' too.
Then you must define your CSS rules including your container_class in spreadsheet. If is necessary, you must use !important.
I have the following html structure:
<ul class="nav navbar-nav navbar-right navbar-fw">
<li class="dropdown">Home
<ul class="dropdown-menu">
<li>coach
</li>
<li>speaker
</li>
<li>training
</li>
<li>online content
</li>
<li>coming soon
</li>
<li>corporate
</li>
</ul>
I would like to use wp_get_nav_menu_bar to display the items of my WordPress menu.
For now use this and it's a list with my items
<?php wp_nav_menu( array( 'theme_location' => 'Top' ) ); ?>
This question already has an answer here:
How to add custom HTML to wp_nav_menu?
(1 answer)
Closed 4 years ago.
I'm totally beginer in Wordpress and PHP. I am trying to move the page code in HTML with my own CSS to Wordpress and PHP. I have a problem with the menu. I think I am doing something wrong and I can't find a mistake.
I have a menu in my theme in HTML:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<!-- 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">
<span>Menu</span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="page-scroll nav-width" href="#page_1">Page_01</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_2">Page_02</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_3">Page_03</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_4">Page_04</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_5">Page_05</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_6">Page_06</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
I registered my menu in functions.php:
<?php register_nav_menu( 'main', 'main_menu' ); ?>
and I try to put my menu it to the header.php usung this code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<!-- 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">
<span>Menu</span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--menu-->
<?php wp_nav_menu( array(
'menu' => '',
'container' => 'ul',
'container_class' => 'nav navbar-nav navbar-right',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-left page-scroll nav-width',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="" class="nav navbar-nav navbar-right" role="menu" ></ul>',
'item_spacing' => '',
'depth' => 0,
'walker' => '',
'theme_location' => 'main'
) ); ?>
</div>
<!-- /.navbar-collapse -->
</nav>
When I'm creating a menu in Wordpress it doesn't work, menu isn't displayed on my page. What is wrong with this code?
I will be grateful for your help :)
i think you using bootstrap right?
for bootstrap there is a very nice navwalker...
just include the file and follow the documentation
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
Hello I have a static website for a company made with bootstrap, html and css. I want to make the same website in wordpress. I have started learning wordpress today.
I have followed different tutorials to made my template for wordpress, I have managed to create the first index.php and it is working nicely. I have created about page too and it is also working good. But what i want now, I have menu in my header php, How to i add link to my wordpress pages?
This is my header-top.php im calling this in header.php, The menu is showing properly
<!-- HEADER TOP MENU-->navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- 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-2" 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>
<a class="navbar-brand page-scroll" href="index.html">
<img src="<?php bloginfo('template_directory')?>/images/jms_logo.png" class="img-responsive" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Then i went to wp-admin and create a about page and added textual content to it and it is showing properly on this link http://localhost/wordpress/about/
Now my question is
Q1. How do i add this link of about page in my header-top menu page.
<li>Home</li>
<li>About Us</li>
<li>License</li>
Im totally new to wp so i'm not sure whatever i have done is the correct way of doing it or not? can u also suggest me some proper tutorials that i can understand easily to create my website.
UPDATED MENU
I have replaced this
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
with this but now the css for my menu is gone.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<?php wp_nav_menu( array( 'theme_location' => 'header-top' ) ); ?>
</div>
In my static website
In my WP
Updated 2 After inspecting elements, It is showing like this
but i want like this
For menus you should use standart wp_nav_menu function. It generates menu itself. So you should use something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<?php if ( has_nav_menu( 'primary-menu' ) ) { wp_nav_menu( array( 'menu_class' => 'nav navbar-nav navbar-right TopNav', 'theme_location' => 'primary-menu' ) );} ?>
</div>
Instead of:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
And when you add wp_nav_menu to your theme then option MENU should appear in Appeareance section on WP admin, where you can create new menu and assign it to primary-menu position in theme
UPDATE
You can generate only li items by using this method:
$options = array(
'echo' => false
,'container' => false
);
$menu = wp_nav_menu($options);
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
So you can try something like this:
$options = array(
'echo' => false
,'container' => false
);
$menu = wp_nav_menu($options);
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
</ul>
</div>
I want a dropdown menu like this in Wordpress
<div class="dropdown">
<li class="dropdown-style" type="button" id="dropdownMenu1" data-hover="dropdown" aria-haspopup="true" aria-expanded="true">
Golfbestemmingen <span class="caret"></span>
</li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
The code i have now
<?php wp_nav_menu( array('menu' => 'Hoofd Menu','container_class' => 'dropdown','items_wrap' => '%3$s')); ?>
Someone who can help me with this?
Go and do use Wordpress Bootstrap Master themes to customize bootstrap so all the bootstrap functions will be available without any worries.
You can get it here : https://github.com/320press/wordpress-bootstrap