The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Basic Image Navigation (WP)

  • # April 12, 2009 at 3:41 am

    That’s much better! :D
    Ok, so now there are two ways you can go. You can either hardcode your links or better still, use wp_list_pages.
    If you want to hardcode them then do this




    If you want to use wp_list_pages then put this in your header.php


    and WordPress will output a list of links with each <li> having its own unique class something like this

    I always find the easiest way to check which item has which class is to have a quick look with firebug. Then it’s just a case of replacing the classes you have now with the WordPress classes.

    ul#nav a {
    background:transparent url(imgs/projects_buttons.png) no-repeat scroll center top;

    and so on. Hope that helps. :)

    # April 13, 2009 at 1:06 am

    That did it…in the end it was all about the custom structure that was giving me trouble.

    I could have actually used the same setup I had in the original navigation I had, if I had set a custom structure in the dashboard of "/%postname%/" and used the directory name in my href.

    (Cleaned up my site considerably in the process though…)

    Thanks for your help and quick replies apostrophe!

    # April 13, 2009 at 6:37 am

    Looks like I was wasting my time then. You might have mentioned that you weren’t using any WordPress pages. Can’t really see why you’re using WordPress at all. You could have easily done that with a static site.

    # April 13, 2009 at 2:15 pm

    No, not a waste of time at all. The site i’m building has a custom theme for WordPress, and I need the CMS part that static sites don’t offer.

    The link I sent was just the css pages to get the code working before I set it up for WordPress.

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed