Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Tyring to figure out if this is custom code or a plugin…

  • Hi,

    I will provide an example website in the Private field.

    Said website has a permanent “Save” button showing in the upper left corner of each image they have in their blog posts.

    I am trying to figure out if this is custom made or part of a plugin. I think I figured out what their social sharing plugin is (it’s the Hubbub social share plugin).

    However, I went through the documentation of the plugin and:

    1. Only the paid version seems to allow the “Save to Pinterest” button.
    2. Going through the docs I did not see a feature for a permanent button on mobile as it is in the example site in the private field so I think it might be custom code.

    So, I’m really bad at coding but I opened the example site’s source code, and using Ctrl + F “pin-it” I found they have a script for that and also some CSS related to it.

    Here’s the script:

    jQuery(function ($) {
        $(".single-post .single-content .wp-block-image img").each(function (index) {
                $(this).before('<a class="pin-it-button" href="'+window.location.href+'&media='+$(this).attr("src")+'&description=" rel="noopener" target="_blank" data-pin-do="buttonPin"></a>')

    … And the CSS you can see for yourself.

    Can you please:

    1. Tell me whether this comes from a plugin or custom code.
    2. If custom code — can I replicate it on my site (link also in the private field).

    Any help with this will be greatly appreciated.


  • Hi there,

    I’m not quite sure if the functionality is added using a plugin or custom code, but we can use and slightly modify it to make it work on your site.

    But first, how did you add the images to your site? Looking at the source, it seems like it’s being rendered dynamically. I need to know so I can adjust the code accordingly.

  • Hi, Alvind — that’s great

    I simply upload them the classic way in the wordpress text editor. It’s probably one of my plugins that injects them dynamically.

    Let me know how I can check what you need to know specifically?


  • If the image was added dynamically, there is a possibility that the HTML structure of the image element changes, as the code you provided checks for a particular class of the element to add the Save button.

    Not sure if this will work on your site, but you can try:

    Create a new Hook element and add this code:

    document.addEventListener("DOMContentLoaded", function() {
        var images = document.querySelectorAll(".single-post .wp-block-image img, .single-post .gb-block-image img, .single-post p[data-slot-rendered-content='true'] img, .single-post p img");
        images.forEach(function(img) {
            var a = document.createElement('a');
            a.className = 'pin-it-button';
            a.href = '' + window.location.href + '&media=' + img.src + '&description=';
            a.rel = 'noopener';
   = '_blank';
            a.setAttribute('data-pin-do', 'buttonPin');
            img.parentNode.insertBefore(a, img);

    Hook: wp_footer, Location set to Post > All posts.

    Then add this into Customize > Additional CSS:

    .pin-it-button {
      position: absolute;
      z-index: 3;
      margin: 12px;
      font: 18px/35px "Arial";
      text-align: center;
      text-decoration: none;
      color: #fff !important;
      -webkit-font-smoothing: antialiased;
      border-radius: 30px;
      width: auto;
      background-position-x: 9px;
      background-size: 20px 20px;
      text-indent: 34px;
      font-weight: 700;
      padding: 4px 15px 4px 4px;
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
      box-shadow: inset 0 0 1px #888;
      vertical-align: baseline;
      opacity: 1;
      transition: none;
    .pin-it-button:after {
      content: 'Save';
      color: #fff;

    Make sure to remove the current Save button that you applied to the images on the site first.

  • So I did all of that and nothing happened.

    Then I read some on why my images may be served dynamically and came across this:

    Turns out WordPress is doing it so that the images are better optimized for LCP and Core web vitals.

    I used the code provided in the last reply in the thread I linked to remove the “fetchpriority” function completely (did not remove the lazy loading).

    Not sure if this would be helpful.

    Will it be easier to implement the button now?


  • Do you happen to have a test site that I can log into and test this out?

  • Hmmm, what kind of user permissions would you need for this?

  • Admin role, please.

  • Alright, provide me with an email for the credentials.


  • You can use any email like [email protected], WP does not check it.

  • Okay, I’m leaving a temporary link with the credentials in the private field, and also the name of the test site.

    Let me know if there’s anything else I need to do.


  • Also, could you please tell me exactly what you did, so that I can implement this on my other site?


  • So I just implemented the code I provided here on the test site, and it works. You can see it within the blog posts.

    I cannot guarantee this will work on your other site because the img element in the DOM needs to be certain, as we need to target those within the JS code.

  • Hi Alvind,

    I confirm it’s working — this is amazing work!

    I implemented it on my original site as well and it’s working there too!

    Since I want to express my gratitude adequately I literally Googled “how to compliment software engineers” just for this, tweaked it a bit, and ended up with this:

    Your implementation of the code was timely and effective with attention to detail and in-depth understanding of the assignment. I particularly appreciated how you guys were actively brainstorming different approaches and came up with a working solution to implement the Save button exactly how I wanted it. Your creative problem-solving skills really show!

    So thanks a bunch!

  • Glad to hear that, and I appreciate the compliment! 😀

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.