Create Graphic For "Next" and "Previous" Post Links

Hi there,

I’m not currently able to see any “next” or “previous” post links on your site. Could you please point me to the links that you’re trying to replace? If you’re hiding the links with custom CSS, please consider making them visible again so that I can help with more specific CSS.

It would also be helpful if you could provide a link to the graphics you plan on using.

Thanks!

So sorry, Siobhan. I’ve now reinstated the next and previous links. I don’t currently have graphics made, so that’s negotiable (sizing). In fact, I may not need graphics at all if I can get those buttons looking the way I want them to. These would be what I’m looking for:

1. White background for those buttons.
2. Link text colour to match the rest of the links colours on the blog. Arrows should match this colour as well.
3. Ideally, the font of these buttons would be Lato.

Thank you for your help!

Thank you for reinstating those links!

You could definitely set the background to white on those buttons, get the link colour to match with the rest of your site’s links, and also set the font to Lato with the following snippet:

.site-main .post-navigation, .site-main .paging-navigation, .site-main .post-navigation .nav-previous a, .site-main .paging-navigation .nav-previous a, .site-main .post-navigation .nav-next a, .site-main .paging-navigation .nav-next a {
    background: #FFF;
    color: #6DAE90;
    font-family: Lato;
}

The following would then target the arrows, specifically:

.site-main .post-navigation .meta-nav:before, .site-main .paging-navigation .meta-nav:before, .site-main .post-navigation .nav-next a:hover, .site-main .paging-navigation .nav-next a:hover {
    background: #FFF;
    color: #6DAE90;
}

In addition, the following would be need to change the hover effect of the links from white to the default colour:

.site-main .post-navigation .nav-previous a:hover, .site-main .paging-navigation .nav-previous a:hover {
    color: #6DAE90;
}

Give that a try and let me know how it works for you. ??

Awesome, Siobhan! Is there a way to relocate these links (not so far down the bottom of the page)? Maybe above the comment pane?

Do you already have a child theme set up? If so, copy the parent’s single.php file to your child theme’s directory and then open it in your favourite code/text editor.

From there, locate the following part of the code, which represents the previous and next links:

<?php pictorico_post_nav(); ?>

You can move the code just below the following in order to get the links to show above the comments:

<?php get_template_part( 'content', 'single' ); ?>

Hope that helps!

I don’t have a child theme, no.

It is technically possible to move the previous and next links with custom CSS. However, the needed CSS is tricky and would require a lot of testing across different devices. It also goes beyond the scope of support that this forum is really intended for.

Creating a child theme is a cleaner approach and one that I recommend above custom CSS in this case.

Yikes, I’m having quite a time figuring out how to create a child theme. That link isn’t doing it for me–I’m not sure what’s being said there, or how to follow that direction.

Where is wp-content/themes, for example? :/

I now have a child theme, and something weird seems to have happened. I am no longer able to select a header for the homepage. When I press the button that says “Add new image” nothing happens. Any ideas? :/