wordpress post pagination with image buttons?

Question

I'm trying to make a post pagination like this:

button left image | 1 2 3 4 5 |button right image

but I can't get it work. I've tried:

<?php wp_link_pages('before=<p>&after=</p>&next_or_number=number&pagelink= %'); ?>

But how to add images to the left an right as buttons? thx! AD

Answer 1

About the wp_link_pages functions you can read in the WordPress Codex http://codex.wordpress.org/Function_Reference/wp_link_pages.

Here you go:

wp_link_pages(
    array(
        'before' => '<div class="pagenav">',
        'after' => '</div>', 
        'next_or_number' => 'next', 
        'nextpagelink' => __('<img src="IMAGE SRC HERE" />'), 
        'previouspagelink' => __('<img src="IMAGE SRC HERE" />')
    )
);

Good luck! :)

Answer 2

yes, it works now! Thanks

I use this code to turn ['next_or_number'] == 'next_and_number') so I can mix it with numbers, arrows or graphics :

// Custom Next/Previous Page
add_filter('wp_link_pages_args', 'wp_link_pages_args_prevnext_add');
/**
 * Add prev and next links to a numbered link list
 */
function wp_link_pages_args_prevnext_add($args)
{
    global $page, $numpages, $more, $pagenow;

    if (!$args['next_or_number'] == 'next_and_number') 
        return $args; # exit early

    $args['next_or_number'] = 'number'; # keep numbering for the main part
    if (!$more)
        return $args; # exit early

    if($page-1) # there is a previous page
        $args['before'] .= _wp_link_page($page-1)
            . $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>'
        ;

    if ($page<$numpages) # there is a next page
        $args['after'] = _wp_link_page($page+1)
            . $args['link_before'] . $args['nextpagelink'] . $args['link_after'] . '</a>'
            . $args['after']
        ;

    return $args;
}

to get the pagination nav:

<?php
wp_link_pages(array(
        'before' => '<div class="pagenav">' . __(''),
       'after' => '</div>', 
        'next_or_number' => 'next_and_number', # activate parameter overloading
        'nextpagelink' => __('<img src="'.get_bloginfo('template_url').'/images/nxt_btn.png" />'),
        'previouspagelink' => __('<img src="'.get_bloginfo('template_url').'/images/prv_btn.png" />'),
    'pagelink' => '%',
    'echo' => 1 )
);
?>

Thank you!

AD