How to Allow HTML Code in Post Author Bio in WordPress

Sharing is caring!

Free Download: You can download this article in PDF format.

Why would you need to allow HTML code in post author's bio?

Including HTML in the author bio can significantly enhance the user experience on your WordPress site. Here are a few scenarios where this capability can be particularly useful:

1. Clickable Links: Allow authors to include clickable links to their personal websites, social media profiles, or other relevant resources, making it easier for readers to connect with them.
2. Formatting Options: Enable the use of basic HTML tags for better text formatting, such as bold or italic text, which can make the bio more visually appealing.
3. Multimedia Content: Allow authors to include multimedia content such as images or videos in their bio, providing a richer and more engaging presentation.

How to Edit Author Bio in WordPress

The Author Bio can be edited from the user's profile page. It is usually in WordPress admin area. you can access this from the admin bar showed in the right.

/wp-admin/profile.php

Author Biographical Info area is under Contact Info

If you're using a membership plugin the page will be different and will most likely be on the public side of your site. The membership plugins tend to override most of profile related pages to keep the user in the public side. It will be different depending on the membership plugin/

Here's Some PHP Code that allows you to achieve exactly this.

Make sure you package this as a plugin. You can use our WordPress Plugin Generator as well.

You can of course add this to your functions.php file but you'll have to remove the <?php tag as there's such tag already.

This code can optionally generate an author box you'll have to uncomment the line that says installCustomAuthorBoxHook()... you can do this by removing the two slashes // in front of the line.

<?php

// Allow HTML in the author bio box.
$allow_html_author_bio_obj = new WPSandbox_Tutorial_Allow_HTML_Author_Bio();
$allow_html_author_bio_obj->installHooks();
//$allow_html_author_bio_obj->installCustomAuthorBoxHook(); // uncomment to generate author box

/**
 * This class allows you to add custom HTML tags and attributes to the author bio box.
 * It can generate a custom author box for you if you uncomment installCustomAuthorBoxHook() method.
 * @author Slavi Marinov | https://WPSandbox.net
 * @see https://wpsandbox.net/1455
 */
class WPSandbox_Tutorial_Allow_HTML_Author_Bio {

    public function installHooks()
    {
        // Disable WordPress sanitization to allow more than just $allowedtags from /wp-includes/kses.php.
        remove_filter( 'pre_user_description', 'wp_filter_kses' );

        // Add custom sanitization for user description.
        add_filter( 'pre_user_description', [ $this, 'extendedUserDescriptionKses' ] );

    }

    public function installCustomAuthorBoxHook() {
        // Add the author bio box after the post content.
        add_filter( 'the_content', [ $this, 'appendAuthorBioBox' ], 50 );
    }

    /**
     * Define additional allowed HTML tags and attributes.
     *
     * @param array $allowed_tags Existing allowed tags.
     * @return array Merged array of allowed tags.
     */
    public function customAllowedHtml( $allowed_tags ) {
        $default_allowed_attribs = [
            'id' => true,
            'rel' => true,
            'class' => true,
            'title' => true,
            'style' => true,
            'data' => true,
            'target' => true,
        ];

        // Custom allowed tags and attributes.
        $custom_tags = [
            'a' => [ 'href' => true, 'title' => true, 'target' => true, 'rel' => true ],
            'strong' => [],
            'p' => [],
            'span' => [],
            'div' => [],
        ];

        foreach ($custom_tags as $tag => $attribs) {
            if (empty($allowed_tags[$tag])) {
                $custom_tags[$tag] = $default_allowed_attribs;
            } else {
                $custom_tags[$tag] = array_merge($custom_tags[$tag], $default_allowed_attribs);
            }
        }
        
        return array_merge( $allowed_tags, $custom_tags );
    }

    /**
     * Apply extended allowed HTML tags to the user description.
     * @param string $data User description.
     * @return string Sanitized user description.
     */
    public function extendedUserDescriptionKses( $data ) {
        $allowed_tags = wp_kses_allowed_html( 'post' ); // Get default allowed tags for posts.
        $extended_tags = $this->customAllowedHtml( $allowed_tags );
        return wp_kses( $data, $extended_tags );
    }

    /**
     * Append author bio box to the end of post content.
     *
     * @param string $content The original post content.
     * @return string Modified post content with author bio box appended.
     */
    public function appendAuthorBioBox($content) {
        if (!is_singular('post')) {
            return $content;
        }

        ob_start(); // Start output buffering

        ?>
        <style>
            .author-bio-box { border: 2px solid #ddd; padding: 20px; margin-top: 20px; }
        </style>
        <div class="author-bio-box">
            <div class="author-avatar">
                <?php echo get_avatar(get_the_author_meta('ID'), 96); ?>
            </div>
            <div class="author-description">
                <h2 class="author-title"><?php echo get_the_author(); ?></h2>
                <p class="author-bio">
                    <?php echo wp_kses_post(get_the_author_meta('description')); ?>
                </p>
                <div class="author-links">
                    <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
                        <?php _e('View all posts by ', 'wp'); ?><?php echo get_the_author(); ?>
                    </a>
                </div>
            </div>
        </div>
        <?php

        $author_bio_box = ob_get_clean(); // Get the buffered content
        $content .= $author_bio_box;

        return $content;
    }
}

Sharing is caring!