CODEWITHSUNDEEP
javascriptphpjqueryhtmlwordpress
user3550879
user3550879

Reputation: 3469

replacing link text text for mobile

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'

Upvotes: 0

Views: 53

Answers (2)

Darren
Darren

Reputation: 13128

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>'); ?>

Upvotes: 0

Luis Gustavo
Luis Gustavo

Reputation: 11

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.

Upvotes: 0

Related Questions