Docs

[sandra.i]

Hi

I’ve used this code to insert Next/Previous links for posts on the post page – how can I add a class tag so that I can style them?

function x_post_navigations () {
previous_post_link( '<strong>%link</strong>','Previous' ); echo '|'; next_post_link( '<strong>%link</strong>','Next' );
}

add_action ('x_after_view_renew_content', 'x_post_navigations');
add_action ('x_after_view_renew_content-audio', 'x_post_navigations');
add_action ('x_after_view_renew_content-gallery', 'x_post_navigations');
add_action ('x_after_view_renew_content-image', 'x_post_navigations');
add_action ('x_after_view_renew_content-link', 'x_post_navigations');
add_action ('x_after_view_renew_content-quote', 'x_post_navigations');
add_action ('x_after_view_renew_content-video', 'x_post_navigations');

[sandra.i]

Also the Next/Previous links are showing on the top of my blog page, behind images and text:

http://www.rochesterclinic.co.uk/news/

Could you have a look?

Thanks

[Christian]

Hey there,

Add class to the strong tag like this:

<strong class="prev">%link</strong>

Then you can target the link by

.prev a

Thanks.

[sandra.i]

Hi

Thanks that works great. How can I add some padding to the top of the links..?

Thanks

[Rupok]

Hi there,

It looks like this on my end – http://prntscr.com/de3z0a

That’s what you see on your end as well? Where you exactly need the padding?

Let us know.

[sandra.i]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back.

#1. Next/Previous link not supposed to be on blog page as it doesn’t make any sense. Blog page will list the posts, why you need them there? Perhaps you are trying to achieve this through custom code but it’s not usual and such customization is out of our support scope.

#2. It seems you already tried this CSS :

.prev_next {
  padding-top: 20px;
}

Let’s update this to following :

.prev_next {
  display: inline-block;
  padding-top: 20px;
}

Hope this helps.

[sandra.i]

Hi

1. Yes, the next-previous link is not supposed to be on the blog page, but that’s where is appears, can you remove it?

2. the css worked great, thanks!

[Nabeel A]

Hi again,

Please add the following code in your Customizer

.blog .prev_next {
    display: none !important;
}

Let us know how this goes!

[sandra.i]

Thanks, almost! The previous/next links are gone but the divider is still there – ‘|’

[Rad]

Hi there,

Please change this code

function x_post_navigations () {
previous_post_link( '<strong>%link</strong>','Previous' ); echo '|'; next_post_link( '<strong>%link</strong>','Next' );
}

to this

function x_post_navigations () {
echo '<div class="prev_next_nav">'; previous_post_link( '<strong>%link</strong>','Previous' ); echo '|'; next_post_link( '<strong>%link</strong>','Next' ); echo '</div>';
}

Then change that CSS to this

.blog .prev_next_nav{
    display: none !important;
}

Hope this helps.

[sandra.i]

Perfect, thanks!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts