CSS styling menus to show current page (done automatically)

  • Resolved gregremote

    (@gregremote)


    15 years ago

    I have seen solutions for this, but none of them that work without custom CSS for each individual page.

    I am building my menu with wp_list_pages. So if you are on the home page, I want the home page menu item to be a different color. This is for a custom theme, so I am hoping that this can be done automatically.

    What I was thinking was to write PHP that sets a different CSS style if you are on the page listed in the menu.

    if (on ‘home’ page) && (menu item == ‘home’)
    {
    Use highlighted css
    }
    else
    {
    Use normal CSS
    }

    But wp_list_pages looks to output everything without being able to differentiate which menu is listed.Would I need to access the DB directly to accomplish this.

    I am sure this has been done before – but can not find reference for it.

    thx!

Viewing 2 replies - 1 through 2 (of 2 total)

  • I wish I would have taken better notes when I designed my theme, so I knew where things came from. But you are looking to highlight current page? I do that with this (but I forget how it works….)

    this is my menu from header.php

    <div id="menu">
<ul>
      <?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
      <li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
      <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
</div>

    And this is my css…..

    #menu ul{
	margin:0px;
	padding:0px 0px 0 10px;
	list-style-type:none;
	width:auto;
	float:left;
	}
#menu ul li{
	display:block;
	float:left;
	margin:0 10px 0 10px;
	}
#menu ul li a{
	display:block;
	float:left;
	color:#cc99aa;
	text-align: center;
	text-decoration:none;
	padding:7px 0px 0 0px;
	height: 23px;
	}
#menu ul li a:hover,#menu ul li.current_page_item a{
	color:#fff;
	height: 23px;
	text-align: center;
	text-decoration:underline;
	}
#menu ul li .current_page_item a,#menu ul li .current_page_item a:hover{
	color:#020202;
	width: 106px; height: 23px;
	}

    Again…..wish I could describe better, hope you can use some of this….

    Thread Starter gregremote

    (@gregremote)

    Hey thank you for that!

    I didn’t realize that current page was included in the class description.

    To achieve what I was looking for in my case was to add current_page_item to my hover class. I suppose you could have different styling for hover and current_page_item too.

    from:
    #dropmenu a:hover {

    to:
    #dropmenu .current_page_item a, .current_page_item a:hover {

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS styling menus to show current page (done automatically)’ is closed to new replies.