- This topic has 26 replies, 3 voices, and was last updated 1 year, 7 months ago by
Elia.
-
AuthorPosts
-
May 15, 2019 at 4:39 am #899968
Elia
Hi there,
We would like to change the style for the Previous Next section?
Ideally we would like to have the same style as here:
https://gyazo.com/ad800a976f5a9ddbec0ce62a455f26e2
https://conversionxl.com/blog/ecommerce-content-marketing/Thanks
May 15, 2019 at 5:33 am #900039David
StaffCustomer SupportHi there,
this is related to this topic:
https://generatepress.com/forums/topic/exclude-a-category-from-previous-next-articles/#post-900008
So ill make a note there as we may be able to incorporate some of those changes in the new function.
Let me know if thats okDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 15, 2019 at 8:48 am #900365Elia
Thanks David,
But please make this as 2 separate codes, so we would easily distinguish them
May 15, 2019 at 5:15 pm #900819David
StaffCustomer SupportSo few steps:
1. Customizer > Layout > Blog – and disable the post nav.
2. Create a new Hook Element:https://docs.generatepress.com/article/hooks-element-overview/
2.1 Add this for the content:
<div id="custom-post-nav" class="post-nav-grid"> <?php global $post; $post = get_queried_object(); $post_type = get_post_type(); $prevPost = get_previous_post(); if($prevPost) { $args = array( 'posts_per_page' => 1, 'include' => $prevPost->ID, 'post_type' => $post_type ); $prevPost = get_posts($args); foreach ($prevPost as $post) { setup_postdata($post); ?> <a class="post-previous" href="<?php the_permalink(); ?>"> <span class="nav-icon">❮</span><span class="post-nav-label">Previous Article</span> <h5 class="post-nav-title"><?php the_title(); ?></h5> </a> <?php wp_reset_postdata(); } //end foreach } // end if $nextPost = get_next_post(false); if($nextPost) { $args = array( 'posts_per_page' => 1, 'include' => $nextPost->ID, 'post_type' => $post_type ); $nextPost = get_posts($args); foreach ($nextPost as $post) { setup_postdata($post); ?> <a class="post-next" href="<?php the_permalink(); ?>"> <span class="post-nav-label">Next Article</span><span class="nav-icon">❯</span> <h5 class="post-nav-title"><?php the_title(); ?></h5> </a> <?php wp_reset_postdata(false); } //end foreach } // end if ?> </div>
2.2 Select the
after_content
hook
2.3 Check execute PHP
2.4 Set your Display Rules for Posts > All Posts3. Add this CSS:
.post-nav-grid { display: grid; grid-template-columns: 50% 50%; padding: 5px 0; } .post-next { text-align: right; } .post-nav-grid .nav-icon { font-size: 0.75em; border-radius: 2em; padding: 0.25em 0.6em; width: 2em !important; color: #ffffff; background-color: #000000; margin: 0 0.5em; } .post-nav-title { margin: 0 0.75em; line-height: 1.1em }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 4:03 am #901255Elia
Thanks, David!
I use this plugin for adding the code:
https://wordpress.org/plugins/code-snippets/But the plugin shows me many errors:
https://gyazo.com/629cd97ce29a9b9fb06255d448498194I can’t use this plugin, right?
I just didn’t want to use Hooks via your theme because I already use another plugin
May 16, 2019 at 4:57 am #901331David
StaffCustomer SupportThat code needs to be added to a Hook, it won’t work in the Code Snippets plugin without adding some more code that adds it to the relevant hook. The Theme Hooks are the simplest and best way to place them.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 5:25 am #901360Elia
Thanks David,
I did exactly as you said, but nothing happens. I mean there is no navigation now. I put the link to the article in the first message, so you could see it in the live website
May 16, 2019 at 5:32 am #901366David
StaffCustomer SupportCan you confirm that you set the Display Rules for the Hook Element?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 5:35 am #901371Elia
May 16, 2019 at 5:57 am #901384David
StaffCustomer SupportThat looks correct. I assume all the other settings are correct, as the above instructions, and the Hook has been published? If so do you have any plugin / server caches?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 6:08 am #901400Elia
Hi David,
Yes I have a Nginx server cache, but I never had any problem like this. Strange. I don’t know how to flush it
The Hook has been published https://gyazo.com/ab57c1cfc9c5bdc106bf0f4245f5c724
May 16, 2019 at 6:17 am #901410David
StaffCustomer SupportSo the hook is working as i can see the empty container on the single post.
Do you still have that post category filter added to your site ( re: the other topic )? If so can you disable thatDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 6:19 am #901412Elia
No, David, the filter is not active..
May 16, 2019 at 7:05 am #901569Elia
David, I have to put back navigation links because we have a lot of traffic now, we could try again in couple of days. It’s strange that it’s not working. Maybe we can try it on the staging website, but not sure if it’s ready
May 16, 2019 at 7:24 am #901583David
StaffCustomer SupportThere must be something interfering with the normal post nav requests. Yes maybe best we take a closer look on a staging site. Let us know
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.