Reaching more customers with WP Popup Plugin – Part II.
Quick Summary of Contents
I’m diving into today’s post, picking up from where I left off with Part I.
If you’re unfamiliar with the one action most small business websites fail to execute, I suggest reviewing Part I before continuing.
Once you’ve read and are familiar with the content, continue with this follow-up tutorial.
Today’s tutorial addresses a common question posed by YouTube subscribers as it pertains to the setup of the WP Popup plugin to integrate with a WordPress website and Mailchimp seamlessly.
Upon arriving at KickstartCommerce.com, you’ve likely experienced the popup window inviting you to subscribe to my newsletter to receive exclusive search marketing and domain name strategy content.
Without a shadow of a doubt, I know you subscribed, right?
And I know you like our Facebook page, right (Use the Like box on the side bar it only takes a few seconds to do)?
Good, I’m glad you did, and thank you!!! 😉
Nevertheless, Part I and the video, Integrating WP Popup and Mailchimp to Create a Growing Mailing List, are simple guides that instruct and help you start growing a mailing list via a popup subscription window.
The tutorial video is straightforward. There were many subscribers who were able to complete the tutorial successfully without error.
However, a few were unable to complete the tutorial and have a functioning subscription popup on their website.
So, let’s get down to business and address a few of the questions and errors raised.
Again, before you begin this next section, please be sure you complete Part I.
Grow Your Website’s Reach With WP Popup Plugin – Part II.
How and where to retrieve the WP Popup Plugin shortcode.
Open a web browser and log in to your website’s WordPress admin area. Be sure you have the WP Popup Plugin installed and set up. If not, then please review Part I.
From the main Dashboard screen, select WP Popup from the left-hand menu, as shown below.
If you’ve not created a popup, then click the Add New button. If you have created a popup, then click the title of your popup.
I’ll click the “Main Pop Up” blue linked text in this example.
You should be taken to a screen that looks very similar to the screenshot below.
Select the coded text in the Link Popup Shortcode box to the far right to retrieve the shortcode for the respective WP Popup. See the following image below for a closer look at the Link Popup Shortcode.
Here’s what the code looks like in its entirety:
<!-- WP Popup Plugin Shortcode --> [link_popup id='2715' link_text='Click to open popup' name='Main Pop Up']
How and where to implement the WP Popup Plugin shortcode.
Okay, this is the section for you for everyone asking where the WP Popup Plugin shortcode should be pasted.
Because it’s a short code, you’re able to paste the shortcode into a WordPress Post or Page. If you’re using the popup for a particular page, then paste the shortcode into the respective page should work just fine.
However, if your desire is for the popup to be sitewide (like this website), meaning your newsletter subscription popup form is capable of showing up on ALL pages, then you’ll need to update your WordPress theme’s header.php file.
Let me show you how to locate and edit the header.php file within your active WordPress theme, picking up from where we left off in the previous section above.
Copy the respective WP Popup Plugin shortcode of your choice.
Then, using the menu located on the left-hand side, hover over the “Appearance” option and select “Editor,” as shown below.
If there is not an Editor option present (commonly disabled), then search for WordPress Appearance Editor Not Available to walk through the steps of enabling the Appearance Editor.
Click the Editor option takes you to the area to edit Theme files, displaying the active theme’s files upon initial arrival as shown below.
On the far right side of the page is a drop-down that contains a list of loaded themes for your website. It should be set to your active theme.
Below the drop-down menu is a list of files your active theme contains. From this list, find the header.php and click it (see below).
Now, within the header file, you want to find the <body> html tag. Place your cursor immediately after the <body> HTML tag, press enter, and copy and paste the following line of code using your respective WP Popup shortcode (see example code below and screenshot).
<body> <div style="display:none;"> [link_popup id='2715' link_text='Click to open popup' name='Main Pop Up'] </div>
Notice the WP Popup shortcut code has been placed inside a div that has its style set to “display:none;”. This allows the popup form to now be included on every page of the website and not impact the display of the active theme.
Below, if you look closely to the right of the blue highlighted selection “Appearance,” you’ll see the code example above within the header.php file.
Copy and paste the code sample above, replacing it with your WP Popup shortcode, into your respective theme’s header.php file.
Save the file (look for the blue Update button) and you’re ready to open another browser or browser tab and test to see if your popup works (be sure the popup is enabled in the WP Popup section).
How to use Developer tools to locate WP Popup code.
In this section, I’m going to show you how to use Google Chrome and Developer tools to view the newly implemented code that you copied, pasted, and saved to your header.php file.
Open Chrome, type your website into the web URL bar, and press enter. Now, using the menu option to the far right, click the three horizontal menu icons, then select More Tools, and finally click developer tools (see screenshot below).
The Developer Tools will split your web browser viewing into a few panes. Ensure the Developer Tools is set to Elements so you can view the HTML of the loaded page from your website.
Next, search for the <body> HTML tag, and hopefully, you should see your copied and pasted WP Popup shortcode right after.
I’ve highlighted my code to show you what you should look for and view when inspecting your website with Developer tools.
Now, when you visit your website, you, as well as visitors, should see the following type of popup:
My popup looks weird. What should I do?
First of all, don’t panic. My popup didn’t look exactly right either when using an out-of-box installation and setup.
It took using the Developer Tools and inspecting each popup element to determine that my active theme’s CSS and the WP Popup Plugin’s CSS collided. You’ll have to tweak your CSS settings appropriately.
Because everyone’s CSS is not unique, I’m not going to attempt to try to show you how to tweak your CSS.
However, you use the Appearance Editor to make CSS changes to your active theme’s CSS to adjust and override the WP Popup CSS.
If you cannot correct the CSS issues, drop me a line, and I’ll be glad to assist you. That’s all for now!
