Is it possible to have a 'Next' or 'Previous' button at the bottom of the single blog pages? Also a link back to the main page

Support
#1

Hi, I’m designing a site with a News & Events page - I’ve used Essential Grid to style the format to the main page which displays all the posts - but our client has asked to have a ‘Next’ or ‘Previous’ button at the bottom of the single blog pages and also a link back to the main News & Events page at the bottom too.

I’ll put the URL in a secure note, as it’s being built on a temporary link.

Thanks!

#2

Hi There,

To achieve that, you have to setup a child theme first:

https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57

After that add this custom code under functions.php file locates in your child theme:

add_action( 'x_after_view_global__content', 'x_print_post_nav' );
function x_print_post_nav(){
	echo '<a href="http://www.a50544d9c23acb43b59c0a0e0-11346.sites.k-hosting.co.uk/news-events/">Back</a>';
	x_entry_navigation();
}

Hope that helps and thank you for understanding.

#3

Hi, many thanks for that, it’s much appreciated! At the minute the ‘Back’ and ‘Next’ and ‘Previous’ arrows are at the top of the content, is it possible to move it to the bottom of the post?

Also, I’ve tried with CSS, but I can’t change the font of the text ‘Back to main page’ that’s above the navigation arrows.

Thanks!

#4

Hi There,

Please update the previous code to this:

add_action( 'x_after_view_global__content', 'x_print_post_nav' );
function x_print_post_nav(){
	echo '<div class="post-navigation"><a href="http://www.a50544d9c23acb43b59c0a0e0-11346.sites.k-hosting.co.uk/news-events/">Back</a>';
	x_entry_navigation();
	echo '</div>';
}

After that add this custom CSS:

.post-navigation {
    position: absolute;
    bottom: 0;
    font-size: 24px;
    font-family: "Raleway",sans-serif;
}

.post-navigation .x-nav-articles a.next {
    float: right;
    font-size: 12px;
}

.post-navigation .x-nav-articles a.prev {
    float: left;
    font-size: 12px;
}

Hope it helps :slight_smile:

#5

That’s excellent thanks!

Sorry to be a pain, but is it also possible for the following:

  1. Add margin above and below the post-navigation - I’ve tried with CSS but it just moves the ‘Back’ text and arrows above over the top of the article text!

  2. Can the arrows move so they’re on the same line to the right of the ‘Back’ text?

I really appreciate all the time and help you’ve spent on this!

Thanks!

#6

Hi again,

Try replacing the code in your functions.php file with the following code:

function x_add_post_navigation() {
		if ( is_singular('post') ) {
  			echo '<div class="navigation-post"><a href="http://www.a50544d9c23acb43b59c0a0e0-11346.sites.k-hosting.co.uk/news-events/">Back</a>';
			x_entry_navigation();
			echo '</div>';
		}
}
add_action('x_before_the_content_end', 'x_add_post_navigation');

And CSS with this:

.navigation-post a {float: left;}

.navigation-post .x-nav-articles {float: right;}

.navigation-post:before, .navigation-post:after {
    content: '';
    clear: both;
    display: table;
}

.navigation-post {
    margin: 20px 0;
}

Let us know how this goes!

#7

Brilliant! That’s exactly it! Many thanks for all the time and help you’ve given to sort this out for me, it’s very much appreciated!

Thanks!

#8

Glad we were able to help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.