Instantly share code, notes, and snippets.

Embed
What would you like to do?
A more accessible adjacent entry navigation
<?php
add_action( 'genesis_after_entry', 'leaven_adjacent_entry_nav' );
/**
* Display links to previous and next entry.
*
* @return void Return early if not singular post.
*/
function leaven_adjacent_entry_nav() {
if ( ! is_singular( 'post' ) ) {
return;
}
genesis_markup( array(
'open' => '<div %s>',
'context' => 'adjacent-entry-pagination',
) );
echo '<div class="pagination-previous">';
echo '<span class="screen-reader-text">' . esc_attr__( 'Previous Post:', 'leaven' ) . ' </span>';
previous_post_link( '%link', '<span class="adjacent-link">%title</span>' );
echo '</div>';
echo '<div class="pagination-next">';
echo '<span class="screen-reader-text">' . esc_attr__( 'Next Post:', 'leaven' ) . ' </span>';
next_post_link( '%link', '<span class="adjacent-link">%title</span>' );
echo '</div>';
genesis_markup( array(
'close' => '</div>',
'context' => 'adjacent-entry-pagination',
) );
}
.adjacent-entry-pagination .pagination-previous a:before {
display: inline-block;
font: normal normal normal 18px FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
vertical-align: middle;
content: '\f104';
margin-right: 12px;
}
.adjacent-entry-pagination .pagination-next a:after {
display: inline-block;
font: normal normal normal 18px FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
vertical-align: middle;
content: '\f105';
margin-left: 12px;
}
@media only screen and (min-width: 30em) {
.adjacent-entry-pagination {
margin-bottom: 0;
}
.adjacent-entry-pagination .pagination-previous,
.adjacent-entry-pagination .pagination-next {
position: fixed;
top: 50%;
}
.adjacent-entry-pagination .pagination-previous a,
.adjacent-entry-pagination .pagination-next a {
color: #d3dad3;
}
.adjacent-entry-pagination .adjacent-link {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.adjacent-entry-pagination .pagination-previous {
left: 24px;
}
.adjacent-entry-pagination .pagination-previous a:before {
font-size: 48px;
}
.adjacent-entry-pagination .pagination-next {
right: 24px;
}
.adjacent-entry-pagination .pagination-next a:after {
font-size: 48px;
}
}
@media only screen and (min-width: 60em) {
.adjacent-entry-pagination .pagination-previous {
left: 8%;
}
.adjacent-entry-pagination .pagination-next {
right: 8%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment