dyadica.net

As this site progresses towards its next stage of completion need has arisen for a simple breadcrumb trail to be created, primarily for navigation within (wordpress) pages and articles.

Little did I know this would lead to something much greater which I have dubbed: The Paper Trail.

I started out by using the f$_SERVER['REQUEST_URI']; command to obtain the current page address. I then explode the result at each “/” to give me a list of individual pages. Then by looping through this list and incrementing the path value each time with the previous result I can construct paths to each of the respective sections.

The first pass looked like this:

<?php $pth = $_SERVER['REQUEST_URI']; ?>
<?php $paths = explode(“/”, $pth); ?>
<?php $trail = “”; ?>

<ul>
<?php foreach($paths as $path) : ?>
<?php $ptitle = $path; ?>
<?php $pURL = $trail.$ptitle.”/”; ?>
<li><a href=”<?php echo bloginfo(‘url’).$pURL; ?>”><?php echo $ptitle; ?></a></li>
<?php $trail = $pURL; ?>
<?php endforeach; ?>
</ul>

I then decided to modify the above to use a while loop to provide facility for control at various steps of the iteration if needed. Primary thoughts at this stage were CSS styling amongst others. In order to do this additional variables were added before the <ul> tags to cater for the while loop iteration:

<?php $count = (sizeof($paths)-1); ?>
<?php $i = 1; ?>

$count defines the number of elements within the $paths array and $i is used to store the increment. The $count value is reduced by 1 to cater for the trailing “/” within the url. In order to provide ability for styling the current page via CSS the following if statement was then added:

<?php if ($i == $count) : ?>
<?php $class = “trail-current”; ?>
<?php else : ?>
<?php $class = “trail-item”; ?>
<?php endif; ?>

This sets a $class variable dependent upon location within the $paths array, the last item within the array always equating to your current location. This can easily be expanded for different cases if needed.

The class is then set via inserting the $class variable within the <li> tag like so:

<li class=”<?php echo $class; ?>”></li>

Finally the while loop is the incremented via the following:

<?php $i = $i + 1; ?>

So with all these modifications iteration 2 of the code now looks like this:

<?php $pth = $_SERVER['REQUEST_URI']; ?>
<?php $paths = explode(“/”, $pth); ?>
<?php $trail = “/”; ?>
<?php $count = (sizeof($paths)-1); ?>
<?php $i = 1; ?>

<ul id=”paper-trail”>

<li><a href=”<?php echo bloginfo(‘url’); ?>”>root</a></li>

<?php while ( $i <= $count ) : ?>

<?php $ptitle = $paths[$i]; ?>
<?php $pURL = $trail.$ptitle.”/”; ?>

<?php if ($i == $count) : ?>
<?php $class = “trail-current”; ?>
<?php else : ?>
<?php $class = “trail-item”; ?>
<?php endif; ?>

<li class=”<?php echo $class; ?>”><a href=”<?php echo bloginfo(‘url’).$pURL; ?>”><?php echo $ptitle; ?></a></li>

<?php $trail = $pURL; ?>
<?php $i = $i + 1; ?>

<?php endwhile; ?>

</ul>

At this stage the code is very wordpress bespoke due to the <?php echo bloginfo(‘url’); ?> call but this can simply be remedied by defining an additional variable if needed eg:

<?php $root = “http://www.dyadica.net”; ?>
<li><a href=”<?php echo $root; ?>”>root</a></li>

Additional issues at this stage were the hard coded root page and a spurious additional link. With this in mind however focus was turning to facility for child paths to also be displayed.

With a little playing it was easy to fix the additional link issue. All that was needed was to move the “/” location from the $pURL definition to the $ptrail definition (Ok obvious to those who are more PHP savvy, but hey I’m new to this PHP lark.) resulting in the two variable definitions as follows:

<?php $pURL = $trail.$ptitle; ?>
<?php $trail = $pURL.”/”; ?>

Do that and you have a fully functional breadcrumb trail of sorts. With this issue solved, functionality was added to display the current pages children (if existent).

This was accomplished via code which utilizes the wordpress wp_list_pages() call as detailed:

<?php $children = wp_list_pages(‘title_li=&child_of=’.$post->ID.’&echo=0&depth=1′); ?>

<?php if ($children) : ?>
<?php echo $children; ?>
<?php endif; ?>

I then decided to extent the $class definition to cater for the both the current pages parent and the newly added children as follows:

<?php if ($i == ($count-1)) : ?>
<?php $class = “trail-parent”; ?>
<?php elseif ($i == ($count)) : ?>
<?php $class = “trail-current”; ?>
<?php else : ?>
<?php $class = “trail-item”; ?>
<?php endif; ?>

You can see a working version at this stage in the sidebar to the left, the code is as follows:

<!– give our trail a title –>
<img alt=”permalink image” class=”permalink” src=”<?php bloginfo(‘template_directory’); ?>/images/permalink.gif” />
<div class=”post-head”>papertrail</div>

<!– obtain the current page address –>
<?php $pth = $_SERVER['REQUEST_URI']; ?>

<!– break up current page url into chunks stored within array $paths –>
<?php $paths = explode(“/”, $pth); ?>

<!– initiate trail location to site root –>
<?php $trail = “/”; ?>

<!– define size of $paths and cater for trailing “/” by subtracting 1 –>
<?php $count = (sizeof($paths)-1); // change to 2 to remove current page link ?>

<!– set while loop iteration value –>
<?php $i = 1; ?>

<!– define paper-trail list –>
<ul class=”paper-trail”>

<!– hard code home-page –>
<li><a href=”<?php echo bloginfo(‘url’); ?>”>root</a></li>

<!– populate paper-trail via iteration through $paths array –>
<?php while ( $i <= $count ) : ?>

<!– define page title and its url –>
<?php $ptitle = $paths[$i]; ?>
<?php $pURL = $trail.$ptitle; // removed “/” to solve traling issue (v0.3)?>

<!– set parent and current class for css styling –>
<?php if ($i == ($count-1)) : ?>
<?php $class = “trail-parent”; ?>
<?php elseif ($i == ($count)) : ?>
<?php $class = “trail-current”; ?>
<?php else : ?>
<?php $class = “trail-item”; ?>
<?php endif; ?>

<!– output the list item / page link –>
<li class=”<?php echo $class; ?>”><a href=”<?php echo bloginfo(‘url’).$pURL; ?>”><?php echo $ptitle; ?></a></li>

<!– incriment our variables –>
<?php $trail = $pURL.”/”; // edited to cater for trailing “/” (v0.3)?>
<?php $i = $i + 1; ?>
<!– close the loop –>
<?php endwhile; ?>

<?php $children = wp_list_pages(‘title_li=&child_of=’.$post->ID.’&echo=0&depth=1′); ?>

<?php if ($children) : ?>
<?php echo $children; ?>
<?php endif; ?>

</ul> <!– [paper-trail] –>

It was at about this time I began to get excited, for it is at this stage The Paper Trail was truly born. In brief, by converting the above to a function which then can be reciprocated maps can be built for pages and even a whole sites and thus the paper trail lives.

Are you excited well if so more on this tomorrow.