Inspiro Theme Customization | Avatar in byline

The following code was used to add a 35px by 35px image to the byline of an single post page. The approach used is to modify the theme template tag “inspiro_single_entry_meta” to add the author avatar in front of the byline.

This article applies to WordPress Inspiro v2.1.4 by WPZOOM

Locate the file /inc/template-tags.php and locate the section “inspiro_single_entry_meta” and replace it with below code;

if ( ! function_exists( 'inspiro_single_entry_meta' ) ) :
        /**
         * Prints HTML with meta information for the current post-date/time and author.
         */
        function inspiro_single_entry_meta() {
                $catlinks = '';

                /* translators: Used between list items, there is a space after the comma. */
                $separate_meta = __( ', ', 'inspiro' );

                // Get Categories for posts.
                $categories_list = get_the_category_list( $separate_meta );

                if ( inspiro_categorized_blog() && $categories_list ) {
                        $catlinks = sprintf(
                                '<span class="entry-categories cat-links">%s %s</span>',
                                __( 'in', 'inspiro' ),
                                $categories_list
                        );
                }

                $author_id = get_the_author_meta( 'ID' );
                $avatar = get_avatar( $author_id, 32, '', '', array( 'class' => 'entry-author-avatar' ) );
                $byline = $avatar . ' ' . inspiro_author_link();

                $datetime = sprintf(
                        '<span class="entry-date">%s %s</span>',
                        __( 'on', 'inspiro' ),
                        inspiro_time_link()
                );
                // Finally, let's write all of this to the page.
                echo wp_kses(
                        $byline . $catlinks . $datetime,
                        array(
                                'a'    => array(
                                        'href'  => array(),
                                        'title' => array(),
                                        'class' => array(),
                                ),
                                'img'  => array(       // <--- add this
                                    'src'    => array(),
                                    'class'  => array(),
                                    'alt'    => array(),
                                    'height' => array(),
                                    'width'  => array(),
                                ),
                                'time' => array(
                                        'datetime' => array(),
                                        'class'    => array(),
                                ),
                                'span' => array(
                                        'class' => array(),
                                ),
                        )
                );
        }
endif;

Add the following to the theme CSS to style and tweak to your requirements. Its a good idea not to exceed 32px for wrapping of the article meta data.

/* Author avatar in post meta header */
.entry-meta .entry-author-avatar {
    width: 32px;                /* match get_avatar() size */
    height: 32px;
    border-radius: 40%;         /* make it circular */
    vertical-align: middle;     /* align with text */
    margin-right: 6px;          /* space between avatar and author name */
    display: inline-block;      /* ensure inline alignment */
}

/* Optional: adjust spacing if categories/date wrap awkwardly */
.entry-meta .entry-categories,
.entry-meta .entry-date {
    margin-left: 10px;
    font-size: 0.9em;           /* slightly smaller than title */
    color: #666;                /* match meta color */
}