Customize Dispatch theme custom post navigation

Hi there,

so you just want a featured image thumbnail and Icon ?

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

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

After it. Just like Dispatch...

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

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

Thanks David.

Glad to hear that.

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.

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.

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!

Nice one. No problem.:)