Change the style for the Previous/Next section

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elia]

Thanks David,

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

[David]

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
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elia]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elia]

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

[David]

Can 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/

[Elia]

I did this:

https://gyazo.com/87731420c463eba9510fffd08cfe5b8c

Please let me know if I did it wrong

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elia]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elia]

No, David, the filter is not active..

[Elia]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts