Start Blogging 101 is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more

How to Create Kadence About the Author Element Tutorial

If you’re wondering how to add an About the Author element above your sidebar using hooks on your WordPress site, then you’ve come to the right place.

Even though the Kadence theme already includes an “About the Author” section at the end of your blog posts, wouldn’t it be nice if you could have an author bio at the very top of your sidebar?

In this About the Author bio tutorial, I’m going to show you how to set up Kadence Element Hooks, build the “About the Author” sidebar element using Kadence Blocks, and then hook it into your site for each author on your website.

I should note that I am using the Kadence theme. If your WordPress site isn’t running the Kadence theme, then you may want to consider switching. 🙂 Check out why the Kadence theme won my award for the best WordPress theme in 2020.

Let’s jump right into it.

How to Create About the Author Sidebar Element – Tutorial Guide:

  1. Setup Kadence Element Hooks
  2. Create About the Author Element Using Kadence Blocks
  3. Choose Element Hooks Placement Before Sidebar
  4. Choose Display Settings to Specify Posts and Author
  5. Publish About the Author Element

1. Setup Kadence Element Hooks

First of all, you need to get Kadence Element Hooks enabled on your website.

In order to get the Element Hooks feature, you will need the Kadence Pro theme as this is a premium feature offered for the Kadence theme.

If you need instructions on how to get Kadence Element Hooks enabled on your website, check out Step 1 from my How to Use Kadence Element Hooks for Endless Customization article where I go into much more detail on what Kadence Element Hooks are.

Otherwise, if you already have Kadence Element Hooks turned on for your website, you can skip this step and go straight to Step 2!

2. Create About the Author Element Using Kadence Blocks

Now, it’s time to create our About the Author element which we will then hook into our website using Kadence element hooks.

In order to easily create a nice looking box with our author avatar, some text, and a button, we are going to need to use an info box block that comes with the free Kadence Blocks plugin.

In fact, here’s the final About the Author bio box element that we will be creating and hooking into your sidebar:

If you don’t already have Kadence Blocks on your website, make sure to download and activate it.

Once Kadence Hooked Elements are enabled and you have the Kadence Blocks plugin installed and activated, go to AppearanceKadence and click on the ↳ Elements option.

You will now be on the Elements page. Click the Add New button to begin adding a new element.

After clicking Add New, you will see an option for Default, Code, or Fixed. For this tutorial, we will be using the Default option. Choose Default.

Where it says Add title, type “[Author name] Author Bio Sidebar Element” where [Author name] is the name of whichever author you are creating the element for.

So, for this example, I’m going to type “Jake Author Bio Sidebar Element.”

Once the title is set, it’s time to create our info box Kadence block.

For the content section of your Kadence element, add a new info box using Kadence Blocks or you can type /info and the info box will show up.

With the default info box showing, there a number of options in the block settings for predefined styles.

How to Create About the Author Bio Kadence Info Box Layout

I chose the middle option on the top row for InfoBox Quick Layout Presets and then linked to my About page for the Link option.

For Link Content, I chose Entire Box so that visitors can click anywhere in the entire info box to go to the About page.

Let’s change the Title heading of the info box.

If you run a single author website where you are the only person who writes articles, you could change the title to About Me.

Otherwise, for this tutorial, I’m going to be creating this author box for a website with multiple authors on it, so I’ll change the title to About the Author.

For the text below the title, fill in the author bio that matches whichever author you are making the element for.

This is what the About the Author info box looks like so far:

Container Settings

It’s time to dig into the Container Settings of our info box so we can start to tweak the About the Author container and make it look better.

Here is a screenshot of the Container Settings that I have set. I’ll go over each setting that I changed from the default settings.

About the Author Bio Kadence Blocks Container Settings

For the Container Border Width, I set it to 2px to have a thin border around the box. Then, I set the Container Border Radius to 0 which removes the rounded corners and makes it look like a full box.

Change the Container Border to whichever color you want your author element to have. I used a dark color to really make it pop out on the website.

**Note: Whatever color you choose for your Container Border and Container Background, keep in mind that there is a Hover tab where you have to set the colors for when you hover over the author box.

I left the Container Padding at 20px. Then, I also added 30px of Bottom Margin so that there will be enough space between your About the Author element and the next item in your sidebar.

Lastly, I changed the Container Max Width to be 300px. I did this because I personally keep my sidebar at a fixed 300px wide because it’s much better for ads, affiliate banners, and more. This will make sure your author bio box doesn’t get wider than 300px at any point as seen below.

After changing each of those values, this is what our About the Author sidebar element looks like:

Media Settings

Next, it’s time to go over the Media Settings for our About the Author sidebar element.

Here’s a screenshot of the final Media Settings that I have set. I’ll go over the settings I changed.

How to Add About the Author Element Kadence Blocks Media Settings 1
How to Add About the Author Element Kadence Blocks Media Settings 2

For Media Type, I changed it from Icon to Image. As soon as you change it to Image, you will see the option to upload an image or choose an image from your media library on the info box. Upload or choose the image of the author you are creating the element for.

Next, I set the Image File Size to be thumbnail (150×150). I don’t need to load a larger image than that since the Max Image Width is set to 100px.

By default, there is some Media Padding set behind the image. You can keep this and choose whatever color you want to show behind your image. Otherwise, in my case, I set the Media Padding to 0 to get rid of it.

I left all the rest of the default Media Settings the same. Here’s what the About the Author element looks like now with the author image:

Learn More Settings

For the Learn More Settings, enable the Show Learn More button if you want a button to show on your author box. If you don’t want a button, you can leave this switch off.

About the Author Kadence Blocks Learn More Settings

With the Show Learn More switch enabled, a button shows up below the text. Keep in mind that you can click on the button and you can type whatever you want the button to say. In this case, I made the button say Read More so that, when a user clicks on the button, it goes to my About page where they can read more about me on my website.

Set the Text Color and Background of the button to whatever matches your website. For this tutorial, I made the background of my button be the same as the main brand color in my Kadence global color palette.

Also, keep in mind that there is a Hover tab for your button as well. Make sure to choose the Hover tab and set the colors you want to show when the user hovers over your About the Author box. For me, I chose my second accent color in my global color palette.

If you don’t have a color palette for your website defined or want a full tutorial teaching you how to use the Kadence global color palette, make sure to check out my article.

After setting my button colors, I set the Learn More Border Radius to 3px to make the button have slightly rounded corners.

Other than that, I left all the other Learn More Settings as the default.

Here’s the final result after I applied all the Learn More Settings:

Hey, you made it! Your “About the Author” element is complete. In Step 3, we will be hooking this element into your website to place it above your sidebar.

3. Choose Element Hooks Placement Before Sidebar

Now that your Kadence “About the Author” element is created, it’s time to choose a hook to place the element on your website.

In the upper-right of your Elements page, click on the Element Settings icon.

With your Element Settings showing, the first area you will see is a Placement dropdown. Opening this will show all of the theme hooks where you can place your element.

For this tutorial, I will be choosing Before Sidebar which will place your author element directly above your sidebar.

Kadence Element Hooks About the Author Before Sidebar

However, you can choose whichever hook best suites you. You could show this About the Author element before your sidebar, after your sidebar, or choose from a plethora of Kadence theme hook options.

Time for Step 4 where we will specify which pages and author our element will show up on.

4. Choose Display Settings to Specify Posts and Author

Now that we have our author bio box created and also have specified that we want it to show up above our WordPress sidebar, it’s time to choose which pages you want it to show up on along with the author.

Under the same Element Settings, there is a Display Settings section. Expand that section and you will see some dropdowns.

I only want my About the Author element to show up on blog posts. I do not want it to show up on WordPress pages since I don’t have a sidebar on those pages.

Therefore, for the Show On dropdown, I will choose Single Posts which means it will show up on all the blog posts on your website.

Kadence Element Hooks Choose Author About Me Bio Display Settings

Here’s the part where Kadence element hooks are really powerful. You can specify a certain author that you want the element to show up on.

So, you could make a separate author element for every author that writes blog posts on your site and have their specific author bio show up only on posts that they wrote.

In order to do that, choose the Author option for the Select Posts By dropdown. After you choose Author, you will see a list of all the authors you have on your site. Choose the author that you created the author element for.

In my case, I only have one author on my website right now, so I only see myself.

After you have specified that you want your author element to show up on blog posts and have chosen the appropriate author, it’s time for the final publishing step – Step 5!

5. Publish About the Author Element

Woohoo! Your About the Author element is fully complete and now there’s one final step in order to get your element to show up on your website.

Once you have verified everything is correct, all you have to do is hit the blue Publish button on your element.

It will show you some pre-publish checks and you can confirm that you want to publish your element.

After you have done that, go check out your work! Go to any blog post on your website that was written by the author you created it for and you will see the author bio element show up above your sidebar.

How to Add About the Author Sidebar Element in Kadence Published

So there you have it! I hope you enjoyed this tutorial teaching you how to create an About the Author sidebar element using the Kadence theme.

This author element is just one of an endless amount of customizations you can make with your website when you are using Kadence Theme Pro.

Is there a Kadence element hooks tutorial that you are hoping to see? Let me know in the comments!

Also, I’d love it if you joined my completely free Start Blogging 101 Community Facebook Group where we discuss all things blogging. It’s brand new and something I’ve wanted to build for a long time. Come join and say hi!

Similar Posts

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *