Tutorial : WordPress – Add an Author Block with a Shortcode

In this guide, we’ll walk through the process of creating a WordPress plugin that displays a simple author block. This block shows the author’s avatar, name, bio, and a link to view all posts by the author. We’ll also include an option to specify which author to display using a shortcode attribute.

At the end of this guide, you’ll have a fully functional WordPress plugin ready for installation.

Example Prompt:

Create a WordPress plugin that adds a shortcode to display an author’s block, including their name, bio, avatar, and a link to their posts. If no author is specified, it should default to the current post’s author. Include a CSS file for styling.

Step 1: Create the Plugin File

Create a New Folder

First, create a new folder for your plugin. You can name it easycoding-author-block (or whatever you prefer). Inside that folder, create a PHP file called easycoding-author-block.php. This file will contain all the necessary PHP code for the plugin.

PHP Code for the Plugin

The following PHP code registers a shortcode to display an author block. This code handles the logic for displaying the author’s information, including the option to specify a different author.

<?php
/**
 * Plugin Name: EasyCodingWithAI - Author Block
 * Description: A simple shortcode to display an author block, with an option to specify the author.
 * Version: 1.0
 * Author: Your Name
 * Text Domain: easycoding-author-block
 */

// Enqueue plugin CSS
function easycoding_author_block_styles() {
    wp_enqueue_style('easycoding-author-block-style', plugin_dir_url(__FILE__) . 'assets/css/style.css');
}

add_action('wp_enqueue_scripts', 'easycoding_author_block_styles');

// Register the shortcode
function easycoding_author_block_shortcode($atts) {
    // Set up the default attributes
    $atts = shortcode_atts(
        array(
            'author' => '', // Default is current post's author
        ),
        $atts,
        'author_block'
    );

    // If no author is specified, use the post author's details
    if (empty($atts['author'])) {
        global $post;
        $author_id = $post->post_author;
    } else {
        // Get user by the given author name (use user login for more flexibility)
        $user = get_user_by('login', $atts['author']);
        if ($user) {
            $author_id = $user->ID;
        } else {
            return 'Author not found'; // If the author is not found
        }
    }

    // Get author details
    $author_name = get_the_author_meta('display_name', $author_id);
    $author_bio = get_the_author_meta('user_description', $author_id);
    $author_avatar = get_avatar_url($author_id);
    $author_url = get_author_posts_url($author_id);

    // Create the author block HTML
    ob_start();
    ?>
    <div class="author-block">
        <div class="author-avatar">
            <img src="<?php echo esc_url($author_avatar); ?>" alt="<?php echo esc_attr($author_name); ?>" />
        </div>
        <div class="author-info">
            <h3><?php echo esc_html($author_name); ?></h3>
            <p><?php echo esc_html($author_bio); ?></p>
            <a href="<?php echo esc_url($author_url); ?>">View all posts by <?php echo esc_html($author_name); ?></a>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

// Hook to register the shortcode
add_shortcode('author_block', 'easycoding_author_block_shortcode');

Explanation of the PHP Code:

1. Plugin Header: This block of code defines the plugin’s name, description, version, and author information.
2. Enqueue CSS: The function easycoding_author_block_styles() enqueues the CSS file located in the assets/css/style.css directory. This ensures the plugin’s styles are loaded on the front end of your WordPress site.
3. Shortcode Registration: The easycoding_author_block_shortcode() function handles the creation of the author block. It accepts an optional author attribute (defaulting to the current post’s author). The shortcode displays the author’s avatar, name, bio, and a link to their posts.
4. Shortcode Output: This function outputs the HTML structure for the author block, which will be inserted wherever you use the shortcode in your posts or pages.

Step 2: Add the CSS for Styling

Now let’s create the style.css file to style the author block.

Create the CSS File

Inside your plugin folder, create the following directory structure:

your-plugin/
    ├── easycoding-author-block.php
    └── assets/
        └── css/
            └── style.css

CSS Code for Styling

Here’s an example of how to style the author block:

/* Style for the author block */
.author-block {
    display: flex;
    align-items: center;
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

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

.author-avatar img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.author-info h3 {
    margin: 0;
    font-size: 1.2em;
    color: #333;
}

.author-info p {
    font-size: 1em;
    color: #555;
}

.author-info a {
    font-size: 1em;
    color: #0073aa;
    text-decoration: none;
}

.author-info a:hover {
    text-decoration: underline;
}

Explanation of the CSS Code:

• The .author-block class styles the entire block, setting up a flex container to align the avatar and author information.
• The .author-avatar class styles the avatar image, giving it rounded edges (via border-radius) and a fixed size.
• The .author-info class defines the styling for the author’s name, bio, and the link to view more posts.
• The link in the author block is styled to match WordPress’ typical link styles but with custom hover effects.

Step 3: Install the Plugin

Now that you have created both the PHP and CSS files, it’s time to install the plugin.

Installation Steps:

1. Create the Plugin Folder:
   • In your WordPress installation directory, navigate to the wp-content/plugins/ folder.
   • Create a new folder named easycoding-author-block (or use the folder name you’ve chosen).
   • Inside this folder, place the easycoding-author-block.php and assets/css/style.css files.
2. Activate the Plugin:
   • Log in to your WordPress admin dashboard.
   • Go to Plugins > Installed Plugins.
   • Find EasyCodingWithAI – Author Block in the list and click Activate.

Step 4: Using the Shortcode

After activating the plugin, you can use the shortcode in any post or page to display the author block.

By default, the shortcode will display the author of the current post:

[author_block]

To specify a different author, use the author attribute, as shown below:

[author_block author="john"]

Conclusion

In this guide, you’ve learned how to create a simple WordPress plugin that displays an author block with a shortcode. You also saw how to enqueue a custom CSS file to style the block. Following this tutorial, you can easily customize and expand the plugin to fit your needs.

Happy coding!