[Resolved] Customize Dispatch theme custom post navigation

[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

[David]

Hi there,

so you just want a featured image thumbnail and Icon ?

[George]

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

[David]

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

[George]

After it. Just like Dispatch…

[David]

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

[George]

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

Thanks David.

[David]

Glad to hear that.

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

[Elvin]

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.

[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!

[Elvin]

Nice one. No problem.:)

[Author]

Posts