Custom Icon Widget

The ProPhoto Custom Icon Widget is provided by the ProPhoto theme and allows you to upload an icon or image, or use a Button, and display it in any of your site’s widget areas. This tutorial explains how to create and customize this type of widget.

Uploading images for custom icon widgets

The ProPhoto Custom Icons widget uses images you upload beforehand in ProPhoto, or Buttons you create in the “ProPhoto” > “Customize” > “Buttons” area.  If you simply want to use an image, start by uploading all the images or icons you want to use in this screen:

“ProPhoto” > “Customize” > “Site Settings” > “Widget Images”

Screen Shot 2014-01-06 at 8.56.39 PM

What size image should I use?

If your images are too large for the area in which they are to be used, ProPhoto will downsize them to fit, but uploading your image at the proper width and hight is usually the best approach. What size will depend on where the widget is used, how many should appear side-by-side, the gap between each, etc. You may need to use some trial-and-error if you aren’t sure. Otherwise, it is better to be too large than too small, so ProPhoto can create downsized copies to fit.

Once you have uploaded the images or icons you want to use, proceed to the next step to create widgets.

Using a Button for the widget

To use a ProPhoto Button for your Custom Icon widget, you’ll want to create the Button under:

“ProPhoto” > “Customize” > “Buttons”

Screen Shot 2014-01-06 at 8.18.33 PM

Just be aware that ProPhoto Buttons can not be downsized to fit in an area, so you’ll want to create them to an appropriate size.

Creating and customizing the widget

After you have uploaded your widget images to use, or created the Button you want to use, or if you are customizing an existing widget that was setup in the ProPhoto Design you’ve chosen, go to the WordPress widgets screen here:

“Appearance” > “Widgets”

If you are creating a new icon widget, drag a ProPhoto Custom Icon widget from the left in this screen to any area on the right where you want it to be displayed. (watch our video Understanding Widgets for the basics)

Choose an image

Customize the widget by selecting from the dropdown list any image that has been uploaded, or any button that has been created.

ProPhoto Custom Icon Selection Screenshot

The widget images you’ve uploaded will be prefaced by “Widget custom image…” and Buttons will be indicated simply by whatever the Button’s title is.

Add a “Links to:” URL address

Add an optional link URL if you want the icon to be clickable, linking visitors to a web address. To get the URL address, simply visit any place on the Internet and copy the URL address from your browser’s address bar and paste it here. You can link to things on your site or anywhere online, like a Facebook Page, a Post on your own blog, or a vendor website, for example. See the screenshot below.

Set “Links open:”

You can also choose to have the link open in a new tab/window of your visitor’s web browser, or you can choose to have the link open in the same window of the visitor’s web browser. Use the dropdown to choose one or the other. It’s most common to use ‘new tab/window’ when linking to another external website so visitors aren’t taken away from your site. See the screenshot below.

ProPhoto Custom Icon Widget Link URL and Open Selections

Side-by-side images

If you want more than one icon image, add more images so they appear side-by-side where ever your widget is placed – click the “add image” checkbox to select another image. You can have up to 10 images in one widget, and each will appear next to one another horizontally.

ProPhoto Custom Icon Add Another Image

After you have clicked to add another image, you can select which image to display, adjust settings, and see a live preview of your images.

ProPhoto Custom Icon Widget With Second Image

Control image spacing

If you have more than one image enabled, you will also see an option to control the image spacing. Fill in a number to adjust how much space appears between each of your images in the row.

The final result might look something like this, which shows one Custom Icon widget added in the “Bio Area”:

Screen Shot 2014-01-06 at 8.47.59 PM

Stacking Custom Icons

So, using one ProPhoto Custom Icons widget can create a row of images, but what about stacking them top-to-bottom?

Simple.  Add another ProPhoto Custom Icons widget below the first, and you’ll have another ‘row’ below. You can repeat this for a vertical strip of images, or even a grid of images if each is setup with side-by-side images.

Just be aware that sometimes, it may be easiest to use a ProPhoto Grid because it automatically creates thumbnails and makes it easy to link to content on your site or other sites.

And vertical groups of clickable images can also be created with a Vertical Nav Menu widget and menu item icons.

Title and label fields

Finally, you can also add an optional Title which appears as a headline above your widget, or a Label which appears as normally-sized text below your widget, as shown here:

ProPhoto Custom Icon Title and Label Settings ProPhoto Custom Icon Title and Label ExampleSince Title and Label text is a common feature of most Widgets, you’ll find that they will be styled based on the settings in ProPhoto – for example, if you use Title and Label text and placed your widget in the Footer Area of your site, you’ll use the controls in ProPhoto to style the headline title and the text here:

“ProPhoto” > “Customize” > “Sidebars & Footer” > “Footer Area”

So think about where you are placing your widget, and you should find the corresponding area in ProPhoto gives you control over fonts, color, bold, italic, and other styling.


The ProPhoto Custom Icon Widget is provided by the ProPhoto theme and allows you to upload an icon or image and display it in any of your site’s widget areas. This tutorial explains how to create and customize this type of widget.

Uploading images for custom icon widgets

The ProPhoto Custom Icons widget uses images you upload beforehand in ProPhoto.
Start by uploading all the images or icons you want to use – upload them in this screen:

“ProPhoto” > “Customize” > “Site Settings” > “Widget Images”

What size image should I use?

If your images are too large for the area in which they are to be used, ProPhoto will downsize them to fit, but uploading your image at the proper width and hight is usually the best approach. What size will depend on where the widget is used, how many should appear side-by-side, the gap between each, etc. You may need to use some trial-and-error if you aren’t sure. Otherwise, it is better to be too large than too small, so ProPhoto can create downsized copies to fit.

Once you have uploaded the images or icons you want to use, proceed to the next step to create widgets.

Creating and customizing the widget

After you have uploaded your widget images to use, or if you are customizing an existing widget that was setup in the ProPhoto Design you’ve chosen, go to the WordPress widgets screen here:
“Appearance” > “Widgets”
If you are creating a new icon widget, drag a ProPhoto Custom Icon widget from the left in this screen to any area on the right where you want it to be displayed. (watch our video Understanding Widgets for the basics)

Choose an image

Customize the widget by selecting from the dropdown list any image that has been uploaded.

Add a “Links to:” URL address

Add an optional link URL if you want the icon to be clickable, linking visitors to a web address. To get the URL address, simply visit any place on the Internet and copy the URL address from your browser’s address bar and paste it here. You can link to things on your site or anywhere online, like a Facebook Page, a Post on your own blog, or a vendor website, for example. See the screenshot below.

Set “Links open:”

You can also choose to have the link open in a new tab/window of your visitor’s web browser, or you can choose to have the link open in the same window of the visitor’s web browser. Use the dropdown to choose one or the other. It’s most common to use ‘new tab/window’ when linking to another external website so visitors aren’t taken away from your site. See the screenshot below.

Side-by-side images

If you want more than one icon image, add more images so they appear side-by-side where ever your widget is placed – click the “add image” checkbox to select another image. You can have up to 10 images in one widget, and each will appear next to one another horizontally.

After you have clicked to add another image, you can select which image to display, adjust settings, and see a live preview of your images.

Control image spacing

If you have more than one image enabled, you will also see an option to control the image spacing. Fill in a number to adjust how much space appears between each of your images in the row.

The final result might look something like this, which shows one Custom Icon widget added in the “Bio Area”:

Stacking Custom Icons

So, using one ProPhoto Custom Icons widget can create a row of images, but what about stacking them top-to-bottom?

Simple.  Add another ProPhoto Custom Icons widget below the first, and you’ll have another ‘row’ below. You can repeat this for a vertical strip of images, or even a grid of images if each is setup with side-by-side images.

Just be aware that sometimes, it may be easiest to use a ProPhoto Grid because it automatically creates thumbnails and makes it easy to link to content on your site or other sites.
And vertical groups of clickable images can also be created with a Vertical Nav Menu widget and menu item icons.

Title and label fields

Finally, you can also add an optional Title which appears as a headline above your widget, or a Label which appears as normally-sized text below your widget, as shown here:

Since Title and Label text is a common feature of most Widgets, you’ll find that they will be styled based on the settings in ProPhoto – for example, if you use Title and Label text and placed your widget in the Footer Area of your site, you’ll use the controls in ProPhoto to style the headline title and the text here:
“ProPhoto” > “Customize” > “Sidebars & Footer” > “Footer Area”
So think about where you are placing your widget, and you should find the corresponding area in ProPhoto gives you control over fonts, color, bold, italic, and other styling.


The Custom Icon Widget is a custom WordPress widget provided by the ProPhoto theme that allows you to embed a custom-uploaded icon into any of your blog’s widget areas.

To create a Custom Icon Widget, you need to first upload one or more images in your WordPress admin area, under “Appearance” => “P3 Customize” => “Widgets”:

Then, go back to the widgets admin page and you will be able to select any of the images you uploaded, and link it to any URL you want:

The final result might look something like this:

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us