How to Open a Lightbox Popup From a WordPress Menu Custom Link

Are you looking to generate more targeted leads from your WordPress site? One easy way to do that is to open a popup from a WordPress nav menu like this one:

The research shows that the top left of a web page attracts the most views. That makes your main menu a great place to attract attention with a tempting offer.

That’s why WordPress menu custom link popups are amazingly effective, getting proven results like…

Wondering how to open a lightbox from a WordPress menu and get these benefits? That’s what we’re going to show you in this tutorial.

You’ll learn how to integrate OptinMonster’s MonsterLinks™ on-click optins with WordPress nav menus so you can get more targeted leads and interested subscribers.

Here’s the campaign we’re going to create. Before we begin, you’ll need to get OptinMonster so you can create this effective campaign.

create a wordpress custom link menu popup

1. Create a Campaign

To get started with creating a WordPress menu custom link popup, login to the OptinMonster dashboard, and press the Create Campaign button to create a new campaign.

om create campaign new

Choose a campaign type. We’ll use the Popup campaign to create our lightbox popup.

select your campaign type

Choose a theme. We’ll use the Modern theme.

select the modern campaign template

Give your campaign a name, and choose the website where you want to run this campaign. If you’re not ready to choose a website now, you’ll get another chance before you publish the campaign.

name your campaign and start building

Press Start Building. This’ll take you to the OptinMonster campaign builder. You’ll see the default Modern lightbox campaign there.

default modern optinmonster campaign

2. Edit the Campaign

Next, it’s time to customize the campaign to meet your needs. The first step is to click on the image area in the default campaign. Click Select to Replace Image in the lefthand editing tools to choose an image from your image library or upload a new image from your computer.

select to replace image

If you need help with finding a suitable image, we’ve got a list of sites with Creative Commons images you can use for free.

Click on the headline text to select and edit it. There’s a lefthand editing toolbar where you can change the text, text color, formatting, indentation, and more.

optinmonster's campaign builder makes it easy to edit your campaign

Follow the same process to edit the body text.

editing campaign text

While you’re working on the campaign, it’s a good idea to save it from time to time. You can do this by clicking the green Save button at the top right of the campaign builder.

save your campaign regularly

Click on the email box or button in the campaign to go to the Editing Fields Element menu in the left sidebar. There you can edit your optin fields and button.

edit optin fields and button

Edit the button text by clicking on the Button tab in the editing tools.

edit the submit button

3. Add an Email Provider

If you’re using your lightbox popup for lead generation, or to get new subscribers, you’ll need to collect email addresses. That means you’ll have to enable an email integration. OptinMonster integrates with the top email providers. Here’s how you enable a Constant Contact integration.

In the campaign builder, go to Integrations » + Add New Integration. Choose Constant Contact from the dropdown list.

add an email integration to your campaign

Next, click Register with Constant Contact to start the process of authenticating OptinMonster.

register with constant contact

You’ll be prompted to log in to your Constant Contact account.

constant contact login

Then Constant Contact will ask you to allow OptinMonster access to the account. When you agree, the window will close.

constant contact allow access

The next step is to label your Constant Contact connection.

label and connect

Finally, choose the list that you want new leads or subscribers to join. That’ll complete the Constant Contact connection.

select a provider list to add new subscribers to

4. Set the Display Rules

Next, it’s time to decide when your lightbox popup should show. Since you’re planning to load it from a WordPress menu link, you’ll need to enable MonsterLinks™.

To do this, go to Display Rules » When should the campaign appear? Scroll down to MonsterLink™ (On Click) and click the toggle to enable the rule.

8 go to display rules monsterlink

5. Add the MonsterLink™ to the WordPress Menu

The next step is to create your WordPress menu item and add the MonsterLink™.

First, login to your WordPress dashboard, and go to Appearance » Menus. Choose the menu you want to add your link to.

To add a new link, select Custom Links. Give the menu item a name via the Link Text field, and add a hashtag (#) in the URL field.

Click Add to Menu, then Save the menu.

Keep this window in your browser open, since you’ll need it for the next step.

monsterlink menu

Next, you’ll need to add code to the functions.php file of your WordPress theme.

Here’s an example of the code you’ll need:

add_filter( 'nav_menu_link_attributes', 'ekf_menu_attribute_add', 10, 3 );
function ekf_menu_attribute_add( $atts, $item, $args )
{
  // Specify the menu item ID we want to add our attribute to
  $menu_link = 64;

  // Conditionally match the ID and add the attribute and value
  if ($item->ID == $menu_link) {
    $atts['data-optin-slug'] = 'jiqobgwsx9qinkci';
    $atts['class'] .= 'manual-optin-trigger';
  }
  //Return the new attributes
  return $atts;
}

You can copy and paste this code to use yourself, but you’ll have to tweak a few things to get it to work for your website.

The items you’ll need to change are:

  1. The number after $menu_link = in line 5
  2. The string of characters in single quotes after $atts['data-optin-slug'] = in line 9

For the first item, you’ll need the ID of the link in your menu. You can find this in the menu editing screen you’re already in. Simply hover your mouse over the Remove button. This’ll bring up a link in the bottom of the browser that shows the menu ID, right after the part that says &menu-item=.

In this example, the menu ID is 2021:

Then you’ll need the slug for your campaign. You can find this in the OptinMonster dashboard. Just click on the three-dot menu and look at the Unique ID. This’ll give you the campaign slug.

om grab unique id

Add those two items to the code, then save your changes to the functions.php file.

6. Publish the Campaign

The final step is to publish the campaign. This is a two part process. First, go to the Publish tab and set the Status to Live. Then, Save the campaign.

publish your campaign

There are multiple publishing options, but we’ll be using WordPress, of course.

ways to publish your campaigns

Second, return to WordPress and make sure you’ve enabled our WordPress connector plugin. Click on the OptinMonster icon to see your current campaigns. Click Refresh Campaigns to see the campaign you’ve just created.

refresh optinmonster campaigns on wordpress

Find that campaign in the list and click the Go Live link. Your lightbox menu link should now be live.

On site, your link will look similar to this example from the Guido’s website. When visitors click, they’ll see your popup.

guidos_monsterlink

Other Ways to Customize Your Campaign

Once you know how to open a popup from a WordPress menu, there are a couple more things you can do to enhance the effectiveness of your campaign.

One option is to edit the campaign so you can collect visitors’ names. That’ll let you personalize your email marketing. To do this, click on the optin field in the live preview. From there, you can simply click on the Name field in the Available Fields list.

And if you’re using OptinMonster for lead generation, you can easily deliver a lead magnet with your success message. For example, if you go to the Success view, you can add a download link to the incentive you’re offering to subscribers. Here’s an example of that in action on another campaign:

add your download url to the button action

That’s it! Now you know how to use a WordPress menu custom link to trigger a lightbox popup so you can get more targeted leads. Next, learn how to create a WordPress popup for mobile users, and how to poll your visitors with a WordPress survey popup.

And follow us on TwitterFacebook, and YouTube for more tutorials, tips, and guides to help you grow your business.

Sharon Hurley Hall has been a professional writer for more than 25 years, and is certified in content marketing and email marketing. Her career has included stints as a journalist, blogger, university lecturer, and ghost writer.

Comments

  1. Thomas Griffin May 17, 2018 at 8:00 am

    Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our powerful Exit Intent® technology that converts abandoning website visitors into email subscribers and customers. Typically 70% of the people who visit your website will leave and never return, meaning all those marketing efforts to reach them have gone to waste.

    OptinMonster’s Exit Intent® technology detects user behavior and prompts them with a targeted campaign at the precise moment they are about to leave.

    You can unlock this powerful technology 100% free when you purchase our OptinMonster Pro plan.

    Get started with OptinMonster today and see why 700,000+ choose OptinMonster to get more subscribers and customers.

    Thomas Griffin
    President of OptinMonster

  2. Hey Sharon,
    This is something I’m going to setup on my blog in the next few days. As a matter of fact, I just created the lightbox but my question is what happens if your theme is updated? Won’t you loose the piece of code update on your theme’s function file?

    1. Sharon Hurley Hall May 30, 2018 at 5:38 am

      Yes, Enstine, but you can use the Code Snippets plugin to add it without having to touch functions.php. That way ou won’t lose the snippet when you update your theme. This tutorial on adding custom code to WordPress will help with that. 🙂

      1. Hey Sharon,
        I found a solution which is better than having another plugin. It’s creating a child theme for my blog. I’m moving ahead with the implementation 😉

      2. Hey Sharon,
        I’m coming back to say it’s working perfectly well on my site EnstineMuki.com. The button is “HOT 3-P”. I setup a child theme and that allows me to add stuffs to functions. php file without fear of loosing them during theme updates.

        But the issue I have noticed (with integrated MailerLite) is that subscribers get confirmed directly and no confirmation mails sent.

        I tried sorting out issues on MailerLite but everything seems to be working perfectly fine. My readers signup to the same group (campaign) using a form on my blog and they get the confirmation mails sent to your inboxes.

        Where do you think the problem is?

  3. Thanks for your help! It works great. I used the “code snippets” plugin so that I didn’t have to touch functions.php and it works. Thanks again.

    1. Sharon Hurley Hall May 30, 2018 at 5:41 am

      Glad you found it useful, Adam, and that’s an excellent way to avoid having to touch that file. 🙂 Check out our other recent tutorial on triggering a popup form with a click to see how to do something similar in other parts of your site.

  4. Is there a way to do this without editing the .php files directly?

    1. Sharon Hurley Hall May 30, 2018 at 5:42 am

      Absolutely, Zach! Try adding the code via the custom code WordPress plugin.

  5. This tutorial is amazing. Thanks a lot! It’s a really powerful idea. We’ll see how it works.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.