I have problems to convert HTML menu to WP menu. I have div elements inside menu and that div elements are vertical line between li elements. I try do that with Walker class, but i couldn't find solution.
This is code:
<div class="nav-holder">
<i class="fa fa-times-circle"></i>
<nav class="hamburger-menu">
<ul>
<div class="ver-line"></div>
<li class="scroll-link">
biografija
</li>
<div class="ver-line"></div>
<li class="scroll-link">
portfolio
</li>
<div class="ver-line"></div>
<li class="scroll-link">
kontakt
</li>
<div class="ver-line"></div>
</ul>
</nav>
</div>
<!-- nav-holder -->
Related
i try apply theme gentelella with my project using framework yii 1.1. Here i use extension Yii 1.1 that is CMenu, when I want to match the original code template i have a problem with my project in side-bar ( my menu ), which should (template menu)
for my code:
code
!-- sidebar menu -->
<div id="sidebar-menu", class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<?php
if(!Yii::app()->user->isGuest)
{
$this->widget('zii.widgets.CMenu',array(
'htmlOptions'=>array('class'=>'nav side-menu'),
'submenuHtmlOptions'=>array('class'=>'nav child_menu'),
'encodeLabel'=>false,
'items'=>Yii::app()->user->getState('menu'),
));
}
else
echo '<div id=\'footer\'></div>';
?>
</div>
</div>
<!-- /sidebar menu -->
for the template code: code template
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Dashboard</li>
<li>Dashboard2</li>
<li>Dashboard3</li>
</ul>
</li>
</ul>
</div>
<!-- <div class="menu_section"> -->
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>E-commerce</li>
<li>Projects</li>
<li>Project Detail</li>
<li>Contacts</li>
<li>Profile</li>
</ul>
</li>
</div>
</div>
<!-- /sidebar menu -->
i have try to insert <ul class="nav child_menu"> under <div class="menu_section"> but what happens is that the menu does not appear :(
please help,
thanks
So I have been using a HTML template for a website, and added Wordpress functionality. However, my navigation within Header.php just uses get_permalink for page links. I want to keep the same navigation menu with all it's functionality, but allow pages to be added within the dashboard.
The current code is as follows:
<!-- Overlay Navigation Menu -->
<div class="overlay-navigation-wrapper enter-bottom" data-no-scrollbar data-animation="slide-in">
<div class="overlay-navigation-scroll-pane">
<div class="overlay-navigation-inner">
<div class="v-align-middle">
<div class="overlay-navigation-header row collapse full-width">
<div class="column width-12">
<div class="navigation-hide overlay-nav-hide">
<span class="icon-cancel"></span>
</div>
</div>
</div>
<div class="row collapse full-width">
<div class="column width-12">
<nav class="overlay-navigation nav-block">
<h4 class="menu-title">Website Title</h4>
<ul>
<li> Home </li>
<li> About </li>
<li> Treatments & Offers </li>
<li> Store </li>
<li> Contact </li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Overlay Navigation Menu End -->
<div class="wrapper reveal-side-navigation">
<div class="wrapper-inner">
<!-- Header -->
<header class="header header-bottom header-fixed-on-mobile header-transparent" data-sticky-threshold="window-height" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div class="logo-inner"> <img src="" alt="Sartre Logo" /> <img src="" alt="Sartre Logo" /> </div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li>
<!-- Button -->
<div class="v-align-middle"> Book Now </span> </div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<span class="icon-menu"></span>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li> Home </li>
<li> About </li>
<li> Treatments & Offers </li>
<li> Store </li>
<li> Contact </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- MAIN CONTENT GOES HERE-->
</div>
</div>
The code is quite bloated, but allows for the mobile responsiveness and other Javascript effects that come with the theme.
What's the best way to approach this? Thanks
Step 1: Register a navigation menu in your functions.php
<?php
function my_wp_nav_menu(){
register_nav_menus( array(
'primary' => 'Main Navigation'
) );
}
add_action( 'after_setup_theme', 'my_wp_nav_menu' );
Step 2: Go into Appearance->Menus in your Dashboard, add your navigation items, and select Main Navigation as the menu.
Step 3: Replace the navigation's uls in your HTML with:
<?php
wp_nav_menu( array(
'container' => '',
'theme_location' => 'primary'
) );
This will replace your list with a WordPress menu that you can control in WordPress. By default, wp_nav_menu wraps the menu list with a div which is why we set 'container' => '' so all you get is the menu list markup.
I just need to include an html file (that has my navigation bars for all my pages).
I've tried: <?php htmlentities(file_get_contents("include/navigation.html")); ?>
But nothing shows up at all.
I've checked other questions like this and the code above is always the answer. So why is it not working for me?
Here's my navigation file if needed:
<!-- Navigation -->
<nav class="navbar navbar-inverse 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>
<a class="navbar-brand" href="index.html">[ ] Advanced Web Development</a>
</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-right">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Résume
</li>
<li>
Blog
</li>
<li>
Projects
</li>
<li>
Contact
</li>
<!--
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
-->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
In your above example, php is creating a string from the file, but doing nothing with it. In order to make your code work, you would need to add an echo:
<?php echo htmlentities(file_get_contents("include/navigation.html"));
This is because there are generally three ways that functions can affect things:
Returning a value (what htmlentities does)
Modifying (a) value(s) passed into them (take a look at passing by reference
Echoing something directly or to the output buffer
Since htmlentities returns a value, nothing is sent to output. You would have to either save it to a variable for output later, or echo/print it to the output now.
Alternatively, you could include it as suggested by #David.
While using the echo on your normal code would be sufficent, if you want people to be able to access the HTML, you can include it in a php file itself, anywhere except inside the <?php ?> tag.
htmlentities() does not output to the browser. You still need to echo() or otherwise output.
<?php echo htmlentities(file_get_contents("include/navigation.html")); ?>
Or as suggested in the comments use include() to embed the entire file. PHP will attempt to process the file, so make sure it is error free if it contains any PHP code.
<?php include( "include/navigation.html" ); ?>
try:
<?php
$file = htmlentities(file_get_contents("include/navigation.html"));
echo $file;
?>
i'm new in wordpress and i'd like to replace the footer with a pure html code.
i mean, i till want the "container" generated by wp, but inside i want to use pure html code.
i tried changing the content of "partials/footer-layout.php" to this code, and i'm able to see the code, but not to click the links...
any ideas?
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
About us
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul></div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul></div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul></div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul></div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul></div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Your HTML code isn't XHTML-compliant. There's a missing <li>...</li>.
Some possible solutions:
1- try to add links to the anchor tags and check if it works.
2- check if there's a HTML element which overlaps the anchor tags. Use firebug or any other developer tool to check if there's an overlapping element.
3- check if there's a Javascript event which is called once you click on the anchor. Use a Javascript debugger (Firebug etc.).
Here's the updated code:
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
<li>About us</li>
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul>
</div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul>
</div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul>
</div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul>
</div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Often when you can't click a link, it is a case that a layer is positioned on top of it.
Use a code inspector such as Firebug, and see if there are any 'invisible layers' above that area.
There is also the chance that css has cursor:none applied so it doesn't look like you can click it, but it can. Try replacing your # links with real links.
Also, About us needs li tags around it, but I doubt that is the issue.
I am creating a theme in WordPress. I want to add a class to a <li> element if the user is on that page.
I have managed to create a dynamic navigation, using following code in my header.php:
<div class="nav">
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu' ) ); ?>
</div>
Which in HTML, translates to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li> About </li>
</ul>
</div>
I am hoping to dynamically alter this. If the user is on www.website.com/about, the navigation will change to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li class="underline"> About </li>
</ul>
</div>
According to the docs, the current page item should already have a class .current-menu-item. you can use that to style the item with underline. Do you not see this class?
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items