0

I'm setting up the wordpress for my webcomic/graphic novel and I'm just hitting a little snag when it comes to the navigation. Here's what I want, a very basic webcomic navigation scheme:

<< First | < Previous | Next > | Last >>

Each of these would be linking to the respective comic pages (which are seperate posts) dynamically. Ideally I wouldn't show the "Last" link on the actual latest page.

I've been messing with these functions:

previous_post_link(); next_post_link();

Which show the navigation like this, for example:

« Page 2 Page 4 »

(With "Page 2" and "Page 4" being the post titles, when I'm on page 3)

It's not ideal but sort of works, I guess. I'm sure there's a way to get these links to say what I want them to. It's the "Last" part that I'm really having trouble with.

I'd prefer not to work with the Webcomic or Comic Easel plugins, if at all possible, since basic Wordpress works pretty great for what I want from it.

0

This gist should get you started.

<?php
/*
Plugin Name:    Easy Pagination Deamon
Plugin URI:     http://wordpress.org/extend/plugins/stats/
Description:    Offers the deamon_pagination($range) template tag for a sematically correct pagination.
Author:         Franz Josef Kaiser
Author URI:     http://say-hello-code.com
Version:        0.1
License:        GPL v2 - http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain:    pagination_deamon_lang

Copyright 20010-2011 by Franz Josef Kaiser

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA
*/

// ==========================================
   Styles see https://gist.github.com/818523
// ==========================================

// Secure: don't load this file directly
if( !class_exists('WP') ) :
    header( 'Status: 403 Forbidden' );
    header( 'HTTP/1.1 403 Forbidden' );
    exit();
endif;

!defined('PAGE_LANG') ? define( 'PAGE_LANG', 'pagination_deamon_lang' ) : wp_die('The constant PAGE_LANG is already defined.');
!defined('PAGE_VERSION') ? define( 'PAGE_VERSION', 0.1 ) : wp_die('The constant PAGE_VERSION is already defined.');
!defined('PAGE_PATH') ? define( 'PAGE_PATH', trailingslashit(WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__))) ) : wp_die('The constant PAGE_PATH is already defined.');

    /**
     * Register styles
     */
    if ( !is_admin() ) {
        wp_register_style( 'pagination', PAGE_PATH.'pagination.css', false, PAGE_VERSION, 'screen' );
    }

    if ( !function_exists('oxo_pagination_styles') ) :
    /**
     * Print styles
     */
    function oxo_pagination_styles() {
        if ( !is_admin() )
            wp_print_styles('pagination');
    }
    endif;

    if ( !function_exists('oxo_pagination') ) :
    /**
     * Wordpress pagination for archives/search/etc.
     * 
     * Semantically correct pagination inside an unordered list
     * 
     * Displays: First « 1 2 3 4 » Last
     * First/Last only appears if not on first/last page
     * Shows next/previous links «/»
     * Accepts a range attribute (default = 5) to adjust the number
     * of direct page links that link to the pages above/below the current one.
     * 
     * @param (int) $range
     */
    function oxo_pagination( $range = 5 ) {
        // $paged - number of the current page
        global $paged, $wp_query;
        // How much pages do we have?
        if ( !$max_page )
            $max_page = $wp_query->max_num_pages;
        // We need the pagination only if there is more than 1 page
        if ( $max_page > 1 )
            if ( !$paged ) $paged = 1;

        echo "\n".'<ul class="pagination">'."\n";
            // On the first page, don't put the First page link
            if ( $paged != 1 )
                echo '<li class="page-num page-num-first"><a href='.get_pagenum_link(1).'>'.__('First', PAGE_LANG).' </a></li>';

            // To the previous page
            echo '<li class="page-num page-num-prev">';
                previous_posts_link(' &laquo; '); // «
            echo '</li>';

            // We need the sliding effect only if there are more pages than is the sliding range
            if ( $max_page > $range ) :
                // When closer to the beginning
                if ( $paged < $range ) :
                    for ( $i = 1; $i <= ($range + 1); $i++ ) {
                        $class = $i == $paged ? 'current' : '';
                        echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
                    }
                // When closer to the end
                elseif ( $paged >= ( $max_page - ceil($range/2)) ) :
                    for ( $i = $max_page - $range; $i <= $max_page; $i++ ){
                        $class = $i == $paged ? 'current' : '';
                        echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
                    }
                endif;
            // Somewhere in the middle
            elseif ( $paged >= $range && $paged < ( $max_page - ceil($range/2)) ) :
                for ( $i = ($paged - ceil($range/2)); $i <= ($paged + ceil($range/2)); $i++ ) {
                        $class = $i == $paged ? 'current' : '';
                    echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
                }
            // Less pages than the range, no sliding effect needed
            else :
                for ( $i = 1; $i <= $max_page; $i++ ) {
                    $class = $i == $paged ? 'current' : '';
                    echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
                }
            endif;

            // Next page
            echo '<li class="page-num page-num-next">';
                next_posts_link(' &raquo; '); // »
            echo '</li>';

            // On the last page, don't put the Last page link
            if ( $paged != $max_page )
                echo '<li class="page-num page-num-last"><a href='.get_pagenum_link($max_page).'> '.__('Last', PAGE_LANG).'</a></li>';

        echo "\n".'</ul>'."\n";
    }
    endif;
?>
  • Thanks for your reply, installing this gives me a parse error though (syntax error, unexpected 'see' (T_STRING) in /home(location of install) on line 30). Are you sure it should work? It's 8 years old. – Kohlo Nov 4 '18 at 17:18
  • @Kohlo do not copy paste blindly, go through to code, learn what is being done and implement it. 8 years or 20 there are things to learn. – sandrodz Nov 5 '18 at 7:29
0

Well, it is very easy to create pagination links like First Previous..Next Last.

You should place below code in your functions.php.

<?php
function pagination($pages = '', $range = 4)
{  
     $showItems = ($range * 2)+1;  

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   

     if(1 != $pages)
     {

         if($paged > 2 && $paged > $range+1 && $showItems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
         if($paged > 1 && $showItems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showItems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }

         if ($paged < $pages && $showItems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showItems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
         echo "</div>\n";
     }
}
?>

And you can call from your respective templates by placing below code.

<?php
    if (function_exists("pagination"))
    {
        pagination($additional_loop->max_num_pages);
    }
?>
  • Would it be able to do this with posts as well and not just pages? – Kohlo Nov 4 '18 at 18:46
  • Yes, it will works for posts as well. It is comman code for all post-types. – Harsh Barach Nov 5 '18 at 0:38
  • I'm sorry, I'm certain I'm doing something wrong but when I post the code into the places you've said, it doesn't appear on single posts, and on the main page the pagination looks like this: 1 2 3 4 (underneath each other, comments don't have formatting) The links all do go to different pages, though 1 goes to the most recent one instead of the first. It also breaks my sidebar. – Kohlo Nov 5 '18 at 5:01
0

We found a somewhat easy fix, which isn't 100% perfect from the original idea but does the job well enough without figuring out a way to make the code work driving me crazy. I'll post them here just in case anyone else comes across this and wants a quick and dirty way to get a comic navigation on Wordpress without dedicated plugins.

For single posts: <div class="comicsnav"> <a href="STATIC-URL-TO-FIRST-POST"><i class="fa fa-angle-left"></i><i class="fa fa-angle-left"></i> First</a> | <?php previous_post_link('%link', '<i class="fa fa-angle-left"></i> Prev'); ?> | <?php next_post_link('%link', 'Next <i class="fa fa-angle-right"></i>'); ?> | <a href="STATIC-URL-TO-MAIN-PAGE">Last <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></a> <?php wp_get_recent_posts(); ?> </div>

For main page: <div class="comicsnav"> <a href="STATIC-URL-TO-FIRST-POST"><i class="fa fa-angle-left"></i><i class="fa fa-angle-left"></i> First</a> | <?php previous_post_link('%link', '<i class="fa fa-angle-left"></i> Prev'); ?> | Current | <a href="STATIC-URL-TO-MAIN-PAGE">Last <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></a> <?php wp_get_recent_posts(); ?> </div>

The one snag we hit here is that if you're on the first or last post, it'll show 2 pipes next to each other as the previous/next links aren't shown there, which is something I can live with for now. If this bothers you, the pipes are optional so they can be removed completely to show the navigation as: << First < Previous Next > Last >>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.