Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1433975

    Hello, I need support with customizing my blog page. Currently, the next/prev buttons on my blog article pages are displayed on both sides of the page, but I would like to move them to the bottom of the article text, approximately above the share buttons. It seems there are no basic settings available for this adjustment. Is there a recommended approach to achieve this?

    #1434000

    Hey rqn,
    If you want to hide the prev / next post navigation and add a new blog post navigation to the bottom of the posts, above the share buttons, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    add_filter( 'the_content', 'prev_next_post_nav' );
    function prev_next_post_nav( $content ) {
    	if ( is_singular('post') ) {
    	$content .= '<div style="clear:both;"></div>';
    	$content .= '<div class="prev-next-nav-container">';
    	$content .= '<div class="prev-nav">';
    	$content .= get_previous_post_link();
    	$content .= '</div>';
    	$content .= '<div class="next-nav">';
    	$content .= get_next_post_link();
    	$content .= '</div>';
    	$content .= '</div>';
    	return $content;
    	}
    	else {
    		return $content;
    	  }
    }

    Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .prev-next-nav-container {
    	width: 100%;
    	height: 70px;
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .prev-next-nav-container .prev-nav {
    	display: inline-block;
    	float: left;
        border-style: solid;
        border-width: 2px;
        border-radius: 0px;
        text-align: center;
        padding: 5px;
        text-decoration: none;
    }
    .prev-next-nav-container .next-nav {
    	display: inline-block;
    	float: right;
        border-style: solid;
        border-width: 2px;
        border-radius: 0px;
        text-align: center;
        padding: 5px;
        text-decoration: none;
    }
    .prev-next-nav-container .prev-nav:hover,
    .prev-next-nav-container .next-nav:hover {
    	background-color: rgba(0,0,0,.2);
    	color: #fff;
    }
    .prev-next-nav-container .prev-nav:hover a,
    .prev-next-nav-container .next-nav:hover a {
    	color: #fff;
    }
    .prev-next-nav-container .prev-nav a,
    .prev-next-nav-container .next-nav a {
    	display: inline-block;
    }
    .prev-next-nav-container .prev-nav:empty,
    .prev-next-nav-container .next-nav:empty,
    .single-post .avia-post-nav.avia-post-prev,
    .single-post .avia-post-nav.avia-post-next {
      display: none;
    }

    This will make post navigation buttons like this:
    Enfold_Support_4679.jpeg
    The buttons only have a light styling, you can adjust to suit.
    On Advanced Layout Builder posts they will show at the bottom of the post page:
    Enfold_Support_4681.jpeg
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    #1434552

    Thank you very much. So far, it looks great. However, currently, only the titles are displayed, which might be a bit confusing for users. Could you add “next” and “prev” labels above the respective titles for the next and previous articles?

    I’m picturing something like this:

    next prev
    —— ——
    Title Title

    Is this possible?

    #1434567

    Hi,
    Did you notice the next/prev arrows in the buttons?

    Best regards,
    Mike

    #1434628

    I was able to achieve my main objective with a bit of customization.

    Just one more thing, how can I apply this to custom post types as well?

    #1434631

    Thank you so much!
    The issue has been resolved. Please close this ticket.

    #1434632

    I’m sorry, but I’ve noticed a problem. There is unnecessary navigation being displayed in the footer. Why is this happening? Where should I make corrections to fix this?

    #1434643

    Hi,
    Thanks I made an adjustment, please clear your browser cache and check.

    Best regards,
    Mike

    #1435285

    Thank you for your support. This issue has been resolved. Please close it.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘blog page customize’ is closed to new replies.