WordPress.org

Ready to get started?Download WordPress

Forums

Page navigation menu with image buttons and page titles underneath (4 posts)

  1. Rhand
    Member
    Posted 4 years 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..

  2. Rhand
    Member
    Posted 4 years 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?

  3. Rhand
    Member
    Posted 4 years 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>
  4. Scoe
    Member
    Posted 4 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic