[Support request] Change the style for the Previous/Next section

Home Forums Support Change the style for the Previous/Next section

This topic contains 26 replies, has 3 voices, and was last updated by  Elia 1 month, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #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

    #900039

    David Customer Support

    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

    #900365

    Elia

    Thanks David,

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

    #900819

    David Customer Support

    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
    }
    #901255

    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

    #901331

    David Customer Support

    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.

    #901360

    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

    #901366

    David Customer Support

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

    #901371

    Elia

    I did this:

    https://gyazo.com/87731420c463eba9510fffd08cfe5b8c

    Please let me know if I did it wrong

    #901384

    David Customer Support

    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?

    #901400

    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

    #901410

    David Customer Support

    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

    #901412

    Elia

    No, David, the filter is not active..

    #901569

    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

    #901583

    David Customer Support

    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

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.