I’m diving into today’s post, picking up from where I left off with Part I.
If you’re not familiar with the one action most small business websites fail to execute, then I suggest reviewing Part I before continuing on.
Once you’ve read and are familiar with the content at hand, then continue with this follow up tutorial.
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 doubt, I know you subscribed, right?
And I know you like our Facebook page, right (Use the Like box in 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 instruct and help you start growing a mailing list via a popup subscription window.
The tutorial video is straight forward. There were many subscribers who were able to successfully complete the tutorial without error.
However, there were a few who were not able 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 WP Popup Plugin shortcode
Open a web browser and login to your website’s WordPress admin area. Be sure you have the WP Popup Plugin installed and setup. 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.
In this example, I’ll click the “Main Pop Up” blue linked text.
You should be taken to a screen that looks very similar to the screenshot below.
To retrieve the shortcode for the respective WP Popup, select the coded text in the Link Popup Shortcode box to the far right. See the following image below for a closer look at the Link Popup Shortcode.
Here’s what the code looks like in it’s entirety:
<!-- WP Popup Plugin Shortcode -->
[link_popup id='2715' link_text='Click to open popup' name='Main Pop Up']
How and where to implement WP Popup Plugin shortcode
Okay, for everyone that asked where the WP Popup Plugin shortcode should be pasted, this is the section for you.
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 pasting 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 located and edit the header.php file within your active WordPress theme, picking up from where we left off from 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 disable), 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, and press enter and copy and paste the following line of code, using your respective WP Popup shortcode of course (see example code below and screenshot.
<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 it’s style set to “display:none;”. This allows the popup form to now be included in 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 with your WP Popup shortcode, into your respective theme’s header.php file.
Save the file (look for 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 your newly implement code that you copied, pasted and saved to your header.php file.
Open Chrome and 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 icon, 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. Be sure the Developer Tools is set to Elements, so that 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 be looking for and viewing 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 inspect each popup element to determine that my active theme’s CSS and the WP Popup Plugin’s CSS were colliding with one another. 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’re not able to correct the CSS issues, then drop me a line and I’ll be glad to assist you. That’s all for now! See you next post…