"Current" state for sidebar menu

  • JD

    (@jennyintagliocreative)


    14 years, 3 months ago

    Hello! I’m using a text widget inside one of the sidebars for my main menu. I used my own html because it has to look a certain way, so the menu is custom. The problem is, I need to create a “current” state for each of those menu items, so that when on a certain page, the associated menu item will be in the “current” state. I know how to do this inside a normal website but with WordPress, I’m not sure how to accomplish this. I’m assuming that I would need a little php to achieve this. I don’t know php but I can implement the code if someone could tell me what to do. I’m using the Clean Line theme, and my own CSS. Thank you for your help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Purab

    (@wordpressapi)

    Dont use the text widget. Use the pages widget in sidebar. that will solve your issue. I think issue is very minor..or you can copy paste the following code in sidebar.php file:

    <ul>
  <?php wp_list_pages('sort_column=menu_order&title_li=<h2>' . __('Prose') . '</h2>' ); ?>
</ul>

    [email address removed]

    Thread Starter JD

    (@jennyintagliocreative)

    Okay, I found the answer in doing some research. But I’m going to put the answer here incase anyone like me enters this forum and needs help.

    I found the answer in this article: https://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/

    Basically there is a line of php code that should exist inside the header.php file inside the body tag that looks like this:

    <body <?php body_class(); ?>>

    If it’s not in the theme you are using, replace the normal body tag with the one above. When a page is loaded, the source code could look something like this:

    <body class=”page page-id-3 parent-page-id-0 page-template-default”>

    This creates styling hooks that can be used in the css to allow for custom css on each page. If you need to create a different “current” state for each page, the css code could look something like this:

    body.page-id-124 #main-nav ul li#about a {}

    As you can see, the style is for the main navigation menu located inside a list and inside each list is an id. This styling is for the “About” page/about menu list item.

    I hope this helps.

    Thread Starter JD

    (@jennyintagliocreative)

    For much more detail on the body_class() function please see the link below…VERY helpful:

    https://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘"Current" state for sidebar menu’ is closed to new replies.