Change the style for the Previous/Next section

Hi 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 ok

Thanks David,

But please make this as 2 separate codes, so we would easily distinguish them

So 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 Posts

3. 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
}

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/629cd97ce29a9b9fb06255d448498194

I can't use this plugin, right?

I just didn't want to use Hooks via your theme because I already use another plugin

That 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.

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

Can you confirm that you set the Display Rules for the Hook Element?

I did this:

https://gyazo.com/87731420c463eba9510fffd08cfe5b8c

Please let me know if I did it wrong

That 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?

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

So 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 that

No, David, the filter is not active..

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

There 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