Mom Blog From Home may earn money or products from the companies or products mentioned in this post. This is at no extra cost to you. For more information please see the Disclosure Page found in the bottom menu.

How to Add Your Profile Picture to Your Sidebar

One of the reasons I wanted my blog to be about helping new bloggers was because I understand how hard the simplest thing was for me at the beginning. As I learned something new it was like a light bulb came on and I was like “Oooh, that’s how you do that!”

Yet, those simple things were the hardest answer to find when I was learning how to start a blog. Everyone would share the basic fundamentals of how to actually set up a blog with hosting and domain names but no one was showing you how to do the little tricks like how to add your profile picture to the sidebar!

So, I decided early on that is what I wanted to blog about. The problem, of course, was that I still had to learn everything to be able to have a blog to then share with others. For me, it has been a slow process. I love learning all these things but I felt I had to know everything before I started sharing anything.

Lesson Learned

I later discovered that was the wrong way about doing it. A piece of advice for you is to not wait like I did. That is part of blogging, you are always going to be learning so don’t wait until you know everything to start!

If I would have been sharing as I went then I would have a lot more done!

For now, let’s tackle this sidebar picture so hopefully, you can have an “Oooh, that’s how you do that” moment too!

I am going to show you how to edit a picture, how to add it to your sidebar on your blog, and how to link it to your About Me page. This way when a reader clicks on your picture it will take them to your About Me page for them to learn more about you!

How to Edit Your Profile Picture

I don’t want to just assume that you have a beautiful picture ready to go. Let’s assume that you need to create one first before adding it to your blog.

If you do have a picture ready to go then feel free to skip all of this and go down to the part where I walk you through how to add your profile picture to your sidebar!

If you are like me then you don’t have an expensive camera or have the time or money to pay someone to take this perfect picture for you and that’s okay! All you need is good lighting and we can make it work!

Here is my profile picture:

It was taken at my front door with my husband’s iPhone. I knew that I needed good lighting and that was the best spot. He had just gotten the new iPhone 8 and it takes amazing pictures so that part helped our process but I will show you how you can still make any picture have a blurred background.

In this picture, I am standing just inside our house and he is standing outside.

This gave the lighting from the sun without it being directly in my eyes like this picture below. This is a picture taken in front of our front door.

The sun was too bright and it made me squint too much and I didn’t like the background at all.

I opened the front door and left it open and then took a couple steps inside still facing the same way and he took a picture from there and it looked like this.

As you can see the phone did blur the background and the lighting from the sun was perfect without blinding me. My eyes are open and brighter and it just looks much better and professional.

A Good Profile Picture

All you need is a good clear headshot to have a good profile picture. But make sure that it doesn’t look like this…

Not a horrible picture but this was taken in our backyard and again the sun was too bright and it made me squint and so my eyes are dark and it’s just not as good as the picture above it. Test it out and try different angles and even different times of the day that would work better.

I have noticed that it is much easier to just use natural sunlight than trying to recreate it with lights. If you can do that then power to ya! I don’t know much about photography so I just stick with sunlight!

Now, once you have a picture taken that is bright, clear, and shows your face well I will show you how to edit it and how to make it a circle if you are wanting your profile picture in your sidebar to look like that.

Edit Your Picture

Now that you have your picture taken you are ready to edit it. If you look at my original picture and then at my actual profile picture you can tell I did some editing.

Not only did I crop it down and make it a circle but I smoothed out my skin and brightened things up a bit because why not right?!

There are several different programs out there that you can use to edit your picture but my absolute favorite is PicMoney!

Many bloggers use PicMonkey so I am sure you have heard of it before but just in case you haven’t let me tell you real quick why it rocks and is perfect for bloggers!

PicMonkey

1. It is user-friendly. I think I have made it clear that I am not a tech guru so anything that is user-friendly and super easy to use is my best friend. Everything on PicMonkey is pretty self-explanatory and it isn’t a complexed overwhelming software like photoshop (so I have heard) and that alone makes it worth using!
2. You can save your creations within PicMonkey’s hub. This is a fairly new feature and it has been a life saver for me with making images for my blog. I have created several images that I later wanted to edit a few things on or repurpose them and with the PicMonkey hub you can click edit photo and start right where you left off on that image you created months ago!
3. Very inexpensive! PicMoney does have a free trial of 7 days and then after that (at this moment) it is $7.99 a month. Completely worth the 8 bucks for something that I use almost daily!
4. PicMonkey has an app that you can use while on the go to edit a quick picture for Pinterest or Instagram.
5. They offer Templates of different images you can use for your blog, website, social media, and pins on Pinterest.
6. PicMonkey has Layouts to show you what size images are on different platforms. For example, if you want to make a Facebook cover for your Group they have it premeasured so you know it will fit perfectly before you even start working on it. No more uploading and adjusting it 5 times.

If you are interested in trying PicMonkey out for free then you can use my link right here!

Now let’s move on to editing your picture inside PicMonkey.

Step One – Upload Picture

When you first log into PicMonkey your screen will look something like this. Not exactly like this if you are new to PicMonkey and don’t have any images created on there yet but you get the point.

As you can see there is my Hub that has all of my images saved so I can go in and edit those images or edit a copy of them and keep the original the same. You can also see the templates they have created for you to use or for inspiration.

Then lastly you can see the layouts that have the measurements already created for you. This makes it very easy to just click on the layout you are needing and go on to creating without worry if it is going to fit or not.

Edit New Image

We are going to click on the edit new image box at the top left to start editing your picture.

Blank Canvas

Next, click on blank canvas so we can enter in the measurements we are wanting. You can choose one of the layouts if you want to it really doesn’t matter too much.

I just created mine using 600×600 pixels and instead of scrolling through all of the blanket layouts I just did it this way to get to the size I wanted.

Custom Size

At the top of this screen, there is an option to create a custom size blank canvas. There isn’t a specific size that you have to have for your profile picture and I will show you later on why that is. I just picked an easy size of 600×600 to make it nice and square.

Add An Image

Then click on “add an image” and add your picture you just took for your profile picture.

The reason I do it this way instead of just uploading the picture from the beginning is so that I have the option to edit the image further with a different box that pops up. If you start with editing an image instead of editing a blank canvas that you add an image too then you don’t get the option to edit it further with the Graphics box that pops up.

Below on the right, you can see the Graphics box pops up but if you just upload the picture instead of adding it to a blank layout then it doesn’t. You can make edits and changes with this Graphics box to your image in addition to the ones I am going to show you below.

Step Two – Adjust Picture

I am going to first make my picture bigger and make it fit the layout I picked. This makes my image bigger and cuts out some of that additional background I had in the original picture.

I do this by clicking on the corners and dragging them to fill the white background. Now my image is fit to the layout we chose and it removed the extra background I don’t need in the picture and it focuses on me.

Especially since in the background of this picture it is my hallway. Don’t worry too much about cutting all of the background out as we will be trimming more of that out when we put the circle frame around it later on.

Step Three – Edit Background

Now that the image is fitted to the layout I am going to go into the effects area on the left side of the screen. From there you can scroll down until you reach the Area tab and you can see there are two different options for blurring out the background and making you the focal point of the picture.

Again in my example, my husband’s phone has already done most of that but this is where you will blur out the background of your profile picture.

Side note: If you have an iPhone 8 or higher you can use the portrait feature in your camera and it will blur the background for you. We now both have the iPhone XR and the camera is amazing!

Here you can see how to blur the background of your profile picture and make you stand out in the picture.

You don’t have to do much of it but just toy around with these options until you feel your picture is perfect and make sure to select apply before moving on.

Step Four – Facelift

This is where I decided to give myself a little facelift because again…why not?! If you go to the Touch-Up area you will see a whole list of options! You can airbrush your skin, whiten your teeth, remove wrinkles, give yourself a tan, and more!

I do not suggest getting too crazy here. You want to make sure the person in the picture and the person that your readers will see in your videos match. As fun as it gets sometimes to add a bunch of filter’s to our pictures, it will become pretty noticeable quickly. What I am saying is that if I can smooth out a few scars and eye wrinkles real quick then I’m going to! Haha!

Once you have finished editing your image then all you have to do is hit Export at the top middle of your screen and save it to your computer! Done!

Step Five – Circle Frame

The last step is for those that want their image to be a circle. PicMonkey can help do that as well!

I wasn’t able to get this part to work without uploading the image again and editing just the image. Like I said before we started with a blank layout and then added the image to be able to get the Graphics box to pop up. Which gives you more editing options.

For the example I showed above, we didn’t use the Graphics box but I just wanted to show you how to get it to pop up. I’m not sure why it works this way but it does.

So to make your picture into a circle, click on the create new at the top left.

Now from here, you will click to upload an image from your computer and you will upload the picture we just edited for your profile picture.

Frames

Over on the left side, you will click on Frames and then click the shape you want. In this case, we will click the first one that is a circle.

As you can see the background color is transparent. You want it to be transparent so you can place this image anywhere and it will be a circle image instead of your circle image on top of a red rectangle if that makes sense.

It makes the grey and white squares in the background disappear and it just shows the background color as whatever color that’s already on the page you are adding it to.

For example, if your website has a yellow background the grey and white squares pictured above will be yellow. So it will only show your circle image.

Adding Your Picture to Your Sidebar

Now here is the fun part of getting this beautiful profile picture you worked so hard on into your sidebar menu!

Upload Your Picture

Start by uploading your picture to your WordPress site. If you’re not sure how to do that follow these steps.

On the left side click on media and add new.

Then click add new or upload and find your picture on your computer to upload.

Now that it is uploaded onto your WordPress site click on it to expand all of its details. You are going to need your picture‘s URL as you see it below in my example. Copy that URL and paste it in a Word Doc or in your notes app. Somewhere where you can get to it again to paste it with a special code I am going to give you for your sidebar menu.

About Me Information

Next, go to your About Me page and copy your permalink or URL for that page on your blog. Paste it where you put your image URL.

Go back to the left side and now click on Appearance and Widgets. In this section is where your sidebar information will be. If you don’t have a sidebar yet then this is where you can add all the contents to your sidebar. If you do have one then you are familiar with this and it will be super easy!

Sidebar

You can drag any of the widgets on the left side of this screen and add them to your sidebar or your Header or Footer areas. As you see I have several widgets I have added to my sidebar but for this, you will need to add a text widget to your sidebar.

You can title it “About Me” or “Person Behind It All” or whatever you want to put.

Then I want you to click on the Text Tab. You can see there is a Visual Tab and a Text Tab. Click on Text.

Here is where you are going to add the special code with your two URL’s you have copied.

Special Code

The code you need is  <a href=”https://www.momblogfromhome.com/about-me/” target=”_blank” rel=”&quot;noopener””><img style=”border: none; max-width: 100%;” src=”https://www.momblogfromhome.com/wp-content/uploads/2018/01/Head-shot-for-blog-mom-blog-from-home.png ” /></a>

You will need to replace the first URL highlighted in pink with your About Me URL that you copied eariler.

Then replace the second URL highlighted in orange with your profile picture URL that you copied earlier as well.

Now take the whole code with the new URLs in it and copy and paste that into the Text Tab side of the Text box in your widget for your sidebar. Then click the Visual Tab and it should show your profile picture that you created!

From here you can adjust it and make it smaller if you would like. This is why I said the size wasn’t too important at the beginning because you have the option to adjust it right here.

You can now add a short introduction under your image telling your readers a little bit about you. Then if they want to learn more they can click on your profile picture that will take them to your About Me page for them to learn more!

Done!

That wasn’t so bad, was it?! I hope I didn’t lose you anywhere!

Now to test it out go to your live view of your blog and check it out! And like I said before you can add more to your sidebar with different widgets like social media buttons and more!

 

I hope you enjoyed this simple tip on how to add your profile picture to your sidebar and how to link it to your About Me page!

Let me know if you have any questions or need any other help with setting up your blog!

Vanessa

Need More Help?

If you need more help making beautiful images for your blog and Pinterest then check out my Free Pinterest Image Course!

Sign Me Up!