open external link within a defined pop up window

Hi there.
You can accomplish that using JS. For that, your “New Garages” link’s HTML code, which now looks like this:

<a title="Whether it’s a secure, yet cost effective building, storage area, workshop or garage, then we are sure to be abled to cater for your needs" target="_blank" href="https://www.4concretegarages.com/quotation/step1.asp">New Garages</a>

should be changed to this:

<a title="Whether it’s a secure, yet cost effective building, storage area, workshop or garage, then we are sure to be abled to cater for your needs" target="_blank" href="#" onclick="window.open('https://www.4concretegarages.com/quotation/step1.asp','','width=680,height=480,scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')">New Garages</a>

Cheers!

Thanks for the speedy response.

I am not certain where you want me to paste the script you provided?

I have tried Dashboard/Appearance/Menus/Custom Links/URL but to no avail?

Hi.
Open your theme’s functions.php and place the following code at the end, right before the closing php tag; it looks like this ?>:

function lidget_popup_link() {
?>
<script type="text/javascript">
	//<![CDATA[
	(function($) {
		$(window).load(function() {
			var width = "680", /* Enter popup window width here */
				height = "480", /* Enter popup window height here */
				menuItem = "menu-item-783", /* Enter menu item ID */
				target = "#"+menuItem+" a",
				hrefVal = $(target).attr("href")
			;
			$(target).attr({
				"href" : "#",
				"onclick" : "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')"
			});
		});
	})(jQuery);
	//]]>
</script>
<?php
}
add_action('wp_head', 'lidget_popup_link');

LMK if you want the popup to be centered on screen, and I’ll make a few more adjustments.
I made it so that you could customize the width, height and targeted menu item ID if needed, but it should work just fine the way it is now.
Cheers!

I just realized I forgot to change the menu item ID so that it works on your site.
You should change that value to menu-item-47, meaning, change this:

menuItem = "menu-item-783"

to this:

menuItem = "menu-item-47"

Thanks again,

Code has been pasted into place, now what?

The New Garages menu item should be opening the pop up. Is it not?

Edit: I checked your site and the JS script is not being inserted, which means there must be smth wrong with the implementation. Could you do a pastebin of your functions.php file just in case?
Thanks!

I’ve removed your massive code posts, Nicpaice. Please do not post more than 10 lines of code on these forums. You can instead use PasteBin for holding your code, then just link those PasteBin pages.

Thanks, Andrew.
@nicpaice: I saw the code you posted from the e-mail notification I received, and you don’t seem to have placed my function at the very bottom of your functions.php, since there’s more code afterwards.
To avoid any problems, and since you are using TwentyTen, you should create a child theme and use my code there. Here’s how:
1. Create a folder called twentyten-child inside your wp-content/themes folder;
2. Create a functions.php file in there and paste my php code wrapped inside an opening and closing php tag, like so:

<?php
/* code here */
?>

3. Create a style.css file in your child theme folder and paste this code inside:

/*
Theme Name: TwentyTen Child
Description: Child theme for the twentyten theme
Author: Lidget Spares
Template: twentyten
*/

@import url("../twentytwelve/style.css");

4. Upload your new child theme to your server;

5. Activate it under in your admin panel under Appearance –> Themes.

If you would rather not use a child theme because you have already edited TwentyTen directly, then paste the php code I provided above at the very bottom of your functions.php and it should work.
If neither approaches work, LMK and I’ll give you other ideas.

I’ve created the folder and uploaded the file but before I activate can you confirm that I wont lose the modifications that I have already made to my current theme in way of navigation-bar style and function?

You shouldn’t loose any of it. However, if you do, activating the old theme back should restore it all.
One thing: the point of a child theme is not to modify the parent one so that you can keep updating the parent without overwriting your own mods. If you have already modified TwentyTen, a child theme would defeat the purpose.

OK, I have activated the child theme, the header was lost and my footer style sheet too. Easily rectified.

No change with the external link and pop up however?

Ok.
I just checked your site and your New Garages menu item is no longer pointing to the form it was pointing to before.
Also, the script is not being added to your site. Could you check your header.php file and make sure you see a call to wp_head() anywhere inside your <head> tag? If you do, LMK and we’ll think of smth else. If you don’t, simply add it before the closing tag (</head>) and check again to see if it works.

Yeah wp_head() was already included within header.php of the parent theme.

As a consequence of activating a child theme a few items did change, but I have pointed the menu link “New Garages” to https://www.4concretegarages.com/quotation/step1.asp and I selected “Open link in a new window/tab” right?

now that’s a bit odd, despite my alternations within Appearance/menus I noticed that the link under New Garages points towards https://www.lidgetspares.com/?page_id=9

Ok. Can you deactivate the child theme and paste the entire contents of your main theme’s functions.php file as a pastebin? To do so, follow the link, paste the code under “New Paste”, select PHP under Syntax highlighting, and click “Submit”. Then share your paste’s url here.