Genesis Style Page-Links

genesis-page-links-styles.css

/*
 * Pagination - Global styles for both archives and Page-Links (in posts and pages)
 */
.pagination {
    clear: both;
    margin: 40px 0;
}

.post-type-archive-portfolio .pagination {
	padding-left: 80px;
	padding-right: 80px;
}

.archive-pagination ul li,
.archive-pagination a span.custom-page-links,
.archive-pagination span.custom-page-links {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 8px 12px;
    float: left;
    margin-right: 5px;
    min-width: 35px;
    text-align: center;
}

.archive-pagination ul li,
.archive-pagination a span.custom-page-links,
.archive-pagination span.custom-page-links,
.archive-pagination ul li a {
	color: #fff;
}

.archive-pagination ul li.active,
.archive-pagination ul li:hover,
.archive-pagination span.custom-page-links:hover, 
.archive-pagination > span {
    background-color: #e5554e;
}

.archive-pagination ul li,
.archive-pagination a span.custom-page-links {
    background-color: #333;
}

.pagination i {
    padding-bottom: 1px;
    vertical-align: middle;
}

.pagination i.fa-chevron-circle-left {
	margin-right: 5px;
}

.pagination i.fa-chevron-circle-right {
	margin-left: 5px;
}

page-link-tag.html

<!--nextpage-->

wp-link-page-args.php

/**********************************
*
* Filter wp_link_pages_args
* Modify default appearance and markup of WordPress Page Links
* Add FontAwesome icons to previous and next links
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
************************************/
add_filter( 'wp_link_pages_args', 'abte_change_link_page_args', 5 );
function abte_change_link_page_args( $defaults ) {

	$defaults = array(
			'before'           => '<div class="archive-pagination pagination">',
			'after'            => '</div>',
			'link_before'      => '<span class="custom-page-links">',
			'link_after'       => '</span>',
			'next_or_number'   => 'number',
			'separator'        => ' ',
			'nextpagelink'     => __( '<span class="prevnext-page">Next page</span> <i class="fa fa-chevron-circle-right"></i>' ),
			'previouspagelink' => __( '<i class="fa fa-chevron-circle-left"></i> <span class="prevnext-page">Previous page</span>' ),
			'pagelink'         => '%',
			'echo'             => 1
		);

 	return $defaults;

}

wp-links-page-prev-next-number-links.php

/**
 * Add prev and next links to a numbered link list
 * http://wordpress.stackexchange.com/questions/37256/paged-posts-how-to-use-numbers-and-next-previous-links
 */
add_filter('wp_link_pages_args', 'abte_genesis_style_page_post_pagination');
function abte_genesis_style_page_post_pagination($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;

}