Inspiro Theme Customization | Author Info Widget

Author Info Widget

The Author Info Widget is a customizable sidebar feature designed to highlight the author of a post. When viewing a single post, this widget automatically displays:

• Author Avatar: The author’s profile picture, pulled directly from WordPress.
• Display Name: The full name of the author as set in their user profile.
• Bio: A short description or biography provided by the author.
• Website (optional): A clickable link to the author’s personal or professional website, if provided in their profile.

The widget is fully responsive and styled to appear as a clean card in the sidebar. It enhances engagement by giving readers a quick view of who wrote the content, providing context, credibility, and a direct connection to the author.

Additionally, the widget’s styling can be customized through CSS to match the theme of your site, including colors, spacing, shadows, and hover effects, making it both functional and visually appealing.

This article applies to WordPress Inspiro v2.1.4 by WPZOOM

Add this function to the theme/sub-theme functions.php file (you may replace suffux dox_ ;

/**
 * START - function to create widget of author info
 */

function dox_author_info_widget_display() {
  if (is_single()) {
    $author_id = get_the_author_meta('ID');
    $author_website = get_the_author_meta('user_url', $author_id); ?>

    <div class="widget author-info">
      <div class="author-avatar"><?php echo get_avatar($author_id, 96); ?></div>
      <h4 class="author-name"><?php echo esc_html(get_the_author_meta('display_name', $author_id)); ?></h4>
      <p class="author-bio"><?php echo esc_html(get_the_author_meta('description', $author_id)); ?></p>

      <?php if ($author_website) : ?>
        <p class="author-website">
          <a href="<?php echo esc_url($author_website); ?>" target="_blank" rel="noopener">
            Visit Website
          </a>
        </p>
      <?php endif; ?>
    </div>
  <?php }
}

function dox_register_author_info_widget() {
  register_sidebar(array(
    'name' => 'Author Info Sidebar',
    'id' => 'author-info-sidebar',
    'before_widget' => '<div class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
  ));

  // Register as widgetized output
  register_widget('WP_Widget_Author_Info');
}

class WP_Widget_Author_Info extends WP_Widget {
  function __construct() {
    parent::__construct('author_info', __('Author Info', 'textdomain'));
  }

  function widget($args, $instance) {
    echo $args['before_widget'];
    dox_author_info_widget_display();
    echo $args['after_widget'];
  }
}

add_action('widgets_init', function() {
  register_widget('WP_Widget_Author_Info');
});

Add this to the theme CSS, and revise it to suit your layout needs;

/* === Author Info Widget Card Style === */
.widget.author-info {
  background: #fff;                 /* white card background */
  border: 1px solid #e2e2e2;        /* subtle border */
  border-radius: 12px;              /* rounded corners */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* soft shadow */
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.widget.author-info:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Avatar */
.widget.author-info .author-avatar img {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid #ddd;
}

/* Author name */
.widget.author-info .author-name {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0;
  color: #222;
}

/* Bio text */
.widget.author-info .author-bio {
  font-size: 0.9em;
  line-height: 1.5;
  color: #666;
  margin-top: 10px;
}
/* Author website */
.widget.author-info .author-website {
  font-size: 0.9em;
  line-height: 1.5;
  color: #666;
  margin-top: 10px;
}