wordpress showing siblings of current page w/bootstrap

2 Views

I’m customising a wordpress theme and I’m trying to achieve a submenu which only shows sibling pages to the current page, not including the page i’m on. for example if the structure is:

Fruits
–apples
–pears
–oranges

Read More

and i’m on “Apples” the submenu would show links to “pears” and “oranges”.

The other twist is that i’m using twitter bootstrap for styling. I have the wordpress function below from http://wp-snippets.com/list-subpages-and-siblings/: 

<?php
global $wp_query;
if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
}
else {
$parent = $wp_query->post->post_parent;
} ?>

<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>

<div id="submenu">
    <ul class='breadcrumb'>

 <?php wp_list_pages("title_li=&child_of=$parent" ); ?>

    </ul>
</div>
<?php endif; ?>

I’m having trouble working out how I can add in dividers between links after the outputted links (not including the final link) and also how I can remove the page i’m on from being printed.

Heres the plain HTML markup of what I’d like: 

<ul class="breadcrumb smaller-bread">
                      <li><a href="<?php echo site_url('/offerings/apples/'); ?>">Apples</a><span class="divider">-</span></li>
                      <li><a href="<?php echo site_url('/offerings/pears/'); ?>">Pears</a><span class="divider">-</span></li>
                      <li><a href="<?php echo site_url('/offerings/oranges/'); ?>">Oranges</a><span class="divider">-</span></li>
</ul>

Does anyone have any tips or pointers to get me on my way? Appreciated, Matt

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You might put an IF ! check around each li, and check it against the current URL. Something like this would get you the current page: http://webcheatsheet.com/php/get_current_page_url.php

    Then:

    <?php if(! $pageURL == $curPageURL) ?>
  <li> ... </li>
<?php endif; ?>

    Then use CSS to put the borders in, rather than divider elements, like:

    ul.breadcrumb li {
  border-bottom: 1px solid;
}
ul.breadcrumb li:last-child {
  border-bottom: none;
}