the | is actually a CSS border as stated in your stylesheet
#menu li a {
height: 25px;
padding: 0 5px 0 5px;
display: block;
float: left;
color: #6e86ad;
line-height: 25px;
text-decoration: none;
border-width: 0 1px 0 0;
border-style: solid;
border-color: #aaa;
}
It specifies a right border of 1px, solid, colored #AAA
Sorry to sound dumb, but what would I need to do to change it into the style of say a colon or slash? The only border-style’s I’m aware of wouldn’t allow me to do that, so would I delete the bolded portion of the CSS and input the slashes manually (if possible)?
if you delete the bold part – get the line under for border-color as well.
None of the normal list-style parameters are a colon or slash – (dot, square or circle). Possibly you could use a list-style-image, but that seems a bit contorted just get a slash.
Since these are added with a single call from your page template,
<?php wp_list_pages(); ?>
I’m not sure how you would add them manually without tinkering with deep WP code – or replacing the wp_list_pages call with some PHP code to do the same thing.
Might check this out
http://codex.wordpress.org/Template_Tags/wp_list_pages
The following snippet in your template will output the desired effect, just change | character in echo implode(‘ | ‘, $links); to whatever you like;
<?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);
?>
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);
