WordPress: Profile Photo Widget

The “Profile Photo” widget allows your to display an image and bio in your sidebar. A great way to add a personal touch to your blog!

How to use this widget

1. Go to Appearance > Widgets in your dashboard. Click here for more information on the widgets area.

2. Click and drag the widget called “pipdig – Profile Photo” to the sidebar section (or any other section you prefer).

3. You can now upload your profile photo using the widget options:

The “Change image to a circle” option will add rounded corners to the image. If the image is a square, then it will be converted to a perfect circle. This can be removed at any time by unslecting this option from the widget.

Article tags: how to add a profile picture, picture, image, profile picture, avatar, circular photo, circle, round

Was this article helpful?

12 Comments

  1. Sindy

    Hi!

    I love your themes and am wanting to purchase the Culture Shock theme. I see that it’s possible to change your profile photo into a circle. However, the profile photo on this theme is already a circle in the live preview. Can it be changed to a square or rectangle?

    1. Phil (pipdig)

      Hi Sindy, sorry for the delay in replying! You can display the profile photo in any shape you like on all of our themes 🙂

  2. Jacqueline

    Yay! Great! Thank you for that. It’s working. 🙂

    One more thing, I am using a Next GenGallery & inserting in my posts where needed. I’m using the ngg basic imagebrowser & there are two navigating pagination buttons; ‘next’ and ‘back’ I’m trying to get a simple hover over background colour effect on the buttons.. not sure where to edit this. I’ve tried the css code in the ‘other options’ settings of the NextGen Gallery but it’s still not working. I only wish to Ave the hover effect on those buttons, no other links.

    If you scroll down halfway you’ll see the Basic Imagebrowser Gallery.

    1. Phil (pipdig)

      Unfortunately I wouldn’t be able to help with customising third party plugins, however I was able to find the CSS selectors you need to target:

      .ngg-imagebrowser-nav .back
      .ngg-imagebrowser-nav .next

      Hopefully that helps. You can also contact the author of the plugin who will be able to assist you with their products.

      1. Jacqueline

        Wonderful! Thank you, I have gotten it to work with those selectors. Thank you very much! 🙂

        One more thing.. if I wish to round the corners of the ‘Latest Posts’ images in the slider on the sidebar, whats the CSS selector tag class should I use?

        1. Phil (pipdig)

          The selector for this would be the following 🙂

          .pipdig_widget_post_slider .slide-image

          1. Jacqueline

            Great! Thank you. I have it all working now.

            With the ‘Where to next?’ footer slider post carousel, how can I remove the post title/background off the image? I tried looking in the settings but can only find the way to change how many words are shown from the title.

            1. Phil (pipdig)

              If you update the theme to version 1.20.1 it will fix that for you. You can update via this guide 🙂

  3. Agata

    hi there, is there a way to change the size of the profile photo circle (WordPress)? any line of code I can use in functions.php or in CSS? Or upload different photo size? I uploaded the photo, but it seems kind of large in comparison to the other sidebar widgets and other content. Thanks!

  4. Jacqueline

    Hi there, I have wanted to edit the display of my profile photo even more by adding a border radius for rounded corners but not as much as the setting feature that’s currently in place in the options on the widget currently. I have a square image & setting my profile feature to the rounded corners turns it into a circle but I only wish to have my corners only slightly rounded, where can I edit the css or widget file of that widget? I checked the source of the page & I saw ‘widget_pipdig_widget.php’ class.

    1. Phil (pipdig)

      Hi Jacueline, you can do this by copying the contents of this page into the ‘additional css’ tab in the Customizer. This would set the border-radius to 10px, you can increase/decrease as required.

Leave a comment


Please include a link to your site with every comment. It will help us to give specific and more personalized answers to any questions you have. The link to your website will be visible to support staff only. It will not be shown publicly.