How to create author bio box using Elements (no plugins)

There are several ways to activate or create author bio boxes in WordPress.

Some themes support Author bio boxes as an option to simply activate.  And then there are of course many-o-plugins that will install and get you up and running in a jiffy.

Why not use a plugin to create an author bio box?

Of course you could, but there is a better way. 

I can show you how to create an Author bio box without plugins using only a few lines of code. And it will be code that you can understand.

For this solution I will not use any scripting or programming languages. Just some plain and simple HTML and CSS that is simple to read and understand.

But why not just use a plugin? 

Well, first of all it is super easy to do without a plugin. And it is a great feeling of accomplishment and independence when we solve a problem without using a plugin.

Also, we want to create our website the right way. This means that we want a fast loading website.  And if we want a fast website we cannot use plugins for every single problem we want to solve.

How I ended up creating my own author bio box

I use Generatepress for my websites. I like the themes and find them fast and easy to work with.

But is this instance the theme I am using here on Gameplanfi.com did not offer an option to include an author bio box after the post.

I ended up looking at a number of popular plugins. Many had great reviews and happy users but it felt wrong to install a plugin to solve one small and very specific problem – how do I show an author bio at the end of a post.

Some plugins are great and almost essential to WordPress but I try hard to stay away from one-trick ponies. 

What is a one-trick pony plugin you may ask. Well regardless of how many features a plugin offers it is still a one-trick pony plugin if it only solves one problem for you and your website.

Creating an author bio box with Elements in 7 easy steps

Nine steps, that sounds complicated! Well it is not. 

For someone who knows HTML and CSS this is really only two steps. 

• Create and style author bio box
• Create Element 

I am trying to create tutorials using small steps that hopefully will be easy to follow regardless of your level of knowledge. 

And this tutorial should work for most people. Just make sure that you always run the latest version of WordPress to work safer online. And if you have questions, please let me know. 

1. What we are creating

When you create something from scratch you need to have a clear idea of what you are creating. In our tutorial here today we will create an Author bio box with two separate columns.

We will have a photo in the left column and text in the right column.

In our finished version the photo will only be given 20% of the size of the box and we will use the rest of the box for the text describing the author.

2. How we are creating it

We will use plain HTML and CSS to format the content and create the box structure. Even if you are unfamiliar with HTML and CSS the code should be easy to understand. 

You can use the code below as a guide when you create your author bio box.

3. Uploading our photo and noting the location of the photo

Now we need to upload the photo we are going to use. It is also possible to use the Avatar from your profile but I prefer to use a photo. 

Also, using the Avatar would introduce a scripting language that is outside the scope of this tutorial.

This is the photo I will use today and I have also noted the location.

https://gameplanfi.com/wp-content/uploads/2021/04/ragdoll.jpg

4. Creating the HTML to build the Author box

Our author box will be created using the simplest of HTML. 

The code below may look messy but there is a class named “bio-row” and it will be used to create the two column box layout.

You can also see two classes named “bio-column1” and “bio-column2”. Yes, you guessed it. These classes create the actual columns. And if you look a bit closer one column (1) will hold the photo and the other (2) will hold the text.

There are a few other style attributes in the HTML code below that for example control background color, text size and padding. Feel free to change, adapt or remove to change the look when we have created the author box. But I recommend leaving them as is for the duration of the tutorial.

I also insert the location of my image from step 3 after the “img src” tag per below. 

<div class="bio-row">
  <div class="bio-column1" style="background-color:#fff;">
    <p><img src="https://gameplanfi.com/wp-content/uploads/2021/04/ragdoll.jpg" width="100" height="100" /></p>
  </div>
  <div class="bio-column2" style="background-color:#fff;">
    <p style="font-size:14px;"><strong>Meet the author:</strong> Always on the lookout the life of a Ragdoll is not easy. I am much more photogenic than Mattias why it was an easy choice to include me here today!</p>
  </div>
</div>

5. Looking at the CSS styling that will style the Author box

The CSS we use is mainly there to help us use the classes in the HTML above  to  create a box with 2 columns. And we use percentages for width as we want the author box to be responsive to different types of devices.

/* Create a row supporting two columns */

.bio-row {
  display: flex;
  padding-top: 10px;
}

/* Create two columns next to each other */

.bio-column1 {
  flex: 20%;
  padding: 15px;
}
.bio-column2 {
  flex: 80%;
  padding: 15px;
}

6. Uploading the CSS styling

In the WordPress Dashboard choose  Appearance > Customize

In the menu you arrive at you select the last alternative in the menu, Additional CSS.

We now simply scroll down past the last entry and then we paste in the CSS code above. When we are done we click the blue Publish button.

7. Creating the Element and display logic

Now we return back to the WordPress Dashboard and then we select Appearance > Elements

At the top of the page we choose “Add New Element” and then select “Hook” under Choose Element Type”.

We name the New Hook “Author Bio” and insert the HTML code from step 4 in the box. Still on the same page, under Settings > Hook we select “generate_after_content”.

Still on the same page we select the “Display Rules” tab (next to “Settings”). Here we select “Posts” and keep “All Posts” that fills in automatically under the section named “Location”. 

We are now done, click “Publish” and quickly move to one of our posts and there we have it.

You have now created an author bio box using Elements. And hopefully, as you think about the steps you went through, you will start to see the power of using Elements as you expand your own website.