[Resolved] blog post structure customization

[Adam]

Hi,

I have a few, questions related to blog post structure customization.

1. I’m looking at this visual guide https://docs.generatepress.com/article/hooks-visual-guide/ and I noticed the post author element on the bottom of the post, with the avatar. How can I achieve the same effect?

2. I wish to achieve following elements order:
– blog post
– post meta
– sharing links (I use separate plugin so I can call shortcode whenever nedded)
– related posts (I’m using Jetpack now, but mayby there is better solution)
– post author (I coded custom plugin, but if there is native support as mentioned in visual guide, than this would be preferred.)
– posts navigation

I tried to invoke posts_nav_link in generate_after_content but it doesn’t return anything.

Thanks,
Adam

[David]

Hi there,

1. Thats actually the avatar for the Comments.
You could include an image in the author byline meta – see below

2. You can change the footer meta using this filter:

https://docs.generatepress.com/article/generate_footer_entry_meta_items/
eg.

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    if ( is_single() ) {
        $items = array(
            'author',
            'date',
            'post-navigation',
        );
    }

    return $items;
} );

And this filter to add an avatar before the author:

add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() ),
            get_avatar( get_the_author_meta( 'ID' ) )
        )
    );
} );

Those other elements such as sharing links, related posts – if the plugins provide shortcodes you can add them to the after_content hook using a Hook Element.

For the Post Nav can check if it works with the Post navigation enabled in Customizer > Layout > Blog

[Adam]

Thanks David.

I managed to have it in the way I want. I added post nav with the code below. The problem is the nav shows twice. When I disable ‘Display post navigation’ it doesn’t show at all. I could hide the one I don’t want with css, but I don’t want to render it at all – unnecessary computing.

Can you tell, how can I use code below with disabled ‘Display post navigation’ and still see the navigation?

The core of the problem is that the prev next nav links are considered as entry-meta, but they aren’t. I think they should be separate from this container.

 
add_action('generate_after_content', function() {
echo '<footer class="entry-meta"><nav id="nav-below" class="post-navigation">';
  printf('<span class="screen-reader-text">%s</span>', __( 'Post navigation', 'generatepress' ));

  $post_navigation_args = apply_filters( 'generate_post_navigation_args', array(
    'previous_format' => '<div class="nav-previous">' . generate_get_svg_icon( 'arrow' ) . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '"
>%link</span></div>',
    'next_format' => '<div class="nav-next">' . generate_get_svg_icon( 'arrow' ) . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span
></div>',
    'link' => '%title',
    'in_same_term' => apply_filters( 'generate_category_post_navigation', false ),
    'excluded_terms' => '',
    'taxonomy' => 'category',
  ) );

  previous_post_link(
    $post_navigation_args['previous_format'],
    '%title',
    $post_navigation_args['in_same_term'],
    $post_navigation_args['excluded_terms'],
    $post_navigation_args['taxonomy']
  );

  next_post_link(
    $post_navigation_args['next_format'],
    '%title',
    $post_navigation_args['in_same_term'],
    $post_navigation_args['excluded_terms'],
    $post_navigation_args['taxonomy']
  );

  echo '</footer></nav>';
});

[Adam]

Ok, I managed to achieve it, but in quite dirty way. I had to make #nav-below position absolute, and .inside-article position relative plus give some padding on the bottom.

It works, but I wish that nav would have separate code base not so tight coupled with entry-meta.

With this solution it’s hard to keep it responsive.

[David]

The other elements you have hooked in after_main_content – lower their priority to 9 or less to position them before the post meta.

[Adam]

The problem is the entry-meta contains nav buttons. I want nav buttons to be on the bottom and the rest of the meta just after the post. There is no other way to do that other than I did.

Can I make a feature request to remove nav buttons from the entry-meta?

[Tom]

Hi there,

Are you basically wanting the post-navigation element outside of the entry-meta element?

Right now it is hardcoded in, as you can see here: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/structure/post-meta.php#L382

You would have to build your own generate_content_nav() function, then hook it where you want.

I’ll look at making this more flexible in 2.5.0 🙂

[Adam]

Hi Tom, yes, I wish to have post-navigation independent from entry-meta.

Yes, to make it happen I think probably even easier would be to move generate_content_nav from generate_footer_meta, and hook it alone.

There is also problem with styling. If I put post-navigation outside footer.entry-meta I will lose styling.

Thanks for considering making it easier in future version. 🙂

[Tom]

The styling is inherited from the meta container, which is why it’s in there.

We likely won’t remove it by default (backward-compatibility), but I will look at adding it into the current set of filters which will at least make it remove-able so it can be hooked elsewhere.

[Author]

Posts