html navigational menu in wordpress - php

I am using html nav bar in wordpress
my html nav bar code
<li class="active">
<a href="http://www.siteurl.com/shop/" class="active">
<i class="icon-nav icon-home"></i>
Home
</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=172">
<i class="icon-nav icon-star"></i>
About </a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=176">
<i class="icon-nav icon-th-large"></i>
Gallery</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=174">
<i class="icon-nav icon-comments"></i>
Services</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=4">
<i class="icon-nav icon-shopping-cart"></i>
Shop</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=187">
<i class="icon-nav icon-pencil"></i>
Blog</a></li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=145">
<i class="icon-nav icon-plus-sign"></i>
Events</a></li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=178">
<i class="icon-nav icon-map-marker"></i>
Contact</a>
</li>
</ul>
</nav>
I have tried to create a conditional tags for each page like below
example for home
<?php if ( is_home() ) { ?>
<li class="active">
<a href="http://www.siteurl.com/shop/" class="active">
<i class="icon-nav icon-home"></i>
Home
</a>
</li>
<?php } else { ?>
<li>
<a href="http://www.siteurl.com/shop/" >
<i class="icon-nav icon-home"></i>
Home
</a>
</li>
But this is not working
how to active the menu icons when we view the respective pages
If i use direct html navigational menu

Only way to do this is by using the wordpress navigation system
http://codex.wordpress.org/Function_Reference/wp_nav_menu
A lot of work has gone into their system, so there's no reason why you would want to replicate it.

Appart from reading the Codex (essential), you can search for tutorials, articles and Q&A's, there are plenty of them.
WordPress Wp_Nav_Menu with Icons and Active Item Highlight
We will be doing:
Home link in our wp_nav_menu that always gets current blog url
Customize each menu item as you want
Put pretty icons in our menu
Active item highlight
Function Examination: wp_nav_menu
In this tutorial, we’ll dive deep into everything that the
wp_nav_menu function can do, use the Walker Class to add a sub
description, and touch on some of its related functions.

Related

How to make a href class=active on my php code

I have following php code for horizontal menu, where I am calling the respective page from this php file, but I want whenever I call that page, that a href page become active.
<li class="mt">
<li class="sub-menu">
<a class="active" href="main.php">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
<ul class="sub">
<li><a href='?url=profile/profile.php'><span>My Profile</span></a></li>
<li><a href='?url=profile/editprofile.php'><span>Edit my profile</span></a></li>
<li><a href='?url=profile/welcome-letter.php'><span>Welcome Letter</span></a></li>
<li class='last'><a href='?url=profile/change-password.php'><span>Change Password</span></a>
</li>
</ul>
</li>
</li>
<?php if ($epin_module == TRUE) { ?>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-cogs"></i>
<span>My e-PIN</span>
</a>
<ul class="sub">
<li ><a href='?url=epin/used.php'><span>Used e-Pin</span></a></li>
<li><a href='?url=epin/un-used.php'><span>Unused e-Pin</span></a></li>
<li><a href='?url=epin/request.php'><span>Request e-Pin</span></a></li>
<li><a href='?url=epin/transferreport.php'><span>E-PIN Transfer report</span></a></li>
<?php if ($autowithdraw == FALSE) { ?>
<li class='last'><a href='?url=epin/epingenerate.php'><span>E-PIN generate report</span></a>
</li>
<?php } ?>
</ul>
</li>
I want when the MY e-Pin page is visited, that page became active. currently if I visit that page main.php stays active always.
You can test url GET parameter for each links like that :
Where you have to replace both {MyUrl} by the real url value.

My wordpress links display to the wrong site

My wordpress sites redirects to the wrong location. Go to www.theladieschampion.com
On the left side bar you have the option to click on social media links. When you click on the social media link instead of going to www.facebook.com/theladieschampion it goes to:
www.theladieschampion.com/www.facebook.com/theladieschampion
Why is the happening? Even when I create buttons that lead to links on mysite the links URL gets placed over the sites URL. Please Help
You must be using your anchor tag as
Facebook
Change this to
Facebook
your code should look like below:--
<div class="social-links">
<ul>
<li>
<a class="social fb" target="_blank" href="https://www.facebook.com/TheLadiesChampion/">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="social tw" target="_blank" href="https://twitter.com/theladieschamp_">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a class="social gg" target="_blank" href="https://plus.google.com/+TheLadiesChampionOfficial/posts">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>``

How can I set class="active" to navigation menu in codeigniter?

I just start up to be a web developer. Now I create a dynamic website for the first time. I don't know how to set class="active" to the navigation menu.
Here is my menu code:
<li>
<i class="fa fa-users fa-lg"></i> Create Patient
</li>
<?php } ?>
<li>
<i class="glyphicon glyphicon-list-alt fa-lg"> </i> List Patients
</li>
<?php if( $usertype == "Admin"){?>
<li>
<i class="fa fa-list fa-lg"> </i> List Users
</li>`
You can use $this->uri->segment();
<li>
</i> Create Patient
</li>
<?php } ?>
<li>
</i> List Patients
</li>
<?php if( $usertype == "Admin"){?>
<li>
</i> List Users
</li>
I do this on most projects. How I achieve this is like this;
<i class="glyphicon glyphicon-list-alt fa-lg"></i> List Patients
It's matching the current uri string, with the links href. If it matches, it add's an active class to the link.
Hope this helps.
I have also used site_url over base_url
Try this one. I think no need of javascript or jquery.
If you are using codeigniter then you can use URI Class.
Get the menu from url using
$this->uri->segment();
and apply to you code like below
<li>
<i class="glyphicon glyphicon-list-alt fa-lg <?php if($this->uri->segment(1)=="memu_name"){echo "active";}?>"> </i> List Patients
</li>
I have used Codeigniter URI Class $this->uri->segment();
Please look at my code:
<li class="<?=($this->uri->segment(1)==='technology')?'active':''?>">Tech</li>
Please note....
class="<?=($this->uri->segment(1)==='technology')?'active':''?>"
Also you can use URI Class $this->uri->uri_string()
Here is my active class for home page(index)
<li class="<?=($this->uri->uri_string()=== '')?'active':''?>">Home</li>
Contact Us

Links are not fully working after adding active class with php

I'm using php to add active link state to my navigation menu which is shared dynamically across all my website pages. But when I go to other links from homepage it works fine but when I go back to homepage its give me "object not found" error.
<!--start vertical menu-->
<?php
$index="menu-items";
$top_albums_default="menu-items";
$Topartists="menu-items";
$Toplists="menu-items";
$Charts="menu-items";
$menuLinkid=basename($_SERVER['PHP_SELF'],".php");
if($menuLinkid=="index"){
$index='active';
}else if ($menuLinkid=="top_albums_default"){
$top_albums_default='active';
}else if ($menuLinkid=="Topartists"){
$Topartists='active';
}else if ($menuLinkid=="Toplists"){
$Toplists='active';
}else if ($menuLinkid=="Charts"){
$Charts='active';
}
?>
<div id="vertical-menu">
<!--<h2 class="logo">LOGO</h2>-->
<img class="logo" src="../Graphics/icons/logo.png" alt="LOGO"/>
<h6 class="logo-desc">Arcade Music Repository</h6>
<ul class="menu-items">
<li>
<a class="<?php echo $index; ?>" href="index.php" ><i class="arcd-archive" ></i></br>Browse</a>
</li>
<li>
<a class="<?php echo $top_albums_default; ?>" href="Top-albums/top_albums_default.php"><i class="arcd-music97"></i></br>Top albums</a>
</li>
<li>
<i class="arcd-microphone52"></i></br>Top artists
</li>
<li>
<i class="arcd-numbered8"></i></br>Top lists
</li>
<li>
<i class="arcd-rising9"></i></br>Charts
</li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"> </script>
Please check this in video
Here is my site folders structure
You are missing a forward slash on your homepage link.
Make it like this:
<ul class="menu-items">
<li>
<a class="<?php echo $index; ?>" href="/index.php" ><i class="arcd-archive" ></i></br>Browse</a>
</li>

give link to a view in codeigniter

I am trying to give links to different pages in the menu bar. I've created views for the page and corresponding controller is created. Also code for menu bar is written separately in another view. In this view I am trying to give link. I tried giving link with base_url(), but when the page loads links after the link which I given href is not working. I tried:
<a href="<?php echo base_url();?>admember/index">
Here, admember is controller and index is my function.
My code:
header.php
<ul class="nav navbar-nav">
<li class="active">
Dashboard
</li>
<li class="menu-dropdown classic-menu-dropdown ">
<a data-hover="megamenu-dropdown" data-close-others="true" data-toggle="dropdown" href="javascript:;">
Memeber Management <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<li class=" dropdown-submenu">
<a href="<?php echo base_url();?>admember/index">
<i class="icon-briefcase"></i>
Add Member </a>
</li>
<li class=" dropdown-submenu">
<a href=":;">
<i class="icon-wallet"></i>
Edit Member </a>
</li>
<li class=" dropdown-submenu">
<a href=":;">
<i class="icon-bar-chart"></i>
Delete Memeber </a>
</li>
</ul>
</li>
</ul>
Controller admember.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class admember extends CI_Controller {
public function index()
{
$this->load->view('addmember');
}
}
Can anyone help me with this. I'm a newbie in codeigniter.
Don't forget to load $this->load->helper('url'); and think problem in base url in Codeginter.
Go to application->config->config.php and change base url example as http://yourbaseurl/

Categories