- This topic has 14 replies, 3 voices, and was last updated 4 years, 6 months ago by
David.
-
AuthorPosts
-
September 16, 2018 at 10:04 pm #678892
Mohit
Hi there,
I just wanted to know how can I make my post-navigation(next post, previous post) buttons like copyblogger? Link: https://www.copyblogger.com/make-wordpress-faster/
Also, they have widgets in their sidebar at certain places only how can I do this as well?
Thank you
September 16, 2018 at 11:13 pm #678906Leo
StaffCustomer SupportHi there,
This should help with the post navigation:
https://docs.generatepress.com/article/inline-post-navigation/This should help with conditional sidebar:
https://wordpress.org/plugins/content-aware-sidebars/Let me know π
September 17, 2018 at 2:05 am #678988Mohit
Hi Leo,
Thank you for getting back, is it possible to make separate element for post navigation as I don’t want post navigation to display in the container instead want it to extent beyond the post container just like copyblogger, the link I shared?
September 17, 2018 at 2:11 am #678990Mohit
Also in Mobile preview the code that you sent me is not align itself really well. Th next and previous posts are being displayed in the same line making it look messy.
So, is it possible to make these in separate lines in mobile view, i.e next post nav on top below that previous nav?Thanks
September 17, 2018 at 9:36 am #679405Leo
StaffCustomer SupportAny chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know π
September 17, 2018 at 3:00 pm #679625Mohit
Hi Leo,
I just shared my URL
Thanks
September 17, 2018 at 8:34 pm #679762Tom
Lead DeveloperLead DeveloperYou would likely need to disable the GP post navigation and add your own.
For example:
add_filter( 'generate_show_post_navigation', '__return_false' );
Then adding your own:
add_action( 'generate_before_comments_container', function() { if ( is_single() ) { the_post_navigation(); } } );
That should get it out of the content container.
It may take some more CSS to style though – I’ll be happy to look once it’s added if you’d like to share your URL π
September 17, 2018 at 9:34 pm #679782Mohit
Hey Tom,
So I installed child theme and added the code that you shared in function.php, However, after adding the code post navigation is displaying below leave a comment section and not below the post.How can I fix that? Also, let me know the necessary CSS needed,
Here is the link: http://www.techtechnik.com
Thanks
September 18, 2018 at 9:34 am #680355Tom
Lead DeveloperLead DeveloperAh – I just adjusted the code above to insert it above the comments.
Unfortunately, everything is within the container, so we’ll need to use some negative margin to force it outside.
Try something like this as your full CSS:
.navigation.post-navigation { margin-left: -100px; margin-right: -100px; background: #fafafa; padding: 20px 40px; } @media (max-width: 1077px) { .navigation.post-navigation { margin: 0; } } .post-navigation .nav-links { display: flex; align-items: center; } @media (max-width: 768px) { .post-navigation .nav-links { flex-direction: column; } } .post-navigation .nav-next { width: 50%; text-align: left; padding: 30px; position: relative; } .post-navigation .nav-previous { width: 50%; text-align: right; padding: 30px; position: relative; } .post-navigation .nav-previous:before { content: "Previous Article:"; display: block; font-size: 12px; text-transform: uppercase; } .post-navigation .nav-next:before { content: "Next Article:"; display: block; font-size: 12px; text-transform: uppercase; } .post-navigation .nav-next a:after, .post-navigation .nav-previous a:before { font-family: GeneratePress; text-decoration: inherit; position: absolute; right: -15px; top: calc(50% - 15px); content: "\f105"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; speak: none; font-size: 30px; } .post-navigation .nav-previous a:before { content: "\f104"; right: auto; left: -15px; }
September 18, 2018 at 6:37 pm #680691Mohit
Thanks Tom, its working as I wanted!
September 18, 2018 at 9:23 pm #680765Tom
Lead DeveloperLead DeveloperAwesome, glad I could help! π
July 22, 2020 at 8:17 am #1372340Shami
After doing the same things as stated above, I got the desired result i.e. it looks exactly like Copyblogger on the single post.
I’ve followed all the steps perfectly and achieved what I wanted.
But the weird thing is that the pagination on my archive pages has disappeared. I’m guessing the PHP that I’ve added is causing the problem and making the pagination disappear in the archive.
Even infinite scroll isn’t working.
My archive pages are only showing the default number of posts, which is five. After that, there seems no way to access older posts.
Also, it’s worth noting that there are more than 20 posts.
I don’t know what to do now. I hope there is some kind of CSS or PHP fix for it.
Please help.
July 22, 2020 at 2:22 pm #1372691Tom
Lead DeveloperLead DeveloperHi there,
This is an old solution, but perhaps instead of this:
add_filter( 'generate_show_post_navigation', '__return_false' );
Try this:
add_action( 'wp', function() { if ( is_single() ) { add_filter( 'generate_show_post_navigation', '__return_false' ); } } );
July 22, 2020 at 9:25 pm #1372900Shami
Thanks, Tom. That worked like a charm. You’re amazing.
I just wish If I could change the title of the comment section.
Instead of: ‘X’ thoughts on ‘post title’
I want to make it: Reader Comments (count)
Is there any easy fix for it?
July 23, 2020 at 12:50 am #1373033David
StaffCustomer SupportHi there,
can you raise a new topic as its unrelated and will make it easier for you and others to find the answer in the future.
-
AuthorPosts
- You must be logged in to reply to this topic.