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.
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.
Share Improve this question asked Nov 4, 2018 at 8:08 KohloKohlo 111 silver badge2 bronze badges3 Answers
Reset to default 1This gist should get you started.
<?php
/*
Plugin Name: Easy Pagination Deamon
Plugin URI: http://wordpress/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
Version: 0.1
License: GPL v2 - http://www.gnu/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/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(' « '); // «
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(' » '); // »
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;
?>
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)."'>« First</a>";
if($paged > 1 && $showItems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ 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 ›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showItems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</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);
}
?>
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 >>