Display Options

Customize how authors are displayed on your WordPress site.

Author Display Methods

There are several ways to display authors:

Automatic Author Box - Added to end of posts automatically
Template Tags - Add to your theme manually
Theme Integration - Your theme handles display
Shortcodes - Add anywhere in content

Automatic Author Box

Enabling Author Box

See General Settings - Author Box for enabling.

Default Author Box Style

The default author box includes:

Author avatar (Gravatar)
Author display name
Author biography
Link to author archive
Social media links (if in profile)

Customizing with CSS

Target Classes:

/* Main container */
.ema-author-box {
    /* Your styles */
}

/* Individual author item */
.ema-author-item {
    /* Your styles */
}

/* Author avatar */
.ema-author-avatar {
    /* Your styles */
}

/* Author name */
.ema-author-name {
    /* Your styles */
}

/* Author bio */
.ema-author-bio {
    /* Your styles */
}

/* Author link */
.ema-author-link {
    /* Your styles */
}

Example Styles:

/* Modern card style */
.ema-author-box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    margin: 40px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ema-author-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.ema-author-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ema-author-avatar {
    flex-shrink: 0;
    margin-right: 20px;
}

.ema-author-avatar img {
    border-radius: 50%;
    border: 3px solid #f0f0f0;
}

.ema-author-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #333;
}

.ema-author-name a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.ema-author-name a:hover {
    color: #0073aa;
}

.ema-author-bio {
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px;
}

.ema-author-link a {
    color: #0073aa;
    text-decoration: none;
    font-weight: 600;
}

Minimal Style:

/* Clean minimal style */
.ema-author-box {
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    padding: 20px 0;
    margin: 30px 0;
}

.ema-author-item {
    margin-bottom: 15px;
}

.ema-author-avatar {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.ema-author-avatar img {
    border-radius: 50%;
}

.ema-author-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 600;
}

.ema-author-bio {
    font-size: 14px;
    color: #666;
    margin-left: 60px;
}

Template Tag Display

Use template tags in your theme for custom display.

Basic Display

In your theme's single.php or content.php:

<?php
if ( function_exists( 'tmauthors_the_authors' ) ) {
    echo '<div class="post-authors">';
    echo '<span class="authors-label">Written by: </span>';
    tmauthors_the_authors();
    echo '</div>';
}
?>

Custom Formatted Display

<?php
if ( function_exists( 'tmauthors_get_post_authors' ) ) {
    $authors = tmauthors_get_post_authors( get_the_ID() );

    if ( ! empty( $authors ) ) {
        echo '<div class="custom-authors">';

        foreach ( $authors as $author ) {
            ?>
            <div class="author-card">
                <div class="author-avatar">
                    <?php echo get_avatar( $author->ID, 80 ); ?>
                </div>
                <div class="author-info">
                    <h4 class="author-name">
                        <a href="<?php echo esc_url( get_author_posts_url( $author->ID ) ); ?>">
                            <?php echo esc_html( $author->display_name ); ?>
                        </a>
                    </h4>
                    <?php if ( $author->description ) : ?>
                        <p class="author-bio">
                            <?php echo esc_html( $author->description ); ?>
                        </p>
                    <?php endif; ?>
                </div>
            </div>
            <?php
        }

        echo '</div>';
    }
}
?>

Inline Author Display

<?php
// Display authors inline: "By John Doe, Jane Smith, and Bob Johnson"
if ( function_exists( 'tmauthors_the_authors' ) ) {
    tmauthors_the_authors( 0, array(
        'before'    => '<span class="byline">By ',
        'after'     => '</span>',
        'separator' => ', ',
        'link'      => true,
    ) );
}
?>

Author Names Only

<?php
// Just the names, no links
if ( function_exists( 'tmauthors_get_author_names' ) ) {
    $names = tmauthors_get_author_names( get_the_ID(), ' & ' );
    echo '<p class="authors">' . esc_html( $names ) . '</p>';
}
?>

Display Formats

Format 1: Horizontal List

<style>
.authors-horizontal {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}
.author-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>

<?php
$authors = tmauthors_get_post_authors();
?>
<div class="authors-horizontal">
    <?php foreach ( $authors as $author ) : ?>
        <div class="author-item">
            <?php echo get_avatar( $author->ID, 32 ); ?>
            <span><?php echo esc_html( $author->display_name ); ?></span>
        </div>
    <?php endforeach; ?>
</div>

Format 2: Vertical Cards

<style>
.authors-vertical .author-card {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid #0073aa;
}
</style>

<div class="authors-vertical">
    <?php foreach ( $authors as $author ) : ?>
        <div class="author-card">
            <?php echo get_avatar( $author->ID, 60 ); ?>
            <h4><?php echo esc_html( $author->display_name ); ?></h4>
            <p><?php echo esc_html( $author->description ); ?></p>
            <a href="<?php echo esc_url( get_author_posts_url( $author->ID ) ); ?>">
                View all posts
            </a>
        </div>
    <?php endforeach; ?>
</div>

Format 3: Grid Layout

<style>
.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.author-grid-item {
    text-align: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
</style>

<div class="authors-grid">
    <?php foreach ( $authors as $author ) : ?>
        <div class="author-grid-item">
            <?php echo get_avatar( $author->ID, 100 ); ?>
            <h4><?php echo esc_html( $author->display_name ); ?></h4>
            <p><?php echo esc_html( wp_trim_words( $author->description, 20 ) ); ?></p>
        </div>
    <?php endforeach; ?>
</div>

Conditional Display

Show Only for Multiple Authors

<?php
if ( function_exists( 'tmauthors_has_multiple_authors' ) && tmauthors_has_multiple_authors() ) {
    // Only display if post has multiple authors
    echo '<div class="multiple-authors">';
    echo '<strong>This post was co-authored by:</strong> ';
    tmauthors_the_authors();
    echo '</div>';
}
?>

Different Display for Single vs Multiple

<?php
$authors = tmauthors_get_post_authors();
$count = count( $authors );

if ( $count === 1 ) {
    // Single author
    echo '<div class="single-author">';
    echo 'By ' . esc_html( $authors[0]->display_name );
    echo '</div>';
} else {
    // Multiple authors
    echo '<div class="multiple-authors">';
    echo 'Co-authored by ' . $count . ' writers';
    echo '</div>';
}
?>

Show in Specific Categories

<?php
// Only show author box in specific categories
if ( has_category( array( 'featured', 'editorial' ) ) ) {
    tmauthors_box();
}
?>

Author Avatar Options

Custom Avatar Size

<?php
foreach ( $authors as $author ) {
    // Large avatar
    echo get_avatar( $author->ID, 150 );

    // Small avatar
    echo get_avatar( $author->ID, 32 );
}
?>

Avatar with Custom Class

<?php
echo get_avatar( $author->ID, 80, '', $author->display_name, array(
    'class' => 'custom-avatar-class',
) );
?>

Default Avatar

<?php
// Custom default avatar if user has none
$default_avatar = get_template_directory_uri() . '/images/default-avatar.png';

echo get_avatar( $author->ID, 80, $default_avatar );
?>

Author Links

Link to Author Archive

<?php
$author_url = get_author_posts_url( $author->ID );
?>
<a href="<?php echo esc_url( $author_url ); ?>">
    View all posts by <?php echo esc_html( $author->display_name ); ?>
</a>

Link to Author Website

<?php
$website = get_the_author_meta( 'url', $author->ID );
if ( $website ) {
    ?>
    <a href="<?php echo esc_url( $website ); ?>" target="_blank" rel="noopener">
        <?php echo esc_html( $author->display_name ); ?>'s Website
    </a>
    <?php
}
?>

<?php
// Get social media from user meta
$twitter = get_the_author_meta( 'twitter', $author->ID );
$facebook = get_the_author_meta( 'facebook', $author->ID );

if ( $twitter || $facebook ) {
    echo '<div class="author-social">';

    if ( $twitter ) {
        echo '<a href="https://twitter.com/' . esc_attr( $twitter ) . '">Twitter</a>';
    }

    if ( $facebook ) {
        echo '<a href="' . esc_url( $facebook ) . '">Facebook</a>';
    }

    echo '</div>';
}
?>

RTL Support

For right-to-left languages:

.ema-author-box {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .ema-author-avatar {
    float: right;
    margin-right: 0;
    margin-left: 15px;
}

Mobile Responsive

/* Desktop */
.ema-author-box {
    display: flex;
    gap: 20px;
}

/* Tablet */
@media (max-width: 768px) {
    .ema-author-box {
        flex-direction: column;
    }

    .ema-author-avatar {
        margin: 0 auto 15px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ema-author-avatar img {
        width: 60px;
        height: 60px;
    }

    .ema-author-name {
        font-size: 16px;
    }
}

Accessibility

Ensure author display is accessible:

<div class="ema-author-box" role="complementary" aria-label="About the authors">
    <h3 id="authors-heading">About the Authors</h3>

    <?php foreach ( $authors as $author ) : ?>
        <div class="author-item" itemscope itemtype="https://schema.org/Person">
            <img src="<?php echo esc_url( get_avatar_url( $author->ID ) ); ?>"
                 alt="<?php echo esc_attr( $author->display_name ); ?>'s avatar"
                 itemprop="image">

            <h4 itemprop="name">
                <a href="<?php echo esc_url( get_author_posts_url( $author->ID ) ); ?>"
                   itemprop="url">
                    <?php echo esc_html( $author->display_name ); ?>
                </a>
            </h4>

            <p itemprop="description">
                <?php echo esc_html( $author->description ); ?>
            </p>
        </div>
    <?php endforeach; ?>
</div>

Schema Markup

Add structured data for SEO:

<div itemscope itemtype="https://schema.org/Article">
    <div itemprop="author" itemscope itemtype="https://schema.org/Person">
        <?php foreach ( $authors as $author ) : ?>
            <meta itemprop="name" content="<?php echo esc_attr( $author->display_name ); ?>">
            <meta itemprop="url" content="<?php echo esc_url( get_author_posts_url( $author->ID ) ); ?>">
        <?php endforeach; ?>
    </div>
</div>

Next Steps

Template Tags Reference - All available functions
Hooks & Filters - Customize display
Theme Integration - Complete guide

Author Display Methods​

Automatic Author Box​

Enabling Author Box​

Default Author Box Style​

Customizing with CSS​

Template Tag Display​

Basic Display​

Custom Formatted Display​

Inline Author Display​

Author Names Only​

Display Formats​

Format 1: Horizontal List​

Format 2: Vertical Cards​

Format 3: Grid Layout​

Conditional Display​

Show Only for Multiple Authors​

Different Display for Single vs Multiple​

Show in Specific Categories​

Author Avatar Options​

Custom Avatar Size​

Avatar with Custom Class​

Default Avatar​

Author Links​

Link to Author Archive​

Link to Author Website​

Social Media Links​

RTL Support​

Mobile Responsive​

Accessibility​

Schema Markup​

Next Steps​