- This topic has 26 replies, 3 voices, and was last updated 4 years, 10 months ago by Elia.
-
AuthorPosts
-
May 15, 2019 at 4:39 am #899968Elia
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 #900039DavidStaffCustomer 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 okMay 15, 2019 at 8:48 am #900365EliaThanks David,
But please make this as 2 separate codes, so we would easily distinguish them
May 15, 2019 at 5:15 pm #900819DavidStaffCustomer 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 }
May 16, 2019 at 4:03 am #901255EliaThanks, 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 #901331DavidStaffCustomer 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.
May 16, 2019 at 5:25 am #901360EliaThanks 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 #901366DavidStaffCustomer SupportCan you confirm that you set the Display Rules for the Hook Element?
May 16, 2019 at 5:35 am #901371EliaMay 16, 2019 at 5:57 am #901384DavidStaffCustomer 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?
May 16, 2019 at 6:08 am #901400EliaHi 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 #901410DavidStaffCustomer 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 thatMay 16, 2019 at 6:19 am #901412EliaNo, David, the filter is not active..
May 16, 2019 at 7:05 am #901569EliaDavid, 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 #901583DavidStaffCustomer 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
-
AuthorPosts
- You must be logged in to reply to this topic.