Styjun

I'm building a photography portfolio website on Wordpress using this theme: http://wpshower.com/themes/expositio/ . The theme hasn't been updated in years but still works smoothly. I have an issue with assigning target="_blank" to some external links though. The option is there but it has no effect whatsoever.

I've looked for advice and have tried every available plugin that addresses the problem, with the best result being opening the external link in both a new tab and the current tab.

I've looked into all the theme files, they are not many, and thinking that this is a javascript issue, I have identified the following code. It deals with the mobile menu animations but it's the only mention of links.
It was also discussed in a similar thread in here: Wordpress navbar links using href="#" not working as a dummy link

$('a').on('click', function(e) {
 e.preventDefault();
 var _this = $(this);
 // close mobile menu if it's open, redirect otherwise
 if (_body.hasClass('toggled-on') && _this.parents('#page').length == 1
 && _this.parents('#primary-navigation').length == 0
 ) 
 load_effect.menuOff();
 else 
 load_effect.loader.show();
 var href = $(this).attr('href');
 $('.site').css('opacity', 0);
 setTimeout(function() 
 window.location = href;
 , load_effect.duration);
 

Finally, here is website using the same theme where the external links do open in a new tab: http://www.tokyogoodidea.com/

I'd be grateful for any advice on solving this little glitch. I'm not good at all with js and don't know what to change.

Here's my project's link: http://one.clrblnd.com/
Thanks in advance.

There seems to be no reliable way to open a new tab in Javascript (a quick search tells it could be tricky), and the code indeeed looks like it is blocking a new page being opened. You can probably try if this works.

Firstly after this line

 var href = $(this).attr('href');

add another line that says (this line gets the value of target attribute/properties from the tag, and assumed to be _self if undefined)

 var target = $(this).prop('target') || '_self';

Then look for this line

 $('.site').css('opacity', 0);

What it does is to make the whole page blank essentially. You may want to do something with this, for example wrap it in a if statement so it doesn't execute when target="_blank". A quick way to fix it is by replacing it to

 target === '_blank' || $('.site').css('opacity', 0);

Next replace (just a few lines after the previous one)

 window.location = href;

with

 window.open(href, target)

The respective block should look like

 load_effect.loader.show();
 var href = $(this).attr('href');
 var target = $(this).prop('target') || '_self';
 target === '_blank' || $('.site').css('opacity', 0);
 setTimeout(function() 
 window.open(href, target)
 , load_effect.duration);

This is asuming window.open works as expected (documentation is here). What happens in the code is that the author stopped the default behavior after clicking a link with

 e.preventDefault();

in order to allow some fancy animation to complete before the browser proceeds to load the intended page. However by simplifying the page load with

 window.location = href;

it ignores the target attribute/property of the respective <a /> tag.