[Resolved] Social media icons

[Clare]

I’ve got a couple questions here:

1. How can I get social media icons directly beneath my “About” section? Right now they’re sitting in a separate widget right beneath the about widget.
2. I’d like to align the nav bar social icons all the way to the right, with other menu options all the way on the left. Also, when in mobile version, I’d like the social icons to remain to the right, but the other menu options hamburger style, like this site: http://www.kwernerdesign.com
3. Is there a good way, or at least a lightweight, easily customizable plugin, to add social media icons beneath the “continue reading” and then at the bottom of the blog post itself? Like this site: http://mayholicdesign.com

I was able to find half answers to a few of these in forums, but I’ve reached the point where I’m not sure what’s the best way to tackle these. Thanks!

[Leo]

Hi there,

1. Are you referring to the sidebar widget? You just need to add them to the same widget above.

2. Set both navigation width to full: https://docs.generatepress.com/article/navigation-layout/ then align to the left: https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

And keep the menu-item-float-right class you’ve added.

That should work to split them to two sides.

3. Hmm try using the after content hook with conditional tag plus FontAwesome icons:
https://docs.generatepress.com/article/hooks-overview/
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/using-hooks-conditional-tags/#blog-posts-page

Let me know me if this gets you closer 🙂

[Clare]

Thanks Leo!
1. I decided against moving the icons.
2. I had the menu centered earlier and forgot, so following your align left worked perfectly.
3. I’ve looked at some of the hook documentation, and to be honest, it confuses me. If I just wanted to move the tags from below the excerpt, to next to the date (which is under the title), would I still need to use a hook?

[Leo]

Give this a shot: https://generatepress.com/forums/topic/move-tags-from-below-the-article-next-to-the-author/#post-431241

[Clare]

I disabled tags in Customize > Layout > Blog, and then added the code Tom provided in the Code Snippets plugin, but no luck. Not sure if I’m missing some other crucial step…¯\_(ツ)_/¯

[Leo]

Hmm I just tested and the code worked for me.

What if you activate post author?

[Clare]

That works! How should I edit the code so that I don’t have the author showing, just date, categories and tags, all on the same line? (And with the tags, preferably without the tag icon)

This is what I’m using:

add_filter( 'generate_post_author_output', 'tu_add_tags_to_author' );
function tu_add_tags_to_author( $output ) {
    $tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    $tags = apply_filters( 'generate_tag_list_output', sprintf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
        _x( 'Tags', 'Used before tag names.', 'generatepress' ),
        $tags_list
    ) );

    return $output . $tags;
}

[Leo]

Try this additional CSS:

.author.vcard, .tags-links:before {
    display: none;
}

[Clare]

So close! Got rid of author, but isn’t showing categories, and the tags and date aren’t on the same line.

[Leo]

Ok so just to make sure.

The order you want is date, tags (without icon) then categories (with icon)?

[Clare]

That’s all correct, except categories also without icon.

[Leo]

So how should tags and categories be separated?

[Clare]

If possible, vertical bar – | . Sorry to be a pain about such minuscule details – I normally can tinker around with the CSS, but this function has me confused.

[Leo]

Can you try this snippet instead:

add_filter( 'generate_post_author_output', 'tu_categories_to_author' );
add_filter( 'generate_category_list_output', '__return_false' );
add_filter( 'generate_tag_list_output', '__return_false' );
add_filter( 'generate_show_comments', '__return_false' );
function tu_categories_to_author( $output ) {
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    $categories_list = sprintf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
        _x( 'Categories', 'Used before category names.', 'generatepress' ),
        $categories_list
    );
	
	$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
	$tags_list = sprintf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
		_x( 'Tags', 'Used before tag names.', 'generatepress' ),
		$tags_list
	);

  echo $output . $categories_list . ' | ' . $tags_list;
  
  if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
			echo '<span class="comments-link">';
				comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
			echo '</span>';
		}
}

and this CSS:

.entry-header .entry-meta > * {
    display: inline-block;
    margin-right: 20px;
}
.cat-links:before, .tags-links:before {
    display: none;
}

[Clare]

Categories are now in! However, there’s a weird space between the categories and the vertical bar, and I’m not sure where to fix that. I didn’t want comments showing, so I already took that out. Here’s my code at this point:

add_filter( 'generate_post_author_output', 'tu_categories_to_author' );
add_filter( 'generate_category_list_output', '__return_false' );
add_filter( 'generate_tag_list_output', '__return_false' );
function tu_categories_to_author( $output ) {
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    $categories_list = sprintf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
        _x( 'Categories', 'Used before category names.', 'generatepress' ),
        $categories_list
    );
	
	$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
	$tags_list = sprintf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
		_x( 'Tags', 'Used before tag names.', 'generatepress' ),
		$tags_list
	);

  echo $output . $categories_list . ' | ' . $tags_list;

}

[Author]

Posts