[Support request] Make a specific blog post open in a new browser window

[Chelsea]

Aloha GP!

I’ve been reading through your forums and I haven’t found the specific answer to my question.

Can you please assist me with targeting a specific blog post to open in a new browser window. I do not want all of my post to open in new windows but need a specific post (in the blog post feed which I named “Info / Tips”) to open in a new browser tab. The reason is that it’s a post that contains a music link so people can listen to live Hawaiian radio while browsing the website… I need this post to open as a new tab so the music can continue to play while people browse the site on their original tab.

Thank you!

[Leo]

Hi there,

Hmm not 100% sure if that’s possible but perhaps try the solution here:
https://generatepress.com/forums/topic/force-open-all-wordpress-blog-posts-in-new-tab-target_blank/#post-612849

But instead of $('h2.entry-title a').each(function() {

Try $('.post-xxx h2.entry-title a').each(function() {

and replace xxx with the ID of the post.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chelsea]

Aloha Leo – thank you for instructions. I tried it but it did not make the post open in a new window. Here is what I did:

I added the code to wp_footer in the Appearance / Elements / Add Hook setting. I executed shortcodes and I executed PHP – Priority is set to 10. Display rules is Location: Entire site.

Here is the script I added:

<script type=”text/javascript”>
//<![CDATA[
jQuery(document).ready(function($) {
$(‘.post-599 h2.entry-title a’).each(function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
});
}
});
});
//]]>
</script>

[Tom]

Hi there,

I’m not seeing the code in your source. Can you try clearing your caching plugin?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chelsea]

Aloha Tom,

Since it wasn’t working I removed the hook from Elements : )

I just added the hook back to Elements & also cleared my caching plugin.

You should be able to see it now.

Thank you!

[Tom]

Where can I see a link to post 599?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chelsea]

Hi Tom,

The link to post 599 is on the https://mauioceanrentals.net/info-tips/ page which is houses the blog. Post 599 is the post named “Live Hawaiian Radio”. Is that what you are asking?

[David]

Hi there,

try this:

jQuery( document ).ready( function( $ ) {
    $( '.post-599 a' ).click( function( event ){
        event.preventDefault();
        window.open(( this ).href, 'window name', 'features');
    });
});

The ‘window name’ and ‘features’ are two arguments of the .open() function – you can leave them as is, or look up the arguments to define specific settings. No need to check execute PHP in the hook

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chelsea]

Aloha David!

That worked! Thank you!

Quick question: I looked up the arguments of the .open()funtion but couldn’t find an adjustment for opening the post 599 in a new tab vs. new browser window. Curious what I would add to the code to make it open a new browser “tab” vs. an entire new window?

Thank you so much!
Aloha!

[David]

You should be able to do this instead:

jQuery(document).ready(function($) {
$('.post-599 a').attr('target', '_blank');
});

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chelsea]

Perfect!

Thank you so much! You guys are da best!

Aloha!

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts