Help with wp_list_pages on horizontal menu bar

jimmymaz
(@jimmymaz)

17 years, 4 months 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 🙂

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

1 2 →

t31os
(@t31os)

17 years, 4 months ago

It’s all explained here… 😉

http://codex.wordpress.org/Template_Tags/wp_list_pages

Thread Starter jimmymaz
(@jimmymaz)

17 years, 4 months 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…

t31os
(@t31os)

17 years, 4 months ago

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…

Technokinetics
(@technokinetics)

17 years, 4 months 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

digi-junk
(@digi-junk)

17 years, 4 months 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”

Thread Starter jimmymaz
(@jimmymaz)

17 years, 4 months 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 🙂

t31os
(@t31os)

17 years, 4 months ago

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…

Thread Starter jimmymaz
(@jimmymaz)

17 years, 4 months 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 🙂

t31os
(@t31os)

17 years, 4 months ago

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…

Thread Starter jimmymaz
(@jimmymaz)

17 years, 4 months 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 🙂
Barret Ruttan
(@capn-code)

17 years, 1 month 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);
?>
```
Spencer Hill
(@ws5f3dj7)

17 years ago

Hey guys – you said you were able to hide the title? How did you do that? THanks!

perfeng702
(@perfeng702)

17 years ago

just remove the “Pages” text from the code.

Spencer Hill
(@ws5f3dj7)

17 years ago

I don’t understand. I just use this snippet and it pasts the navigation, with “Pages” included.
<?php wp_list_pages(); ?>

esmi
(@esmi)

17 years ago

<?php wp_list_pages('title_li='); ?>