How to Add a Clickable Widget Bio Box with Photo and Text Without a Plugin in WordPress

Bio Box Ready

Do you know how to add a clickable widget bio box with photo and text without a plugin in WordPress? Do you also know that there is an easy way to do that? Yes, there is and let me show YOU so you can do it too!

I converted both photo and text in clickable links and then redirected the links from my bio box to my About Me page without a plugin.

I am a non-tech and complete beginner. So any beginner can do it too!

How to Add a Clickable Widget Bio Box with Photo and Text Without a Plugin in WordPress

There are a few ways to do this, but here is the way I did it. And best of all, it worked!

Note: You’ll need to work the photo and text one at a time to get it all done.

Step 1

Go to POSTS and click on ADD NEW.

Posts, Add New

Following that, add a picture of your preference from your media library clicking on ADD MEDIA in the top left corner. Make sure you have the photo in your media library. If you don’t, you’ll have to upload it from your computer. Choose the photo and customize it if you want.

Add Media

Then click INSERT INTO POST on the right bottom corner.

Insert Photo

Next, click enter, and below your photo, add your bio excerpt text that you want to show in your bio box.

Photo and text Visual 3

Step 2 – Photo

Click in TEXT MODE at the top right of the post window page. It will turn the photo into “text code” I would say.

Text Code

Then highlight the whole photo text.

Photo Text Highligted and LINK command

Click on the button called LINK on the top menu bar.

LINK command

Then follow the instructions choosing an existing page of your preference – in my case I chose my ABOUT ME page.

Adding About me Blurred Link 2

And then click ADD LINK

Adding link Blurred 2

Photo is pretty much done!

Step 3 – Bio

For the bio,  the steps will be pretty much the same that you took for the photos.

You have copied the excerpt you want to display on your bio box and pasted it right bellow the photo- now showing as “text code”. Here hit enter to separate both texts. Now, just highlight the whole excerpt.

Link for bio Text Highlighted

Then click in the TEXT button on the right hand top again to change the text into text code. The same as you did for the photo.

Text Code

Keeping the text highlighted, click on the LINK button on the top menu.

Link for Bio Text Code

Follow the instructions linking the text with a page of your choice. I again linked the text to my ABOUT ME page.

Inserting About Bio Text

The trick here is doing the photo and text one at a time. First do the photo and then do the text. If you highlight both and then change them into text code mode, they won’t work. At least it didn’t work for me.

Step 4 – Let the magic happen!

When you are done converting the photo and text into a link, head over to your widget area > APPEARANCE > WIDGETS.

Appareance Widgets 2

Here drag the TEXT box from the left side to your sidebar widget area on the right. Drop the text box wherever you want it to stay on the right side widget area.

Text Box 2

Step 5 –  Adding links

Click on the down arrow of the TEXT BOX at the upper right corner to open it.  Give the TEXT BOX a title and then one at a time, copy and paste to the Content area the converted links of your photo and text. Make sure you hit enter between both texts. Then SAVE it and check your page.

Photo and Text pasted and Saved and Title 2

You are done!

You can keep the photo and text in visual mode and just use the INSERT/EDIT LINK BUTTON on the top menu to link the text and photo to the page you want. Remember to do this one at a time. Then follow the steps to complete the task.

This was the way that I set up a clickable image / text author bio box in my sidebar in WordPress! I spent days trying to figure this out with and without a plugin. And I am a total dummy for tech stuff. So do not feel intimidated by it.

Hope it helps you!

And if it helped you, share in the comments below and share the love!

See you around the blog,

xo

Leave a Comment