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.

final wordpress menu custom link 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 Lightbox campaign to create our lightbox popup.

choose mobile popup after inactivity

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

choose modern theme for the onclick popup

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.

1 start building a wordpress popup form on click

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

om-default-modern-theme

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.

om-default-modern-theme-image-area

This will take you to your image gallery where you can upload or select an image to use in your campaign.

choose replacement image new

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 it and edit it. You can type to replace the text. There’s also a pop up formatting toolbar so you can change text color, formatting, indentation, and more.

wordpress menu custom link popup - edit headline

Follow the same process to edit the body text.

wordpress menu custom link popup - edit body 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.

4 save your wordpress popup form on click with optinmonster

Click on the email box in the campaign to go to the Email Placeholder menu in the left sidebar. There you can change the placeholder text and color.

3 email placeholder

Follow the same process to edit the submit button via the Submit Placeholder menu.

4 submit placeholder

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 » New Integration » Email Provider. Choose Constant Contact from the dropdown list.

03-select-email-provider-2-1

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

04-Register-Constant-Contact(1)

Next, you’ll be prompted to login 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.

constant contact add label

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

constant contact choose list

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 – or your web developer – will 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, click the Publish button at the top of the OptinMonster campaign builder.

This will take you to the publishing options screen, where you can add your website, if you haven’t done that yet.

choose your website for your popup after inactivity

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

om publishing options all

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.

om-refresh-optins to show onclick popup

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 lightbox 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, go to Optin » Name Field and click the toggle. You can use the method described above to change the prompt text for the name field.

om add name field

And if you’re using OptinMonster for lead generation, you can easily deliver a lead magnet with one of our success themes. For example, if you go to Success and enable the Download theme, you can add a link to the incentive you’re offering to subscribers. Here’s an example of that in action on another campaign:

18 add download url to your wordpress popup form on click

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 Twitter and Facebook 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. 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?

  2. 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.

  3. 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.

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