Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

How to Customize the Page naviagtion on single page template WordPress

  • SOLVED

Hello!

I am looking to modify the wordpress generated page navigation on single pages.

Currently it generates the following HTML using the short code <!--nextpage--> when editing the post.

<p>Page 1 <a href="#">2</a></p>

My end goal is to customize this generated HTML, but I do not require the expert to do that for me. I am just looking find out the name of the hook, action of filter required in order for me to do this myself.

I've been searching the web and cannot find anything on it. I do not want to use a plugin.

Thanks!
matt

Answers (3)

2012-01-03

Arnav Joy answers:

try this in your functions.php

function single_page_pagination($pages = '', $range = 2)
{  
     $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)
     {
         echo "<div class='pagination'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</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)."'>&rsaquo;</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo "</div>\n";
     }
}

In suingle.php call this function

single_page_pagination();


Cartogram comments:

This looked like it was on the right track, but it does not out put anything on my single posts page.


Arnav Joy comments:

try this in functions.php

function fb_paging_bar( $args = array() ) {
$defaults = array(
'range' => 4,
'custom_query' => FALSE,
'previous_string' => __( '«««', FB_GREYFOTO_TEXTDOMAIN ),
'next_string' => __( '»»»', FB_GREYFOTO_TEXTDOMAIN ),
'view_fp' => TRUE,
'view_lp' => TRUE,
'before_output' => '<div class="postlink">',
'after_output' => '</div>'
);
$args = wp_parse_args(
$args,
apply_filters( 'fb_paging_bar_defaults', $defaults )
);
$args['range'] = (int) $args['range'] - 1;
if ( !$args['custom_query'] )
$args['custom_query'] = @$GLOBALS['wp_query'];
$count = (int) $args['custom_query']->max_num_pages;
$page = intval( get_query_var( 'paged' ) );
$ceil = ceil( $args['range'] / 2 );
if ( $count <= 1 )
return FALSE;
if ( !$page )
$page = 1;
if ( $count > $args['range'] ) {
if ( $page <= $args['range'] ) {
$min = 1;
$max = $args['range'] + 1;
} elseif ( $page >= ($count - $ceil) ) {
$min = $count - $args['range'];
$max = $count;
} elseif ( $page >= $args['range'] && $page < ($count - $ceil) ) {
$min = $page - $ceil;
$max = $page + $ceil;
}
} else {
$min = 1;
$max = $count;
}
$echo = '';
$previous = intval($page) - 1;
$previous = esc_attr( get_pagenum_link($previous) );
if ( $previous && (1 != $page) )
$echo .= '<a href="' . $previous . '" title="' . __( 'previous', FB_GREYFOTO_TEXTDOMAIN) . '">' . $args['previous_string'] . '</a>';
$firstpage = esc_attr( get_pagenum_link(1) );
if ( $args['view_fp'] && $firstpage && (1 != $page) )
$echo .= '<a href="' . $firstpage . '">' . __( 'First', FB_GREYFOTO_TEXTDOMAIN ) . '</a>';
if ( !empty($min) && !empty($max) ) {
for( $i = $min; $i <= $max; $i++ ) {
if ($page == $i) {
$echo .= '<span class="active">' . str_pad( (int)$i, 2, '0', STR_PAD_LEFT ) . '</span>';
} else {
$echo .= sprintf( '<a href="%s">%002d</a>', esc_attr( get_pagenum_link($i) ), $i );
}
}
}
if ($args['view_lp']) {
$lastpage = esc_attr( get_pagenum_link($count) );
if ( $lastpage && ($count != $page) ) {
$count = str_pad( (int)$count, 2, '0', STR_PAD_LEFT );
$echo .= '<a href="' . $lastpage . '">' . __( 'Last', FB_GREYFOTO_TEXTDOMAIN ) . '(' . $count . ')' . '</a>';
}
}
$next = intval($page) + 1;
$next = esc_attr( get_pagenum_link($next) );
if ($next && ($count != $page) )
$echo .= '<a href="' . $next . '" title="' . __( 'next', FB_GREYFOTO_TEXTDOMAIN) . '">' . $args['next_string'] . '</a>';
if ( isset($echo) )
echo $args['before_output'] . $echo . $args['after_output'];
}

and this in single.php

<?php if ( function_exists('fb_paging_bar') ) fb_paging_bar(); ?>


Arnav Joy comments:

check this link

http://bacsoftwareconsulting.com/blog/index.php/web-programming/add-custom-wordpress-pagination-without-plugin/


Arnav Joy comments:

try this

functions.php

function my_paginate_links() {
global $wp_rewrite, $wp_query;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => __('« Previous'),
'next_text' => __('Next »'),
'end_size' => 1,
'mid_size' => 2,
'show_all' => true,
'type' => 'list'
);
if ( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
if ( !empty( $wp_query->query_vars['s'] ) )
$pagination['add_args'] = array( 's' => get_query_var( 's' ) );
echo paginate_links( $pagination );
}


call this as
<?php my_paginate_links();?>


Cartogram comments:

I think your solutions are for pagination when viewing multiple pages of posts, but not a single multi-page post. I am I correct here?


Arnav Joy comments:

try this

if ( ! isset( $_GET['paged'] ) || $_GET['paged'] < 1 )
$_GET['paged'] = 1;

$options = get_option('posts_per_page');
$per_page = get_option('posts_per_page'); // or $per_page = 25;
$pagenum = isset( $_GET['paged'] ) ? absint( $_GET['paged'] ) : 0;
if ( empty($pagenum) )
$pagenum = 1;

/*Start and end page settings for pagination.*/
$start_page = ($pagenum - 1) * $per_page;
$end_page = $start_page + $per_page;

$total_num_pages = $post_count;

$total_value = ceil($total_num_pages / $per_page);
$defaults = array(
'base' => add_query_arg( 'paged', '%#%' ),
'format' => '?paged=%#%',
'total' => $total_value,
'current' => $pagenum,
'show_all' => false,
'prev_next' => true,
'prev_text' => __('&laquo;'),
'next_text' => __('&raquo;'),
'end_size' => 1,
'mid_size' => 2,
'type' => 'plain',
'add_fragment' => ''
);
$page_links = paginate_links( $defaults );


<?php if ( $page_links ) { ?>
<div class="tablenav-pages">
<?php
$page_links_text = sprintf( '<span class="displaying-num">' . __( 'Displaying %s&#8211;%s of %s' ) . '</span>%s',
number_format_i18n( ( $pagenum - 1 ) * $per_page + 1 ),
number_format_i18n( min( $pagenum * $per_page, $total_num_pages ) ),
number_format_i18n( $total_num_pages ),
$page_links
);
echo $page_links_text;
?>
</div>
<?php }?>

2012-01-03

Romel Apuya answers:

how you want the output be?


Romel Apuya comments:

see this two references

[[LINK href="http://codex.wordpress.org/Write_Post_SubPanel#Quicktags"]]http://codex.wordpress.org/Write_Post_SubPanel#Quicktags[[/LINK]]

[[LINK href="http://codex.wordpress.org/Template_Tags/wp_link_pages"]]http://codex.wordpress.org/Template_Tags/wp_link_pages[[/LINK]]


Cartogram comments:

Wow, that was an oversight on my part. I didn't realize there was a template tag for that.

Do you know if I could get the following output? or close to it?


<p>Page 2 of 3
<a href="#prevpagelink">Prev</a>
<a href="#nextpagelink">Next</a>
<a href="#page1">1 </a>
<span class="current">2 </span>
<a href="#page3">3 </a>
<a href="#lastpagelink">Last</a>
</p>


Romel Apuya comments:

you can do that with css..

just put display block to those elements inside the p
but ofcourse

so


body.single p a{
display: block;
float:left;
}

body.single p span{
position: relative;
display: block;
}


Romel Apuya comments:

p a{

display: block;

float:left;

}



p span{

position: relative;

display: block;

}

2012-01-04

Julio Potier answers:

Please use CODE tags.