Page navigation menu with image buttons and page titles underneath

  • Rhand

    (@rhand)


    14 years, 8 months ago

    I would like to make a horizontal menu displaying all pages including home. This is not too hard. However, for each page item I would like to use the same image with a dynamically page title loaded underneath it. So basically a navbar with all page title loaded with the same image or icon above. So every time a page is created a new menu item with this image will be added to the menu with its page title underneath. The image and page title should link to its page. How can I do that?

    wp_list_pages('sort_column=menu_order&title_li=&echo=0');

    creates a html list and CSS aligns it. But I somehow need the image to precede the page link. I don’t know how yet..

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Rhand

    (@rhand)

    14 years, 8 months ago

    I read http://wordpress.org/support/topic/269603?replies=3 and found a plugin there that could help. But I would prefer to just hardcode this in the header.php. Any ideas?

    Thread Starter Rhand

    (@rhand)

    14 years, 8 months ago

    basically I just need to add a list item above each page titel with an image as a background or just and images and followed by the page title. But I would need the image to link to the same page as the page title link generated by wp_lis_pages… That’s my issue.
    My current navigation code is now:

    <ul id="nav">
<li <?php if ( is_home() ) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/"><strong>Home</strong></a></li>
		<?php
        $pages = wp_list_pages('sort_column=menu_order&title_li=&echo=0');
        $pages = preg_replace('%<a ([^>]+)>%U','<a $1><strong>', $pages);
        $pages = str_replace('</a>','</strong></a>', $pages);
        echo $pages;
        ?>
</ul></div>
    Scoe

    (@scoe)

    14 years, 5 months ago

    couldnt you just:

    #nav ul li {
    background: url(images/icon.png) no-repeat;
}

    or if that doesnt work:

    #nav ul li a {
     background: url(images/icon.png) no-repeat;
}

    if you dont have room for the image… then just add some padding

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Page navigation menu with image buttons and page titles underneath’ is closed to new replies.