Support » Fixing WordPress » How can I add the list (background) images into Dynamic menu highlighting

  • Resolved rgblog


    I’m creating the new theme now using version 2.0.5. I’ve successfuly made the vertical dynamic menu highlighting on the sidebar. I used a very helpful tutorial

    Now, I want to add different list image into each list item of that menu. However, I reralized that wp_list_pages I used for dynamic menu highlighting has already been given class “current_page_item”. Is there any ways to add list image (technically, adding background in CSS) into the individual list item in wp_list_pages? Those list images I want to add are supposed to be static.

    Here’s my code for dynamic menu highlighting.

    <?php if (is_home()): ?>
    <li class="current_page_item"><a href="<?php echo get_settings(’home’);?>">HOME</a></li>
    <?php wp_list_pages('sort_column=menu_order&title_li=&exclude=10,11,12,13' ); ?>
    <?php else : ?>
    <li><a href="<?php echo get_settings(’home’); ?>">HOME</a></li>
    <?php wp_list_pages('sort_column=menu_order&title_li=&exclude=10,11,12,13' ); ?>
    <?php endif; ?>

    Here’s css.

    #menu ul li a, .page_item a, .page_item a:hover, .current_page_item a,.current_page_item a:hover
    {margin-left: 10px;
    padding-left: 15px;
    text-decoration: none;}
    #menu ul li a {
    color: #404040;
    #menu ul li a:hover {
    color: #0067ac;
    #menu ul li.page_item a {
    color: #333;
    #menu ul li.page_item a:hover {
    color: #0067ac;
    #menu ul li.current_page_item a {
    color: #cd4c27;
    #menu ul li.current_page_item a:hover {
    color: #ccc;

    Here’s my test site’s url.

    Here’s what I want to make the menu look like.

    Thank you

Viewing 1 replies (of 1 total)
  • rgblog


    I guess it was a dumb question because I’ve figured out on my own.
    I was gonna dive in the core source of wp_list_pages at template-functions-post.php but I realized it would take me forever to figure its structure out. Plus, I did not want to rework the menu without dynamic menu highlight utilizing wp_list_pages.

    What I did for a resolution was just adding background into
    ul tag by setting it up fixed width & height in CSS. It’s not perfect in terms of flexible font sizing but it works anyway.

Viewing 1 replies (of 1 total)
  • The topic ‘How can I add the list (background) images into Dynamic menu highlighting’ is closed to new replies.