How to add a custom pin it button to wordpress

How to Add a Custom Pin It Button to WordPress

Today I am going to show you how to easily add a custom pin it button to your WordPress website. Having a custom pin it button on your website enables the users of your site to easily pin your images to Pinterest. Having your content pinned is a great way to drive traffic to your website. By having a custom pin it button on your WordPress website you can have a pin it button that matches your branding. This enhances the overall look of your website and provides a consistent brand experience.

Create Your Custom Pin It Button Image

Using your favourite graphic design program, such as Canva create the image you want to use for your pin it button. I always create my pin it buttons at double the size I want to take into account retina displays. So for instance if I want my pin it button to display at 50px by 50 px my actual image size that I would create would be 100px by 100px. You can create your pin it button to be any size you want. Just remember you don’t want your pin it button to cover too much of your image so don’t go too big. Your image doesn’t have to be a square or a circle, it can be any shape you want.

Pin It Button Examples

Install the jQuery Pin It Button For Images Lite

From your WordPress dashboard go to Plugins > Add New then in the search box type in JQuery Pin It Button for Images. Locate the plugin and click Install Now. Once the plugin has installed click Activate.

Update the Selection Settings

Once you have installed and activated the JQuery Pin It Button For Images you need to update the settings. To do this from your dashboard go to Settings > JQuery Pin It Button For Images Lite. In the Selections tab you can leave most of the settings as they are. However there are two sections that you may want to change.

Minimum image resolution

You do not want your pin it button showing on small images such as social media icons and other images that are really too small for Pinterest. Also be mindful of having your pin it button on images that either link to other pages in your website or to external pages such as affiliate links. As this can provide a less than desirable user experience if your user clicks on an image link and is directed to Pinterest instead of the place they were wanting to go.

So think about what size these images are on your website and exclude the size in the settings under Minimum Image Resolution. Remember you will be excluding all images under that size. So sometimes it may be better for you to set a lower exclude size and use the Disabled Classes option to not show your pin it button on those particular images. Unless you know what you are doing I do recommend you seek assistance if using the Disabled Classes option. I usually set the size to be at least 200px on mobile and 350px on anything else.

On which pages the "Pin it" button should be shown

You most likely don’t want all parts of your website to have the option of being pinned. For instance you probably don’t want your search results to be pinned. I usually have my pin it button disabled for search pages, archive pages category pages and tag pages. This could be different for you, depending on the layout of your website and what you want and don’t want to be pinned. Once you have updated your selection settings click the Save Changes button.

JQuery pin it button for images lite selection tab.

Update the Visual Settings

Once you have updated the selection settings click on the Visual tab at the top of the page. This is where you will upload your custom pin it button image and change the visual settings to your liking.

Show button

In this option you choose when you want your pin it button to be visable. The default is “hover” and I usually leave it like this so it is not to obtrusive. However you may want to choose another option.

Description source

This is the text that displays for your pin description. You can reorder these by dragging and dropping. I usually select Image title attribute, post title and post description. The plugin selects the top source that is available for that image. So for example if image title attribute did not contain any information it would move to post title and display that if it contained data. If not it would display the post description.

Transparency

The transparency refers to the opacity effect given to the image on hover. If you set this to 0 no opacity effect will apply. I like a subtle effect so I have mine set at 0.2. This makes my pin it button stand out a little more on hover.

Pin image

This is where you are going to upload your custom pin it button image. Select custom and upload your image by clicking on the Upload an image using media library button and either upload your file or if you have already added your file to the media library then select that. Once your image is uploaded change the height and width as required. I have mine set at 50px but yours could be different depending on your image size. 

Don’t pay too much attention to the preview. Mine only displays part of my image in the preview but it displays the full pin it button when I hover over images on my site.

"Pin it" button position

This is where your pin it button will appear on your image. I have mine set to top left but you may prefer something else. Select what option you want.

"Pin it" button margins

If you don’t want your pin it button to be on the very edges of your image then you may want to add margins. I have mine set at 20px top and left to give the button a little bit of breathing room. Add in any margins that you want.

Press the Save changes button and you are all done.

JQuery pin it button for images lite visual tab

Now the users of your website will be able to easily pin your images with a customised pin it button that is designed to match your brand..

Ruth x

Close Menu
×

Cart