Do you want to display the author image next to the author name in the post meta area under the post title in the Astra theme? By default, only the text-only author name display in that location. However, using a few lines of code can help you add author image next to the author name.
Preview: Avatar photo next to the Author Name
PHP Snippet: Add the Author Image
In the WordPress Dashboard, go to Appearance > Theme Editor and open the functions.php file of your Astra chid theme. Then add the following code at the end. Alternatively, you can use code snippets plugin for adding custom code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
if ( ! function_exists( 'astra_post_author' ) ) { /** * Function to get Author of Post * * @param string $output_filter Filter string. * @return html Markup. */ function astra_post_author( $output_filter = '' ) { ob_start(); echo '<span '; echo astra_attr( 'post-meta-author', array( 'class' => 'posted-by vcard author', 'itemtype' => 'https://schema.org/Person', 'itemscope' => 'itemscope', 'itemprop' => 'author', ) ); echo '>'; // Translators: Author Name. ?> <a class="url fn n" title="<?php printf( esc_attr__( 'View all posts by %1$s', 'astra' ), get_the_author() ); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author" itemprop="url"> <span class="author-avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ), 35 ); ?></span> <span class="author-name" itemprop="name"><?php echo get_the_author(); ?></span> </a> </span> <?php $output = ob_get_clean(); return apply_filters( 'astra_post_author', $output, $output_filter ); } } add_filter( 'astra_default_strings', 'wpd_astra_default_strings' ); function wpd_astra_default_strings( $strings ) { $strings['string-blog-meta-author-by'] = ''; // removing "by" text return $strings; } |
can you tell how to icrease the distance between author avatar and name
Hi,
This author’s image appears in the square. How to make it circled as it appears in your image shown above?
Try this CSS
Hi,
That CSS worked!
Hey, great thanks!
This worked!
Could you tell me how to make the image circular, and how to add the word “by”after the image before the author name?
Replace line no 28 of the above code with