This code creates my back/next links for my Wordpress website.
function.php " class="">
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x( get_next_post()->post_title, 'Previous post link', 'bnNav' ) ); ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', _x( get_previous_post()->post_title, 'Next post link', 'bnNav' ). '<span class="fa fa-chevron-up icn"></span>'); ?>
...
html (output)
<div class="navigation">
<div class="nav-previous"> ... </div>
<div class="nav-next"> ... </div>
</div>
This creates a link for both the next and previous post. It outputs the title of the link in the div aswell with 'get_next_post()->post_title'.
When on mobile I want to change what the links say to just 'back' and 'next'
If your themes running with bootstrap, then you're best to use their helper classes for this sort of thing.
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x( get_next_post()->post_title, '<span class="hidden-sm hidden-xs">Previous post link</span><span class="hidden-xl hidden-lg hidden-md">Prev</span>', 'bnNav' ) ); ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', _x( get_previous_post()->post_title, '<span class="hidden-sm hidden-xs">Next post link</span><span class="hidden-xl hidden-lg hidden-md">Next</span>', 'bnNav' ). '<span class="fa fa-chevron-up icn"></span>'); ?>
Do you know about css media queries?
One easy way to do this is using css media queries. You can do some like this:
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x( get_next_post()->post_title, '<span class="desktop">Previous post link</span><span class="mobile">back</span>', 'bnNav' ) ); ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', _x( get_previous_post()->post_title, '<span class="desktop">Next post link</span><span class="mobile">next</span>', 'bnNav' ). '<span class="fa fa-chevron-up icn"></span>'); ?>
...
And in your css, you put some like this:
@media screen and (min-width: 680px) {
.mobile {
display: none !important;
}
.desktop {
display: block !important;
}
}
@media screen and (max-width: 680px) {
.mobile {
display: block !important;
}
.desktop {
display: none !important;
}
}
Note: I define 680px the min width to be considered a mobile. You will have to define this number according to your needs.