I am using the iA WordPress theme and the menu dynamically highlights on all pages besides the page I have selected as the posts page within the dashboard.
Within the themes function.php there is a function which wraps the menu item with a strong tag which is then styled using CSS. The function prevents the menu item for the posts page from being wrapped with the strong tag, any ideas how I can change the function so all of the pages are dynamically highlighted?
Here is the function:
static function get_nav_cell($key = '', $default = '') {
$array = array();
$value = ia3_helpers::get_option($key);
if ($value == '') return $default;
if (preg_match("/^c\-(.*)/", $value, $array)) {
$item = ia3_helpers::get_category($array[1]);
$item_i = isset($item->cat_ID)? $item->cat_ID: 0;
$item_n = isset($item->name)? $item->name: __('Unknown', 'ia3');
$item_l = get_category_link($item_i);
if ((strpos($item_l . '***', $_SERVER['REQUEST_URI'] . '***')) && (!is_home())) {
return '<strong><a href="' . $item_l . '">' . $item_n . '</a></strong>';
} else {
return '<a href="' . $item_l . '">' . $item_n . '</a>';
}
} else if (preg_match("/^p\-(.*)/", $value, $array)) {
$item = ia3_helpers::get_page($array[1]);
$item_i = isset($item->ID)? $item->ID: 0;
$item_n = isset($item->post_title)? $item->post_title: __('Unknown', 'ia3');
$item_l = get_page_link($item_i);
if ((strpos($item_l . '***', $_SERVER['REQUEST_URI'] . '***')) && (!is_home())) {
return '<strong><a href="' . $item_l . '">' . $item_n . '</a></strong>';
} else {
return '<a href="' . $item_l . '">' . $item_n . '</a>';
}
} else {
$item_l = stripslashes($value);
$item_u = array();
if (preg_match("/^<a(.+)href=\"(.+)\"(.+)<\/a>$/", $item_l, $item_u)) {
if (isset($item_u[2]) && strpos($item_u[2] . '***', $_SERVER['REQUEST_URI'] . '***')) {
return '<strong>' . $item_l . '</strong>';
} else {
return $item_l;
}
}
return $item_l;
}
}
Many thanks for your help,
Lewis.
]]>I’m building a one-page site, separated into 4 main sections. In the sidebar, I’ve hard coded an unordered list menu to link to each section. When a user clicks on one of the menu items, and the page scrolls (using Smooth Scroll Links plugin) to the corresponding section, I want to highlight that menu item, but I can’t figure out how to assign an ID or class to it.
I’m using a child theme of Thematic. All the code in one page, and the menu links to the sections using an anchor (ie; #section_title). I tried to assign the ID/class by following this post, but its not working (I assume b/c the is_page function doesn’t work on same page anchors).
https://codex.www.ads-software.com/Dynamic_Menu_Highlighting
I’ve also tried using a custom WP menu, but it assigns current_page_item class to each <li>
in the menu. I’ve searched for hours, but can’t find a solution that works.
Any help would be greatly appreciated – thanks!
]]>Highlighting the current page with .current_page_item a
and .current_page_parent a
works perfect as long as its just on a normal page with children, however as soon as you visit a post from events or media, the blog link in the menu is highlighted instead which is incorrect obviously.
** One thing noticeably wrong when looking at WordPress’ output is that the current page classes are not even being generated on the correct li tag that the post belongs to which seems to be the root of the problem. **
For future reference, the Events, Media, & Blog pages all use a special query I’ve written to only grab the respective category for that page, ie.
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("category_name=media&paged=$paged");
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
</div>
<?php
endwhile;
else:
endif;
Hope thats enough info, if not let me know.
Best,
SB
I am using TwentyTen and have created a menu which consists of a few top level pages.
To display the navigation I am using wp_nav_menu() as shown below:
<div id="menu" role="navigation">
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #menu -->
For dynamic highlighting and styling I am using CSS and the .current_page_item class:
#menu {
float: right;
color: #fff;
}
#menu ul {
list-style: none;
font-family: Otari;
text-shadow: 0 1px #637bae;
font-size: 22px;
}
#menu li {
float: left;
margin-left: 21px;
height: 75px;
text-align: center;
line-height: 75px;
min-width: 47px;
}
#menu li:hover {
float: left;
margin-left: 21px;
background: url(images/menu_hover.png) top center no-repeat;
}
#menu li.current_page_item {
float: left;
margin-left: 21px;
background: url(images/menu_hover.png) top center no-repeat;
}
#menu a:link, a:active, a:visited {
color: #fff;
text-decoration: none;
}
All of this is working perfectly on my main navigation. However when I try to duplicate the menu and include it within my websites footer the dynamic highlighting stops working? I have no idea why as the code is exactly the same!
Any help would be appreciated,
Thanks!
]]>I have a top-level horizontal menu, with subpages in custom sidebars for each top-level page. Some of those subpage menus are nested with two levels.
The highlighting works great, except that when on a child-of-child page I would like for both levels of the subpage menu (ul ul li) to display in the sidebar with the current page highlighted. What I have is just the third level (ul li).
Here’s the code:
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children && is_page()) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>
Help?
]]><div id="searchnav">
<div id="search">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<ul id="nav">
<li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/" class="home" title="Home">home</a></li>
<li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/about/" class="about" title="About">about</a></li>
<li<?php if ( is_page('portfolio') || is_page('websites') || is_page('motion') || is_page('video') || is_page('graphics') ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/portfolio" class="portfolio" title="Portfolio">portfolio</a></li>
<li<?php if ( is_page('contact') ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/contact" class="contact" title="Contact">contact</a></li>
</ul>
</div> <!--end of searchnav-->
#nav {padding:8px 50px 0 0;margin:0;list-style-type:none;float:right; }
#nav li {background: none;padding: 0;outline:none;float: left;border:0px solid black;}
#nav a {width: 99px;height: 46px;outline:none;text-indent: -900em;display: block;}
#nav .current {background-position:0 -100px;outline:none;border:0;}
#nav a:hover {background-position:0 -50px;outline:none;border:0;}
#nav .home {background: url(images/nav-home.gif) no-repeat;outline:none;}
#nav .about {background: url(images/nav-about.gif) no-repeat;margin:0 22px 0 0;outline:none;}
#nav .portfolio {background: url(images/nav-portfolio.gif) no-repeat;margin:0 28px 0 0;outline:none;}
#nav .contact {background: url(images/nav-contact.gif) no-repeat;outline:none;}
So if someone could help me out that would be great and also if someone could tell me why there is a break in IE – for some reason the padding does not work and the center align does not work, I put margin: 0 auto; and that is suppose to center everything but in IE it doesnt do it.
Thanks!
]]><?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
<ul><li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&title_li') ?></ul>
Thanks a lot!
]]>