I am trying to create a one page navigation menu in PHP. The reason I want it to be in PHP is because I can add other code later and I want the user to be on the same page even after a refresh.
I have an unordered list with generated list items. The list items are generated with an array.
(I want the key/values separated because the actual code will be different. This is just an example.)
$nav = array(
"home" => "home",
"about" => "about",
"contact" => "contact"
);
echo '<ul>';
foreach( $nav as $id => $name )
{
echo '<li>'.$name.'</li>';
}
echo '</ul>';
// outputs:
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
Then I want some divs to be the sections
foreach( $nav as $s_id => $s_name)
{
echo '<div id="'.$s_id.'">Some section text</div>';
}
Now I need to know how can I set the display to either block or none based on current id active?
While I personally think this is more of a job for JavaScript, in the question and a comment above you specify that you want to do this in PHP. In that case those anchor tags will need to be actual links to the page. For the sake of this example I'll assume the page is called index.php. (If it's something different, just use whatever your page is.)
Update the anchors to be links to the page with query string parameters:
<li>home</li>
<li>about</li>
<li>contact</li>
Then in your PHP code you'd determine which one is "active" by the active query string parameter. Start with a default of "home" in case no parameter is specified (it's the user's first time on the page):
$active = "home";
if (isset($_GET["active"])) {
$active = $_GET["active"];
}
Then when rendering the <div> elements you can specify their style:
foreach( $nav as $s_id => $s_name)
{
echo '<div id="'.$s_id.'" style="display:'.($s_id == $active ? "block" : "none").'">Some section text</div>';
}
I have a navigation bar with 3 button, saying Home, Films and Genres. Clicking the Genre should open the dropdown with the list of all Genres generated from database and on click to each genre, genrepage containing the list of films of selected genre shows up. But the Genre button (with dropdown) is not working when I am trying to access it from home page. But it works fine for any other pages. I am using Bootstrap 3.3.7 navbar and any help will be appreciated.
My navbar.php
<?php
/*
array of pages
this builds the navigation list
format:
filename => URL name
*/
$navArray = array(
'index' => 'Home',
'film' => 'Films',
'genre' => 'Genre',
);
?>
//some html code here
<?php
foreach($navArray as $key => $nav){
//assign active class to currently active page
if(strstr($_SERVER['SCRIPT_NAME'], $key))
$active = ' active';
else $active = '';
//if Genre is selected, display dropdown menu
if($nav=='Genre'){
echo '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Genre<span class="caret"></span></a>
<ul class="dropdown-menu">';
//generate dropdown from database, giving the list of genres
$queryGenreList="SELECT genre.`name`
from genre;
";
$resultGenreList=$db->query($queryGenreList);
if($resultGenreList->num_rows > 0){
while($row = $resultGenreList->fetch_assoc()){
echo '<li>'.$row["name"].'</li>';
}
}
echo '</ul>
</li>';
}
echo"<li class='nav-item".$active.";'>";
if($nav!='Genre'){
echo"<a class='nav-link' href=".$key.".php>".$nav."</a>";
}
}
?>
</li>
If the bootstrap menu is failing to work when navigating away from the homepage, as it sounds like bootstrap.js isn't running on your subpages for the dropdown to work. Check your network tab > js and see if bootstrap.min.js is being loaded in or view the source.
Hi im a web dev an im trying to get word press to use a 2nd navigation for my blog section. i have the main site all set up but what i want is when i hit the blog in my top nav to show a differnt navigation for the blog section. i have tried using the following code in the header.php
<?php
if (is_single('blog')){
wp_nav_menu(array('menu'=>'secondary' ));
}
?>
but this code does not seem to work even though the theme supports 2 navigations.
<nav class="Seo-nav">
<div class="Seo-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'Seo-hmenu'
)
);
get_sidebar('nav');
?>
the above code is the code i use to call my navigation. is there any way to get a specific page or pages to show the one menu? any help on this would be great. never had to make certain pages have different navigation before so this is a new one on me.
Like was said in comments earlier, you'll need Conditional Tags. Probably for you specifically, the is_page() conditional.
<?php
if (is_page('blog')) {
// Echo this menu on the blog slug page
wp_nav_menu(array(
'theme_location' => '[name_of_menu]'
));
} else {
// Otherwise, echo this one
wp_nav_menu(array(
'theme_location' => '[name_of_main_menu]'
));
}
See the codex for the wp_nav_menu attributes. Can print out the menu other ways, that's just the one I recommend.
Depending how you blog is set up, is_page('blog') may need to be is_home(), 'blog' == get_post_type(), or some other variation.
I think you can go here two ways.
One is to only show children of current page on the second like
function show_different_nav(){
global $post;
$sec_nav=wp_list_pages("child_of=".$post->ID);
return $sec_nav;
}
now call show_different_nav() in your template.
The other way would be to write an own filter. I modified the http://wordpress.org/plugins/get-different-menus/ in this case.
add_filter( 'wp_nav_menu_items', 'get_different_custom_menu_item_according_to_page_slug', 10, 2 );
function get_different_custom_menu_item_according_to_page_slug ( $items, $args ) {
$current_id=(int)$GLOBALS['post']->ID;
$current_slug=$GLOBALS['post']->slug;
$the_nmo = wp_get_nav_menu_object($current_slug);
if ($the_nmo==""){}else{
$menu_id=$the_nmo->term_id;
$items_2 = wp_get_nav_menu_items($menu_id);
$items="";
if ($args->theme_location == 'secondary') {
foreach ($items_2 as $item){
$link_page_id = (int)($item->object_id);
if ($current_id == $link_page_id){$cur=" current-menu-item current_page_item";}else{$cur="";
}
$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page'.$cur.'">'.$item->title.'</li>';
}
}
}
return $items;
}
In my opinion you need a menu for this called exactly the same as the page slug.
I am not sure if this is possible !
I have two files say main.php and submenu.php
In main.php i have the following mainMenu
and in another file called submenu.php i have a list say
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
If i click on Pricelist in main menu i want to display the content of the submenu as a list under PriceList as
The simple solution may be including the list view in menu.php itself, But that's not the situation
Thank you.
You should use arrays and recursion. Like so:
(code is rough, sorry)
$menu = array(
'About Us',
'Categories',
'Price List' => array(
'1','2','3','4'
)
);
function loop_menu($menu){
foreach($menu as $m):
if(is_array($m))
return '<ul>' . loop_menu($m) . '</ul>';
else
return '<li>' . $m . '</li>';
endforeach;
}
echo loop_menu($menu);
Then use CSS to make it look however your want.
If you want to include a page just use
include('page.php');
But using JS & CSS is the best way
Here is a very helpful plugin
http://users.tpg.com.au/j_birch/plugins/superfish/
And don't forget to get jQuery
I need to insert a class named "current" into a list like below depending on what page I am on.
All pages on my site are included into the index page like this,
Index.php includes a header file then it includes the body file and then footer file.
The body file will be one of the pages below.
It is included through the page like this in the url index.php?p=home
So I can easily get the page variable $p and know when I am on a certain page
So what would be the BEST way to add the "current" css class to a navigation list like below?
<li class="drop"><em>Home</em></li>
<li class="drop"><em>inbox</em></li>
<li class="drop"><em>outbox</em></li>
<li class="drop"><em>online users</em></li>
<li class="drop"><em>all users</em></li>
<li class="drop"><em>forums</em></li>
<li class="drop"><em>blogs</em></li>
<li class="drop"><em>bulletins</em></li>
<li class="drop"><em>news</em></li>
...this is just a mockup list the real list is more complex
UPDATE: I don't know if an array is the way to go or not,
Above is a quick example, below is my ACTUAL menu list, there are submenus embeded into the upper level list items, so if I am on any page in a submenu, the main menu should have the "current" class added to it, so doing an array is somewhat complex?
<div id="bottomrow">
<div class="pad">
<ul class="menu left">
<li class="first"><em>Home</em></li>
<li class="current users drop"><em>Users</em><span class="drop"> </span>
<ul id="moreheader">
<li><em>Widgets</em></li>
<li><em>News</em></li>
<li><em>Promote</em></li>
<li><em>Development</em></li>
<li><em>Bookmarks</em></li>
<li><em>About</em></li>
</ul>
</li>
<li><em>Forums</em></li>
<li class="drop current"><em>More</em><span class="drop"> </span>
<ul id="moreheader">
<li><em>Widgets</em></li>
<li><em>News</em></li>
<li><em>Promote</em></li>
<li><em>Development</em></li>
<li><em>Bookmarks</em></li>
<li><em>About</em></li>
</ul>
</li>
<li class="moneytabmenu"><em>Money:<span class="moneytabmenu-total">$0.00</span></em></li>
</ul>
<ul class="menu right">
<li class="drop myaccount"><a href="" class="first"><img class="avatar" src="http://gravatar.com/avatar.php?gravatar_id=7ab1baf18a91ab4055923c5fd01d68a2&rating=pg&size=80&default=" height="19" width="19" alt="you" /><em>My
Account</em></a><span class="drop"> </span>
<ul id="myaccount">
<li><em>Dashboard</em></li>
<li><em>Account Settings</em></li>
<li><em>Settings</em></li>
</ul>
</li>
<li class="drop"><em>Mail</em><span class="drop"> </span>
<ul id="mailboxheader">
<li><em>InBox</em></li>
<li><em>SentBox</em></li>
<li><em>Trash</em></li>
<li><em>Post Bulletin</em></li>
<li><em>View Bulletins</em></li>
</ul>
</li>
<li class="drop"><em>More</em><span class="drop"> </span>
<ul id="moreheader">
<li><em>Widgets</em></li>
<li><em>News</em></li>
<li><em>Promote</em></li>
<li><em>Development</em></li>
<li><em>Bookmarks</em></li>
<li><em>About</em></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- END div#bottomrow -->
</div>
Not a really good solution, but if you had an id corresponding to your $p variable on each of your menu items, like this:
<li id="home"><em>Home</em></li>
<li id="inbox"><em>inbox</em></li>
then you could either output an appropriate <style> tag with your PHP script (shown here for $p = 'home'):
<style type="text/css">#home { /* Your "current" styling here */ }</style>
or set an id on the body tag:
<body id="page_home">
and put this in your main style sheet:
#page_home #home,
#page_inbox #inbox,
...
{
/* Your "current" styling here */
}
first of all i would place them in an array:
$pages = array();
$pages['home'] = array(
'name' => 'Home',
'url' => '......',
'submenus' => array(
'test-submenu' = array(
'name' => 'Test Submenu',
'url' => '.....',
)
)
);
$pages['inbox'] = array(
'name' => 'Inbox',
'url' => '......',
);
then in my html i would do :
<?php foreach ($pages as $section => $page) { ?>
<li class="drop <?php echo ($_GET['section'] == $section) ? 'current' : ''; ?>">
<em><?php echo $page['name'] ?></em>
</li>
<?php } ?>
if you use same name in script and menu option try this, simple recursive:
$menu = array(
'home',
'users',
array('widgets','news','promote','development','bookmarks'),
'wrapper',
'forums',
array('widgets','news','promote','development','bookmarks'),
'contact'
);
function li_menu($arrItens){
preg_match("/[^\/]\/(.*?)\./",$_SERVER['PHP_SELF'],$current);
echo "<ul>";
foreach($arrItens as $title){
if ( is_array($title) ) {li_menu($title);} else {
$cur = ( $title == $current[1] ) ? 'current' : 'drop';
echo '<li class="'. $cur . '"><em>'. $title .'</em></li>';
}
}
echo "</ul>";
}
li_menu($menu);
I did something similar recently using JavaScript where I wanted to change the id of the element that matched the page name to 'cur' so it would attract the appropriate styling.
I used php's $_SERVER["PHP_SELF"] to get the page name, JavaScript to strip it of the first slash and then split it using '.' as a delimiter, giving me the current page name. Then, because I was resetting the id, I had to duplicate the current node and swap the old for the new (you can't dynamically change id).
For class, it's way easier, but it depends how you intend to know which ones to set the className for. Is JavaScript an option? If it is, you're laughing. Doing it purely in PHP, there are too many factors to consider without knowing how you are populating your lists.
I suggest that instead of maintaining a list file of <li> items like that, you should put the items into an array and generate them dynamically.
$arr = array(
'Home' => 'url/to/home',
'inbox' => 'url/to/inbox',
//etc
);
foreach($arr as $name => $url)
{
echo '<li class="drop';
if ($name == $p) echo ' curPage';
echo '"><em>'.$name.'</em></li>';
}
You can use whatever comparison criteria that you need there while generating the loop in order to compare to $p and determine that it's the current page.
A rough example of how you might go about it
$menu = array(
'Home' => '#'
, 'inbox' => '#'
, 'outbox' => '#'
, 'online users' => '#'
, 'all users' => '#'
, 'forums' => '#'
, 'blogs' => '#'
, 'bulletins' => '#'
, 'news' => '#'
);
$current = "outbox";
foreach ( $menu as $label => $url )
{
$css = ( $label == $current ) ? 'drop current' : 'drop';
echo '<li class="', $css, '"><em>', $label, '</em></li>';
}