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?
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....?
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?
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.
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.
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?
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.
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.
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.
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
<a href=\"wordpress/whatever your page title is/\">page</a>
eg
<a href=\"wordpress/about/\">ABOUT</a>
If you want to use wp_list_pages then put this in your header.php
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 li.page-item-5 a { background:transparent url(imgs/projects_buttons.png) no-repeat scroll center top; width:422px; }
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!
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.
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
You want to do what? a dynamic nav bar?
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?
Otherwise it's just:
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.
Can you post a link?
http://www.riverbearconstruction.com/working/
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.
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.
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
eg
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 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. :)
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!
The link I sent was just the css pages to get the code working before I set it up for Wordpress.