-
AuthorPosts
-
February 11, 2024 at 11:22 am #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?
February 11, 2024 at 5:21 pm #1434000Hey 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:
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:
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.Best regards,
MikeFebruary 17, 2024 at 10:00 am #1434552Thank 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 TitleIs this possible?
February 17, 2024 at 1:08 pm #1434567February 18, 2024 at 1:52 am #1434628I 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?
February 18, 2024 at 8:42 am #1434631Thank you so much!
The issue has been resolved. Please close this ticket.February 18, 2024 at 9:30 am #1434632I’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?
February 18, 2024 at 1:30 pm #1434643Hi,
Thanks I made an adjustment, please clear your browser cache and check.Best regards,
MikeFebruary 24, 2024 at 1:43 pm #1435285Thank you for your support. This issue has been resolved. Please close it.
-
AuthorPosts
- The topic ‘blog page customize’ is closed to new replies.