[Resolved] I have 3 question

[John]

Hey

I have 3 question.

Q no 1.About author meta info

Currently display author meta info look like Last Update: November 2, 2017 by author name

I want to do my meta information Look like below format

Last Update Date: November 2, 2017 | author avatar image author name | Comments

How can I display this formate?

Here is example one https://prnt.sc/h7iwsk

Q no 2. Filterable Category menu

I want to do filterable category menu look like this website https://www.cloudliving.com/

Which plugin is better for me? Or any custom code?

Q no 3. I want to display Featured reviews(Featured post) in content below with featured image and title Look like this website https://bestseekers.com/best-car-waxes/

Thanks

[Tom]

Hi there,

1. Something like this should get you on your way:

add_filter( 'generate_post_author_output', 'tu_add_author_gravatar' );
function tu_add_author_gravatar() {
	printf( ' <span class="byline">%1$s</span>',
		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url"><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' ) )
		)
	);

	echo '<span class="comments-link">';
		comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
	echo '</span>';
}

You’ll likely need some CSS to make it look exactly like the screenshot.

2. Definitely need a plugin for this – I don’t know of any super good ones off the top of my head, but perhaps take a look on Code Canyon.

3. Perhaps a plugin like WP Show Posts can achieve this for you?

[John]

Hey Tom

Thanks for quick response, I added code in child theme functions.php
It works but I can not add style sheet.
I include below css in stylesheet but not work.

.byline, .group-blog .byline, .single .byline {
display: inline;
}

.entry-meta>li {
border-right: 1px #eee solid;
padding: 0 12px;
margin: 3px 0;
display: inline-block;
}

.entry-meta > li.byline img {
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

[Tom]

Try adding your CSS using one of these methods: https://docs.generatepress.com/article/adding-css/

[John]

I added css in child theme stylesheet but not work.
Any wrong to select class?

[Leo]

Can you link me to a page where the author picture is showing? The URL you provided in the URL field is not.

Thanks!

[John]

This is my live site so I remove those code for child theme functions.php which provided me top.
Here is code
——————————————————————————-
add_filter( ‘generate_post_author_output’, ‘tu_add_author_gravatar’ );
function tu_add_author_gravatar() {
printf( ‘ <span class=”byline”>%1$s</span>’,
sprintf( ‘<span class=”author vcard” itemtype=”http://schema.org/Person&#8221; itemscope=”itemscope” itemprop=”author”>%4$s<span class=”author-name” itemprop=”name”>%3$s</span></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’ ) )
)
);

echo ‘<span class=”comments-link”>’;
comments_popup_link( __( ‘Leave a comment’, ‘generatepress’ ), __( ‘1 Comment’, ‘generatepress’ ), __( ‘% Comments’, ‘generatepress’ ) );
echo ‘</span>’;
}

——————————————————————————-

It correctly works on my site but CSS not work. I try to add that CSS in child theme style.css

——————————————————————————-
.byline, .group-blog .byline, .single .byline {
display: inline;
}

.entry-meta>li {
border-right: 1px #eee solid;
padding: 0 12px;
margin: 3px 0;
display: inline-block;
}

.entry-meta > li.byline img {
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

——————————————————————————-

Can you send me CSS code please? I remove php code for my visitor because when I apply this show medium size gravatar image that looks ugly. Hope you understand my point.

[Leo]

Are you able to leave it on for a couple hours so we can see it?

Much easier to fix for things like this.

Thanks!

[John]

I include those code in child theme functions.php

Please check it now.

[Leo]

Hmm looks like you are using some sort of hover card code for the gravatar?

I’m not sure how their CSS work and was unable to overwrite it. Might be best to check with the source of the code?

For the updated time and author which are taking style from GP, this would be the selector:

time.updated {
    font-size: 15pxpx;
}
span.author-name {
    font-size: 15px
}

[John]

I can not select gravatar image class. Please take a look this part

[Leo]

I did. You are using some hover card CSS which makes it hard to target. I tried a few selectors but wasn’t able to get it to work.

Where did you get the code from? Perhaps asking them to see how to target it?

If you remove the hover card CSS. I should be able to help you out for sure.

[John]

I do not use any CSS card. I want to send you my site URL again but not open forum.

How can I send you my site URL secretly?

If you need will send my login details.

[Leo]

This is what i see: http://www.screencast.com/t/meDdWyQ6

Which is added by hovercard.css file: https://secure.gravatar.com/css/hovercard.css?ver=2017Novaa

If you didn’t add that, then try disable plugins one by one to see what’s adding it.

[John]

I have not enough knowledge to find the exact problem.

If you allow permit I will send my admin login credential via this mail

Then you will find the problem and fix it.

Wait for your permission?

[Author]

Posts