Show arrows for Next & Previous navigation links in Genesis Theme

By default Genesis Theme will display “next page” and “previous page” navigation text links at the bottom of posts listing on homepage. While there is option to switch to 1, 2, 3.. page numbers – how about making this more stylish by displaying right and left arrow in place of ‘next’ and ‘previous’ links. We can use arrow codes for such implementation and hence no extra image loading involved.

Before: Default next & previous text

After: Arrows for next & previous links

1. Open functions.php file and paste the following code at the bottom (backup file before making changes). This code replaces text links with arrow codes for navigation links.

https://gist.github.com/9522396

2. Now your theme  will start displaying arrows but they could be very small. So, to make them look prominent we need to increase font size for pagination class in style.css file.

[cc]
.archive-pagination,
.entry-pagination {
font-size: 50px;
font-size: 5rem;
margin: 40px 0;
margin: 4rem 0;
}
[/cc]

In above code font size has been increased to 50px to make arrow look big and easier to click. You can adjust the font size and even add own color for colorful arrow display.