Grow your CSS skills. Land your dream job.

Basic Image Navigation (WP)

  • # April 8, 2009 at 11:17 pm

    Hi,

    I’ve built a custom theme for WordPress and am having some trouble with the navigation…

    I know that there is a line of php that you can enter to replace all your navigation, when say – that its in an ordered list for example.

    Question is, if I have image-based navigation that needs to be referenced more along the regular html way, via <a href="pagelink here">, is there a way to do so for multiple links that would work with WordPress, if I created an About page and a contact page in WordPress that I wanted to be able to control through my WordPress Dashboard?

    Thanks in advance…

    Maris

    # April 8, 2009 at 11:25 pm

    Chris: if you are reading this, I have noticed in your files that I downloaded from your PERSONAL HOMEPAGE THEME that you had a similar situation, and you put the links in as <a href="/"> for HOME, and <a href="/about/"> for the ABOUT page…. been trying to figure out how you made that work….?

    # April 9, 2009 at 9:45 am

    Anyone?

    Rob
    # April 9, 2009 at 10:07 am

    sorry, the question keeps flyin over my head lol

    You want to do what? a dynamic nav bar?

    # April 9, 2009 at 10:11 am

    Don’t understand the question. :?

    # April 9, 2009 at 1:24 pm

    Sorry…i’ll try to clarify some more…

    For a WordPress blog, after creating a custom design, the navigation usually consists of a list, that is replaced by a line of php:

    (Replace <ul id=nav> with <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>)

    My question is, my navigation is a little more complicated and didn’t use a simple list. I used images so that I can get it to appear exactly how I want it to, and seeing as its made up of purely images, I can not replace the list of pages with the usual php line above, and need to use an alternate or more traditional route of <a href="whatever page"> for each of my separate nav items.

    What would each of my hrefs link to, so that I could have it linking to an ABOUT page and CONTACT page, and be able to edit it from the WordPress Dashboard?

    # April 9, 2009 at 1:42 pm

    I don’t really understand why you can’t use wp_list_pages. Every list item has its own unique class generated for you by WordPress, so you can use that as your hook for your images.

    Otherwise it’s just:

    Code:
    # April 9, 2009 at 5:24 pm

    Let me ask my question a different way…

    How do you do rollovers using images for navigation in WordPress?

    (I’ve used a "css trick" to do an image rollover, and if I replace my list items with <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?> the rollovers no longer work.

    # April 9, 2009 at 10:33 pm

    You do rollovers for WordPress nav exactly the same as on any other type of site. ie. with sprites. Just use the classes that WordPress creates for you.
    Can you post a link?

    # April 10, 2009 at 1:15 pm

    Here’s the site i’m working on:

    http://www.riverbearconstruction.com/working/

    # April 10, 2009 at 2:30 pm

    Wow! That’s an interesting approach. :)
    I’m not sure that you have quite grasped the point of CSS. The idea is to separate presentation from content. Filling your header with empty <li> tags to just to put background images where you want them is not generally considered to be the best method.

    Chris did a couple of good video series that may help http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/ and http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/. Otherwise, perhaps downloading a couple of free WP themes and deconstructing them, with the help of firebug, might get you back on track.

    # April 10, 2009 at 5:08 pm

    Well, i’ll check out the videos, but i’ve seen plenty of custom wordpress sites with images as buttons in the navigation. Hopefully one of these will point me in the right direction.

    # April 10, 2009 at 5:15 pm

    It’s really simple to use images for navigation but you need to sort out your layout first.

    # April 10, 2009 at 6:36 pm

    Thanks, I see that he’s using a similar approach to the rollover. Looks like this is going to help a lot.

    # April 11, 2009 at 11:30 pm

    So, the thread continues…

    I’ve watched the videos and more or less used the exact same styles and code for my site, its definitely much cleaner now:

    http://www.riverbearconstruction.com/working

    Beyond actually cutting up this code for WordPress, in regards to the image navigation, I still don’t understand how I can make these links I have in my navigation work with WordPress…! Please help.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

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