Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

menu item highlighting WordPress

  • SOLVED

I have set post categories to display in certain pages on my site ([[LINK href="http://karenmessing.com"]]http://karenmessing.com[[/LINK]])

while on the page the menu item is correctly highlighted (see http://karenmessing.com/?page_id=68)
but once you go into a particular post the menu item is no longer highlighted (http://karenmessing.com/?p=487).

below is the code i used to call the posts within the page
function child_theme_custom_query() {

if (is_page('68')) {

$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts('cat=4' . '&showposts=' . $limit=10 . '&paged=' . $paged );

$wp_query->is_archive = true; $wp_query->is_home = false;
}
}

Answers (7)

2010-02-16

Erez S answers:

can you give me the header.php file,so i can edit him,and to give me the category id of each page(for example for page 68 the cat id is 4)


Erez S comments:

anyway,the code should be something like that:
$cat = get_the_category();
$cat = $cat[0]->cat_ID;
if($cat == 4)$page_to_highlite = 68;
...

on the two first line i get the post category,and then i check by its category id what the is the page,and then you need to edit your them to highlight the item int eh menu
put your header.php file in here if you want me to edit this for you


karenmessing comments:

i have not been editing my header file. i am working off the thematic theme so i have been editing the functions.php.
do you want to see the functions.php?


Erez S comments:

yes


karenmessing comments:


karenmessing comments:

functions attached.


Erez S comments:

i cant see it :\ do you where i should see it? or can you post the code here


karenmessing comments:

<?php
// remove thematic_access()
function remove_thematic_actions() {
remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_actions');

function kmtheme_header(){
?>
<div id="logo">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
<?php
}
add_action('thematic_header','kmtheme_header',4);

function child_theme_custom_query() {

if (is_page('68')) {

$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts('cat=4' . '&showposts=' . $limit=10 . '&paged=' . $paged );

$wp_query->is_archive = true; $wp_query->is_home = false;
}
}

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 262, 195, true ); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 262, 195 ); // Permalink thumbnail size


function get_custom_field($key, $echo = FALSE) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if ($echo == FALSE) return $custom_field;
echo $custom_field;
}?>


Erez S comments:

<?php
// remove thematic_access()
function remove_thematic_actions() {
remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_actions');
function kmtheme_header(){
?>
<div id="logo">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
<?php
}
add_action('thematic_header','kmtheme_header',4);
function child_theme_custom_query() {
if (is_page('68')) {
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=4' . '&showposts=' . $limit=10 . '&paged=' . $paged );
$wp_query->is_archive = true; $wp_query->is_home = false;
}
}
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 262, 195, true ); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 262, 195 ); // Permalink thumbnail size
function get_custom_field($key, $echo = FALSE) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if ($echo == FALSE) return $custom_field;
echo $custom_field;
}
function add_menuclass($ulclass) {
global $post;
$cat = get_the_category();
$cat = $cat[0]->cat_ID;
$page_to_highlite = 9;
if($cat == 4)$page_to_highlite = 68;
$ulclass = str_replace('page-item-'.$page_to_highlite,'page-item-'.$page_to_highlite.' current_page_item',$ulclass);
return $ulclass;
}
add_filter('wp_page_menu','add_menuclass');
?>

that should work for the "print" page,can you tell me what is the category of the posts in the "web" and the "identity" pages?


karenmessing comments:

the category id for identity is 5 and for web is 3.


Erez S comments:

wait a minute,are you sure this is the full file? and does it works for the print page?


Erez S comments:

Already fixed this for him :)

2010-02-16

Monster answers:

you use page and sub page of category with post ?


try with the permalink like this:

/%category%/%postname%/


karenmessing comments:

it still doesnt work.

2010-02-16

Oren Yomtov answers:

Hey Karen,

That file is not what needs editing.

I need the file which outputs the <strong>menu div</strong>:
<div class="menu"><ul class="sf-menu"><li class="page_item page-item-9"><a href="http://karenmessing.com" title="Home">Home</a></li><li class="page_item page-item-68"><a href="http://karenmessing.com/?page_id=68" title="print">print</a></li><li class="page_item page-item-99"><a href="http://karenmessing.com/?page_id=99" title="web">web</a></li><li class="page_item page-item-106"><a href="http://karenmessing.com/?page_id=106" title="identity">identity</a></li><li class="page_item page-item-2"><a href="http://karenmessing.com/?page_id=2" title="about/contact">about/contact</a></li></ul></div>

I also need the category IDs of "WEB" and "IDENTITY".

Regards,
Oren.


karenmessing comments:

this is what i have in my page template. i am using creating a child theme from thematic and have not altered the header file. the category id for identity is 5 and for web is 3.
// page id 21 will get category ID 12 posts, page 16 will get category 32 posts, page 28 will get category 17 posts
if (is_page('99') ) {
$cat = array(3);
} elseif ( is_page('68') ) {
$cat = array(4);
} elseif ( is_page('106') ) {
$cat = array(5);
} else {
$cat = '';
}


Oren Yomtov comments:

Try adding this piece of code to your functions.php
function childtheme_menu() {
$cat = @get_the_category();
$cat = @$cat[0]->cat_ID;?>
<div class="menu">
<ul class="sf-menu">
<li class="page_item page-item-9"><a href="http://karenmessing.com" title="Home">Home</a></li>
<li class="page_item page-item-68<?php if (is_page('68') || $cat==4) echo ' current_page_item' ?>"><a href="http://karenmessing.com/print/" title="print">print</a></li>
<li class="page_item page-item-99<?php if (is_page('99') || $cat==3) echo ' current_page_item' ?>"><a href="http://karenmessing.com/web/" title="web">web</a></li>
<li class="page_item page-item-106<?php if (is_page('106') || $cat==5) echo ' current_page_item' ?>"><a href="http://karenmessing.com/identity/" title="identity">identity</a></li>
<li class="page_item page-item-2"><a href="http://karenmessing.com/aboutcontact-2/" title="about/contact">about/contact</a></li>
</ul>
</div>
<?php }

add_action('wp_page_menu','childtheme_menu');

2010-02-17

Ali Hussain answers:

If you could upload the whole zip file for the theme, the process would be way faster. As this is a child theme, it may have to do with styling works + functions.php + header.php

Upload your theme here so we could test it locally also speeding up things

2010-02-17

kjll kll answers:

@all
as Karen said, she is using thematic
http://themeshaper.com/thematic/


@Karen

The problem is that wordpress does not support the function to highlight a linked page if you are inside a posting.

That's pure normality, because if you are browsing a single posting you are not inside another posting or a page.

Each page link gets the "active" style by adding the class "current_page_item". Because the top pages menu is auto generated it isnt that easy to add this class if you are not actually looping this page.

If you put the links there by hand, you could use some code like that:


<li class="<?php if (is_page('68') || in_category('print')) : ?>current_page_item<?php endif;?>">
<a href="<?php bloginfo('wpurl'); ?>/?page_id=68">Print</a>
</li>





karenmessing comments:

hi,
the menu is automatically generated. i did use current_page_item in my style.css and it works while on the page. is there a way to use the post category to the page menu item?


kjll kll comments:

You have to go to...

libary/extensions/header_extensions.php

find

<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_page_menu('sort_column=menu_order') ?>
</div><!-- #access -->


replace it with

<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>

<ul class="mymenu">
<li class="<?php if (is_page('YOURPAGEID') || in_category('THECATEGORYID')) : ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('wpurl'); ?>/?page_id=YOURPAGEID">YOURPAGENAME</a></li>
<li class="<?php if (is_page('YOURPAGEID') || in_category('THECATEGORYID')) : ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('wpurl'); ?>/?page_id=YOURPAGEID">YOURPAGENAME</a></li>
<li class="<?php if (is_page('YOURPAGEID') || in_category('THECATEGORYID')) : ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('wpurl'); ?>/?page_id=YOURPAGEID">YOURPAGENAME</a></li>
</ul>

</div><!-- #access -->


Replace in each li

YOURPAGEID
YOURPAGENAME
THECATEGORYID

with the id of the page and category and the page name...


karenmessing comments:

i tried this and it did not work.

2010-02-17

AdamGold answers:

You can use something like that:
In your page template (where you output the menu), paste the following:

<?php
if ( in_category('web') )
{
$web = 'highlited';
}
elseif ( in_category('identity') )
{
$identity = 'highlited';
}

?>


Then in identity li & web li, you'll add the following:

<li class="<?=$web?>">

Of course for identity you'll do "$identity".

In your CSS, add the class .highlited (or change the name in the above code for your class name)

2010-02-17

Utkarsh Kukreti answers:

Try this code. (add to the end of functions.php)

function wpq_menu_class($menu)
{
$pages = array(58, 68, 106);
$categories = array(3, 4, 5);
$catID = array_shift(get_the_category())->cat_ID;
if($catID && in_array($catID, $categories))
{
$key = array_search($catID, $categories);
$menu = str_replace('page-item-' . $pages[$key], 'page-item-' . $pages[$key] . ' current_page_item', $menu);
}
return $menu;
}
add_filter('wp_page_menu', 'wpq_menu_class');


The $pages and $categories arrays correspond to the page ID's and the category ID's you're using. You can change these anytime by just changing one line.

If you have any problems with this, feel free to message me.