maricelo

oh, ok. Sounds good. Although I have one more question. In case I have a multi language website. Is it possible to synchronize the language switch of the main page with the switch and language itself on the WordPress? For example a user switches language to german and then clicks on the blog section. And blog section is opened in german (example.com/de/blog). It’s also not a problem?

Ok, but how will the existing navbar and footer blend in? Or do I have to create that from scratch on the wordpress side? Or can the wordpress be somehow embedded?

And is it possible to use a specific theme and edit it as per needs?

Could you please help me with one more question? I would like to make the thumbnail in the post navigation to occupy all the width and height of the nav-next class. And “Next post > Post title” (they are in the post-title-wrap class) is on the image in the right bottom corner. I can do that with the css but didn’t manage to change the link to be an image. I would like so that the whole image is clickable but I’m having troubles with nesting it in the link.
So just to sum up: Image the whole width of the nav-next class. “Next post > Post title” in the right bottom corner but just a simple text.
The code was taken from: https://generatepress.com/forums/topic/post-navigation-with-clickable-thumbnails/

#nav-below,
.nav-previous,
.nav-next,
.post-title-wrap {
    display: flex;
    width: 100%;
}

#nav-below {
    justify-content: space-between;

}

#nav-below img {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}

.nav-previous,
.nav-next {
    width: 49%;
    margin: 10px 0;
    position: relative;
    box-sizing: border-box;
}

.post-title-wrap {
    padding: 10px;
    width: 100%;
    flex-direction: column;
    border: 1px solid #efefef;
}

.nav-previous .post-title-wrap {
    text-align: right;
}

#nav-below a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.title-label {
    font-size: 12px;
}

.nav-previous:hover .post-title-wrap,
.nav-next:hover .post-title-wrap {
    border: 1px solid #ccc;
}

@media(max-width: 758px) {
    #nav-below {
        flex-direction: column;
    }

    .nav-previous,
    .nav-next {
        width: 100%;
    }
}

The issue seems that WordPress is generating a 150×150 pixel thumbnail. And if I try to stretch it then this looks bad. Any ideas on how to adjust the thumbnail size?

Unfortunately I can’t share my website URL, however, the code that I am using is below.
The code is in the functions.php:

add_filter( 'generate_post_navigation_args', function( $args ) {
    if ( is_single() ) {
        $prevPost = get_previous_post();
        $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID, 'thumbnail' ) : '';
        $nextPost = get_next_post();
        $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID, 'thumbnail' ) : '';

        $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . '<div class="post-title-wrap"><span class="title-label">Previous Post</span><span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">' . generate_get_svg_icon( 'arrow-left' ) .'%link</span></div></div>';
        $args['next_format'] = '<div class="nav-next"><div class="post-title-wrap"><span class="title-label">Next Post</span><span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link ' . generate_get_svg_icon( 'arrow-right' ) . '</span></div>' . $nextThumbnail . '</div>';
    }

    return $args;
} );
add_filter( 'generate_category_post_navigation', '__return_true' );

Yes, however, I found the solution regarding the thumbnails here – https://generatepress.com/forums/topic/post-navigation-with-clickable-thumbnails/#post-1523670

Thank you!
That helped. Just one more question – is there a possibility to show the first image of the post and not the featured one?