Grow your CSS skills. Land your dream job.

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

    Code:

    eg

    Code:

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

    Code:

    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.

    Code:
    ul#nav li.page-item-5 a {
    background:transparent url(imgs/projects_buttons.png) no-repeat scroll center top;
    width:422px;
    }

    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.

*May or may not contain any actual "CSS" or "Tricks".