Basic Image Navigation (WP)

[maris]

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

[maris]

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….?

[maris]

Anyone?

[Rob MacKay]

sorry, the question keeps flyin over my head lol

You want to do what? a dynamic nav bar?

[apostrophe]

Don’t understand the question. :?

[maris]

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?

[apostrophe]

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:

ABOUT

CONTACT

[maris]

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.

[apostrophe]

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?

[maris]

Here’s the site i’m working on:

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

[apostrophe]

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.

[maris]

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.

[apostrophe]

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

[maris]

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

[maris]

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.

[Author]

Posts