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
Related
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 -->
I'm new at web programming was was wondering if you guys could help me. What I want I guess must be easy, but can't really find /how/.
I have my cute little sidebar that isn't even finished and is constantly needing to be changed. I already gave up on updating it until everything is ready:
<!-- 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>Search</li>
<li>Dashboard</li>
<li>Lookup</li>
</ul>
</li>
<li><a><i class="fa fa-cubes"></i> Inventory <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Asset List
<li><a>Asset Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="create.php">Create Assets
</li>
<li>Update Assets
</li>
</ul>
</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Tickets <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Ticket Overview
<li><a>Ticket Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Create a Ticket
</li>
<li>Update a Ticket
</li>
</ul>
</li>
<li><a>User Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">User List
</li>
<li>Create a User
</li>
<li>Update a User
</li>
</ul>
</li>
</ul>
<li><a><i class="fa fa-laptop"></i> Loans <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a>Loan Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="create.php">Create a Loan
</li>
<li>View Loans
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
But the problem is that I'm doing it like an uncultured swine and keeping that in every single page where it is needed. And if I want to make a change, I need to edit every single page.
I was wondering if there was a way to have a class, or something, with my header, sidebar, and footer, and load them across all pages that needed them?
Thank you for your help!
You can extract the sidebar code into its own PHP file (sidebar.php) then include it where you need it with include or include_once
<html>
...
<body>
<?php include './sidebar.php' ?>
...
</body>
</html>
Using include is essentially the same as copy pasting the code into your file. I.e. It will be added where you include the code and it will be evaluated there as well
Its very simple, Save you sidebar in a php file lets call it sidebar.php, and add below code in your other PHP file where you want to show the sidebar.
<?php include_once('sidebar.php');?>
That's it.
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.
Please help me custome wp_nav_menu with walker , thanks
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">PROJECT<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-4">Introduction</div>
<div class="col-sm-4">Floor Plans A Type</div>
<div class="col-sm-4">Floor Plans B Type</div>
<div class="col-sm-4">Floor Plans C Type</div>
<div class="col-sm-4">Floor Plans D Type</div>
<div class="col-sm-4">Floor Plans E Type</div>
</div>
</div>
</li>
</ul>
</li>
how can i add some container tag after ul tag like <li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<li>LOCATION</li>
<li>FEATURES</li>
<li class="dropdown yamm-fw">PAYMENT<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-4">Playment T&C</div>
<div class="col-sm-4">Financial Services</div>
</div>
</div>
</li>
</ul>
</li>
<div class="spanLogo">aaa</div>
and how can i add one <div class="spanLogo">aaa</div> here
continue
<li class="dropdown yamm-fw">PUBLICITY<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-4">News & Events</div>
<div class="col-sm-4">Testimonial</div>
</div>
</div>
</li>
</ul>
</li>
and here > > and how can i add one a tag with image like code above , thanks
<li>CONTACT</li>
<a class="navbar-brand" href="#"><img src="images/logo_paujar_top.jpg"/></a>
</ul>
I would like suggest you should used wp_get_nav_menu_items() function. In this function you can get separately all your menu title and url, So easily you manage your html.
Here is demonstration
<?php $menu_item = wp_get_nav_menu_items($menuId);
foreach($menu_item as $menu):?>
<a class="menu-iterm" href="<?php echo $menu->url;?>">
<?php echo $menu->title;?>
</a>
<?php endforeach;?>
For more information you get here http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items
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.