Posted on by

Make External Links Open in a New Tab or Window

I sometimes get requests to have Participants Database links to locations off the website open in a new window or tab. Depending on the context, this can be inadvisable from a user experience point of view, but even so, we need to be able to set that up sometimes. So, with that caveat in mind, this is how we do it…

To alter the way database data is shown, we use the ‘pdb-before_display_form_element’ filter. It gives us the field object which contains all the data for the field, and expects the HTML in return. If we want the plugin to do it’s thing normally, we return an empty string.

This filter is applied to all fields before getting displayed, so we want to be sure to only alter the ones we want changed. We need to determine if the field is a link field and that it has a link to an external location. If not, return the empty string.

This plugin is very simple: create a new file with the name pdb_external_links.php and code below. Upload it to your plugins folder and activate.

Pro tip: click on the filename in the code window above, then download the .zip file and install it.

That’s it, all external links will open in a new tab or window when the user clicks on them.

(Note: this post was edited for better code on Nov 30, 2016)

13 thoughts on “Make External Links Open in a New Tab or Window

  1. Hello Roland,

    This external links plugin doesn’t seem to be working in my environment (I’m running the Divi theme). I’ve downloaded and installed the plugin twice and made sure that it’s activated but the links continue to launch in the same tab as before. I’ve tried this on the latest versions of both Firefox and Edge as well as on my iPhone.

    Any ideas? Thanks in advance ….

    1. Hi Stuart,

      Thanks for pointing this out, the code in that gist was a little old and needed to be updated. I just did so, and tested it, so if you go back and download it again, you’ll find it works.

  2. I can’t seem to get this working with the latest 2018 version?

    1. I don’t know of anything that has changed to make this stop working. Were you able to successfully install and activate the plugin?

      1. it installs and activate fine. not sure why but I’m using another WP plugin instead now and that seems to be working. thanks!

      2. I figured it out! your plugin does work and so does other plugins when clicking on the table before hitting the search button.

        however, it seems to break this after hitting the search button. i dont know why this happens though :(

        1. I’m sorry, I don’t have enough information to help you here. Does the problem happen on all devices? What exactly does it do when you try to search? Perhaps you can post a link to the page so I can see what it does?

        2. Hi Ronald,

          Here’s my site:
          if you click on my name and website, it’s under /find-dance-school/ (I can’t seem to reply because it keeps thinking it’s spam with my website link)

          What I’ve noticed is that all the plugin including this plugin from this page will not work on external links when ran in a script, which I am assuming is the search!

        3. It looks like the PDB External List Links plugin is not working at all. I suggest you check to make sure that it is activated in your plugins.

  3. Hey Roland! I’m a locksmith in Austin who would really love to set this up so I can open the address my customer submits in Google Maps from the record on my phone.

    I’m thinking the workflow should go like:
    https://www.google.com/maps/place/ + [customer address here]
    …and then google maps would do it’s thing.

    Is there a way I can add the g-maps address before the address data going into the list view?

    Thanks,
    Rich

    1. Yes, you certainly can. You wouldn’t use a technique like the one in this post, but more like this one:

      Adding an Edit Record Link to the Frontend List

      Instead of putting the record edit url into the link property, you would put your composed URL to Google Maps, something like this:

      if ($this->field->name == 'map_link') {
      $this->field->link = 'https://www.google.com/maps/place/' . $record->get->value('address') . ' ' . $record->get_value('city') . ', ' . $record->get_value('state');
      }

      I’m not sure about the syntax of the URL, but you get the idea.

  4. Is there an easier way to explain this? I am using this database to make a list of resources and really need the links to open in a new tab. I am still learning all this and the coding to this has me lost. Thank you in advance!

    1. Hi Kerry,

      Check out the updated post, it makes it easier to get this working.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

13 thoughts on “Make External Links Open in a New Tab or Window

  1. Hello Roland,

    This external links plugin doesn’t seem to be working in my environment (I’m running the Divi theme). I’ve downloaded and installed the plugin twice and made sure that it’s activated but the links continue to launch in the same tab as before. I’ve tried this on the latest versions of both Firefox and Edge as well as on my iPhone.

    Any ideas? Thanks in advance ….

    1. Hi Stuart,

      Thanks for pointing this out, the code in that gist was a little old and needed to be updated. I just did so, and tested it, so if you go back and download it again, you’ll find it works.

  2. I can’t seem to get this working with the latest 2018 version?

    1. I don’t know of anything that has changed to make this stop working. Were you able to successfully install and activate the plugin?

      1. it installs and activate fine. not sure why but I’m using another WP plugin instead now and that seems to be working. thanks!

      2. I figured it out! your plugin does work and so does other plugins when clicking on the table before hitting the search button.

        however, it seems to break this after hitting the search button. i dont know why this happens though :(

        1. I’m sorry, I don’t have enough information to help you here. Does the problem happen on all devices? What exactly does it do when you try to search? Perhaps you can post a link to the page so I can see what it does?

        2. Hi Ronald,

          Here’s my site:
          if you click on my name and website, it’s under /find-dance-school/ (I can’t seem to reply because it keeps thinking it’s spam with my website link)

          What I’ve noticed is that all the plugin including this plugin from this page will not work on external links when ran in a script, which I am assuming is the search!

        3. It looks like the PDB External List Links plugin is not working at all. I suggest you check to make sure that it is activated in your plugins.

  3. Hey Roland! I’m a locksmith in Austin who would really love to set this up so I can open the address my customer submits in Google Maps from the record on my phone.

    I’m thinking the workflow should go like:
    https://www.google.com/maps/place/ + [customer address here]
    …and then google maps would do it’s thing.

    Is there a way I can add the g-maps address before the address data going into the list view?

    Thanks,
    Rich

    1. Yes, you certainly can. You wouldn’t use a technique like the one in this post, but more like this one:

      Adding an Edit Record Link to the Frontend List

      Instead of putting the record edit url into the link property, you would put your composed URL to Google Maps, something like this:

      if ($this->field->name == 'map_link') {
      $this->field->link = 'https://www.google.com/maps/place/' . $record->get->value('address') . ' ' . $record->get_value('city') . ', ' . $record->get_value('state');
      }

      I’m not sure about the syntax of the URL, but you get the idea.

  4. Is there an easier way to explain this? I am using this database to make a list of resources and really need the links to open in a new tab. I am still learning all this and the coding to this has me lost. Thank you in advance!

    1. Hi Kerry,

      Check out the updated post, it makes it easier to get this working.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.