[Resolved] Customize Dispatch theme custom post navigation

Home Forums Support [Resolved] Customize Dispatch theme custom post navigation

Home Forums Support Customize Dispatch theme custom post navigation

  • This topic has 11 replies, 3 voices, and was last updated 1 year ago by Elvin.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1457518
    George

    Hi David, if you can read this, can you please advice of any changes to customize the custom post navigation functionality found in your Dispatch theme to match the image I am attaching?

    https://ibb.co/Ws2Jzmc

    #1458317
    David
    Staff
    Customer Support

    Hi there,

    so you just want a featured image thumbnail and Icon ?

    #1459235
    George

    Yeah, kind of like this split-screen in the screenshot?

    #1459874
    David
    Staff
    Customer Support

    Where will they be positioned – are they to stick either side of the post content or after it ( Like Dispatch ) ?

    #1460187
    George

    After it. Just like Dispatch…

    #1460357
    David
    Staff
    Customer Support

    Probably easier to use the generate_post_navigation_args filter to include the thumbs. Example provided here:

    https://generatepress.com/forums/topic/featured-images-on-post-navigation-not-correct/#post-1426224

    #1461413
    George

    Ok, I see. I think I can take it from there!

    Thanks David.

    #1461805
    David
    Staff
    Customer Support
    #1468148
    George

    Hi David, sorry I did my best, got lost in a sea of code from the other posts, didn’t manage to make it. What I have so far is in the link provided.

    My code is:

    add_action( 'after_setup_theme', 'tu_category_specific_post_navigation' );
    function tu_category_specific_post_navigation() {
        add_filter( 'generate_category_post_navigation', '__return_true' );
    }
    
    add_filter( 'generate_category_list_output', function( $output ) {
        if ( !is_single()) {
            return $output;
        }
        return '<span class="category-label">Read More:</span>' . $output;
    } );
    
    add_filter( 'generate_post_navigation_args', function( $args ) {
        if ( is_single() ) {
            $prevPost = get_previous_post();
            $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID ) : '';
            $nextPost = get_next_post();
            $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID ) : '';
    
            $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>';
            $args['next_format'] = '<div class="nav-next">' . $nextThumbnail . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>';
        }
    
        return $args;
    } );

    And CSS:

    .post-navigation img {
    	width: 200px;
    	height: 130px;
    	 object-fit: cover !important;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
    }
    
    .nav-previous .prev:after, .nav-next .next:after {
        font-family: 'icomoon';
    	font-size: 30px;
    }	
    
    .nav-next .next:after {
    	content: "\e900";
    }
    
    .nav-previous .prev:after {
    	content: "\e901";
    }
    
    .post-navigation .nav-previous,
        .post-navigation .nav-next {
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;
    }
    
    /* flex row for desktop and tablet */
    @media (min-width: 420px) {
    
        .post-navigation {
            display: flex;
        }
        .post-navigation .nav-next {
            margin-left: auto;
            align-items: flex-end;
            text-align: right;
        }
    }
    
    @media (max-width: 769px) {
    .post-navigation img {
        width: 300px;
    }
    }
    
    .nav-previous, .nav-next {
        position: relative;
    }

    What I want is as seen in the screenshot on the first post. I want to get rid of the title but keep the post navigation icons (I am using a custom font from icomoon) and put the icons at the sides of the images with a black background with the icon and the thumbnail image being clickable. Finally, I would like to add this divider line in the middle.

    #1468208
    Elvin
    Staff
    Customer Support

    Hi George,

    Some of the things you’re trying to do might require a bit of HTML code structure editing.

    Have you checked the actual structure of Dispatch’s post navigation?

    If no, you can find it on Appearance > Elements. You should be able to see a Hook Element named “Custom Post Navigation”.

    If you open it, you’ll see the PHP + HTML code that outputs the current post navigation you’re currently seeing.

    You may wanna tinker with it. (Ex: add extra classes, divs, elements, etc)

    Let us know how it goes.

    A wise man once said:
    "Have you cleared your cache?"

    #1469807
    George

    Hi Elvin, gave another try with the Dispatch theme code as per your suggestion, managed to make it work. Had to rearrange the flexbox a bit and add some markup to the actual code. Pretty happy with the result.

    Thanks!

    #1472030
    Elvin
    Staff
    Customer Support

    Nice one. No problem.:)

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.