Extra characters in the wp_list_pages

Yup, I’m with ya.

But the CSS isn’t.

I get:

| HOME | ABOUT | OTHER PAGE | OTHER PAGE

No trailing |, but as you see .. HOME still has once before it.

#menu ul li {
  list-style-type: none;
  display: inline;
  padding: 0 8px 0 8px;
  border-left: 1px solid #cccccc;
}

.menuhome { border: none; }

<div id="menu"><ul class="menuitems"><li class="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li> <?php wp_list_pages('title_li='); ?></ul></div>

you’re not using IE6 by chance are you? I just googled around, and it seems IE6 would prefer you to use

.menuhome { border: 0; }

the two *should* be equivalent (for all intents and purposes), but perhaps not.

Nope, I’m on Firefox 2.0.0.14

But I’ll try the 0 and see if that works.

Which .. sadly it doesn’t work.

There must be a conflict in the CSS somewhere. I’ll try renaming the menuhome to something else.

screw it… I looked up the default classes for the wp_list_pages function… it’s actually better if you use them anyway.

#menu ul li {
  list-style-type: none;
  display: inline;
  padding: 0 8px 0 8px;
}
#menu .page_item {
  border-left: 1px solid #cccccc;
}

you don’t need .menuhome at all, and don’t try to put page_item in your template, the list pages function does that already.

SWEET!!

Thanks a lot man! That did the trick!

I really appreciate your help. Thanks a lot!

heh, no worries, really should have started there… except that you’ll have to change your CSS if you switch to wp_list_bookmarks, or categories for your menu, at any point.

Nah, I’m not going to be fancy about it.

Though, right before you posted that I though “Dang it .. just move home to the end!” .. and yeah .. that worked fine.

haha .. simple things.

I’m trying to do a similar thing, but without the hardcoded home page, but it’s not working – I’m getting the leading pipe as well. I think I might be missing something…

This is mine:

#menu ul li {
  list-style-type: none;
  display: inline;
  padding: 0 8px 0 8px;
}

#menu .page_item {
  border-left: 1px solid #cccccc;
}

.menuitems {
	text-align: center;
	color: #CCCCCC;
	font-size: 9px;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

<?php
  if($post->post_parent)
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
  else
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  if ($children) { ?>

  <div id="menu"><ul class="menuitems"><?php echo $children; ?></ul></div>

  <?php } ?>

Hi taddmencer,
i had the same problem it is really frustrating i tried search for a widget that can do ” | ” between pages but no luck…
i sat for hours on code and found a solution that might work for you as well:
locate file“classes.php” in folder /wp-includes
in there i think around line 1175 or so just CUT N PASTE the syntax it should work change the inline css to your design:

inside the function start_el

$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . $link_before . apply_filters('the_title', $page->post_title) . $link_after . '</a>';
$output .= "<li style='padding-top:57px; color:#aaaaaa; font-size:16px' > | </li>";
		if ( !empty($show_date) ) {

hope this helps you all.
cheers

Alternatively, 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);
?>