Next/Previous Links on Article Pages

Some web pages have "next" and "previous" links for related articles.

There are a number of reasons a site designer would implement that. Here are several:

• To make navigation more convenient for the reader.

• To suggest a reading sequence.

• To remind the site user that more articles are available.

This particular article describes how to implement "next" and "previous" links for your web pages.

A live example is at a Friday Photo Series page. Each page in the series has "◀" and "▶" links, with the words "A Friday Photo" between them.

To get the functionality for your website, upload a PHP script to your server (script provided further below). The PHP script contains a list of locations that compose the series.

Then, each page gets HTML markup and PHP code to insert "next" and "previous" links on the page.

Implementation Instructions

The first implementation action is to install the PHP script on your server. Then, update the pages that will have the "next" and "previous" links.

The PHP Script

Here is the PHP script. Save it as PreviousNext.php or other *.php file name. Customization notes follow.

<?php
/*
Previous/Next Web Page Navigation
Version 1.0
January 31, 2019
Will Bontrager Software LLC
https://www.willmaster.com
*/

/* Customization */
// Two places to customize.

// Place One:
// The list of sequencial URIs
// Between the lines containing the word "SEQUENCE", specify 
//    the URLs or URIs in the sequence. Each needs to be on 
//    a separate line. Blank lines are ignored.
// URLs begin with protocol http:// or https://. A URI is the 
//    URL minus the leading protocol and domain name parts. 
//    Example:
//       URL: http://example.com/subdirectory/page.php
//       URI: /subdirectory/page.php
// URLs and URIs may be mixed in the list.

$URIsequence = <<<SEQUENCE
/content/page1.php
/content/page2.php
http://example.com/content/page3.php
https://example.com/content/page4.php
/content/page5.php
SEQUENCE;


// Place Two:
// What happens at first and last URL on the list.
// Specify 1, true, or 'yes' for bounded sequence of URIs 
//    (stop at first and last URL on list, do not rotate).
// Otherwise, specify anything else 
//    (first and last on list are connected to each other in rotation).

$URIsAreBoundedSequence = false;

/* End of customization */

$NextLocation = false;
$PreviousLocation = false;
$URIsAreBoundedSequence = (
    $URIsAreBoundedSequence===1 or 
    $URIsAreBoundedSequence=='1' or 
    $URIsAreBoundedSequence===true or 
    strtolower($URIsAreBoundedSequence)=='yes' or 
    strtolower($URIsAreBoundedSequence)=='true'
    ) ? true : false;
$URIs = array();
foreach(preg_split('/[\r\n]+/',trim($URIsequence)) as $uri) { $URIs[] = preg_replace('!^https?://[^/]+!s','',trim($uri)); }
$lastURIindice = count($URIs);
$pointer = array();
for($i=0; $i<$lastURIindice; $i++) { $pointer[$URIs[$i]] = $i; }
$indiceOfThisURI = isset($pointer[$_SERVER['PHP_SELF']]) ? $pointer[$_SERVER['PHP_SELF']] : -1;
$lastURIindice--;
if($indiceOfThisURI < $lastURIindice) { $NextLocation = $URIs[$indiceOfThisURI+1]; }
elseif(!$URIsAreBoundedSequence) { $NextLocation = $URIs[0]; }
if($indiceOfThisURI > 0 ) { $PreviousLocation = $URIs[$indiceOfThisURI-1]; }
elseif(!$URIsAreBoundedSequence) { $PreviousLocation = $URIs[$lastURIindice]; }
?>

There are two places to customize.

1. The first is the list of web page URLs that the "next" and "previous" links will link to. Replace

   /content/page1.php /content/page2.php http://example.com/content/page3.php https://example.com/content/page4.php /content/page5.php

   with your list of web pages. Specify either the URL (begins with protocol http:// or https://) or the URI (protocol and domain name removed), one web page per line.

   Note that all URLs must be for the same domain as the web page with the "next" / "previous" links.

2. The second place to customize is the

   $URIsAreBoundedSequence = false;

   line. The line tells the PHP script what to do when it is at the end or the beginning of the list.

   If you want both (1) the "next" link to disappear when the page being viewed is at the end of the list and (2) the "previous" link to disappear when the page being viewed is at the beginning of the list, then replace false with one of the following:

   1 true "yes"

When customization is finished, upload PreviousNext.php to your domain's server. Make a note of it's location because the PHP script's location will need to be specified on the web pages.

The Web Pages

This section describes how to publish the "next" and "previous" links. The code to do it is inserted into the web page where the links are to show up.

Below is complete example code. This complete example code is provided for an overall view. There are four sections. Following this complete example code, each of the four sections will be addressed separately.

<?php include("{$_SERVER['DOCUMENT_ROOT']}/php/PreviousNext.php"); ?>

<?php if( $PreviousLocation!==false ): ?>
<a href="<?php echo($PreviousLocation); ?>">
<<< Previous
</a> 
<?php endif; ?>

&nbsp; 

<?php if( $NextLocation!==false ): ?>
<a href="<?php echo($NextLocation); ?>">
Next >>>
</a> 
<?php endif; ?>

Here is the first section, the one line at the top of the complete example code, above.

<?php include("{$_SERVER['DOCUMENT_ROOT']}/php/PreviousNext.php"); ?>

Replace /php/PreviousNext.php with the location of PreviousNext.php that you installed on your server. The location is specified relative to document root, not by URL.

Here is the second section. It is composed of five lines.

<?php if( $PreviousLocation!==false ): ?>
<a href="<?php echo($PreviousLocation); ?>">
<<< Previous
</a> 
<?php endif; ?>

<<< Previous may be replaced with any combination of other text, image, and/or symbols for the link the site user is to tap for reading the previous page.

If you wish to publish the "◀" symbol, like at the live example, then specify ◀ for the link.

The third section seen in the complete example code further above is composed only of a non‑break space character.

  

Replace   with whatever you want to publish between the "previous" link (second section above) and the "next" link (fourth section, below). If you want nothing between the two links, then remove   without replacing it.

The live example has the words "A Friday Photo".

Here is the fourth section (the last section of the complete example code further above). This fourth section is composed of five lines.

<?php if( $NextLocation!==false ): ?>
<a href="<?php echo($NextLocation); ?>">
Next >>>
</a> 
<?php endif; ?>

Next >>> may be replaced with any combination of other text, image, and/or symbols for the link the site user is to tap for reading the next page.

If you wish to publish the "▶" symbol, like at the live example, then specify ▶ for the link.

All Four Sections Together —

The above four sections were extracted from the complete example code at the beginning of The Web Pages section.

Modify that example for your web pages.

Then, when the example has been modified to your satisfaction, publish the result on each web page that is to sport the "next" and "previous" links.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager