Posted 3 years ago #
Hello,
I haven't done any form of webdesign for about 5 years or so, and was never any good at lists in the first place.
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
How can I display the pages on a horizontal bar, with each page name separated by " | "? Also, without the "Pages" list title?
Might make it easier (for me) to remove the lists ul ol and li stuff altogether for this... call me old school, but it confuses the hell out of me lol
Thanks :)
It's all explained here... ;-)
Posted 3 years ago #
ok, I've got rid if the 'pages' bit, but I can't see how to remove all the hardcoded ul and li stuff and insert a separator...
http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items
I have no idea how flexible it is, but again it is explained on that page...
Posted 3 years ago #
I can't see how to remove all the hardcoded ul and li stuff and insert a separator...
You don't need to remove the list tags. Float the list items left, remove the default bullet on list items, and create a separator image to be used as a background for your list items.
- Tim
Posted 3 years ago #
if you want an easy way to do this use the multi level navigation plugin
http://pixopoint.com/multi-level-navigation/
I am not sure about the "|" sign but it is horizontal and it doesn't say "pages"
Posted 3 years ago #
Thanks guys... I want to avoid plugins if at all possible. And if I'm honest, I'm old school - all this cross platform css stuff confuses the hell out of me lol. Give me table based layouts any day!
I wish I had the time to learn css all over again and try to understand css layouts, but sadly I don't. And tbh I doubt any visitors will care how its coded as they are more interested in the content.
I'll try to do more research on this though... and I appreciate your time and help :)
Using floats is just basic HTML/CSS....
The example on the page linked before was pretty straight-forward to.
If you get stuck, post back...
Posted 3 years ago #
Thanks, I will do! :)
I haven't done any html or css since 2003 and I wasn't any good at div, floats and ul li ol stuff back then lol.
I'm looking at it now though :)
http://webdesign.about.com/od/advancedcss/a/aa010107.htm
Might help a little...
Float and clear makes more sense when you understand how they work...
Posted 3 years ago #
Thanks for that mate, that's a great place to start.
With kids running around my feet, I just don't have the time or interest right now to learn everything required for cross browser compatibility. Things like this box model hack - http://webdesign.about.com/od/css/a/aaboxmodelhack.htm - and matching heights of 2 or 3 column divs, etc.
Thanks again though bud, I'm sure I'll be back for more help soon lol :)
Posted 3 years ago #
The following snippet in your template will output the desired effect:
<?php
$links = get_pages();
foreach($links as $i => $page)
$links[$i] = '<li class="page-' . (is_page($page->ID) ? 'active' : 'item') . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . apply_filters('the_title', $page->post_title) . '</a></li>';
echo implode(' | ', $links);
?>
Posted 2 years ago #
Hey guys - you said you were able to hide the title? How did you do that? THanks!
Posted 2 years ago #
just remove the "Pages" text from the code.
Posted 2 years ago #
I don't understand. I just use this snippet and it pasts the navigation, with "Pages" included.
<?php wp_list_pages(); ?>
<?php wp_list_pages('title_li='); ?>
Posted 2 years ago #
Sweet, I just replaced wp_list_pages() with wp_list_page(title-li=') that and it worked.
Thanks!
Posted 2 years ago #
Thanks a lot Capn Code!
your snippets really made my day!
:)
Posted 2 years ago #
Glad it worked out for you, alevs.
Posted 2 years ago #
You can add a link to the index by adding the following:
array_unshift($links, '<li class="page-item"><a href="' . get_option('home') . '" title="Home"> Home </a>');
before:
implode(' | ', $links);
This topic has been closed to new replies.
