#2 Pop-Up

Amy Marsh Is A Fashion Technologist In Training

Screen Shot

It is the second day of my #30daysofcoding challenge and after a few head scratches here and there, we finally have a lovely (if I do say so myself!) pop-up to allow you all to sign-up and keep updated throughout the 30 days of this challenge and beyond! You should have seen it before you read this, if I’ve done my job right!

 

Read on to find out how to do the same for your site, capturing leads from new visitors.

 

To be able to complete this tutorial you will have to installed this plugin:

http://wordpress.org/plugins/solid-code-theme-editor/

 

Screen Shot

 

 

Select plugins in the left hand menu and add a new one:

 

Screen Shot

 

 

Add the plugin zip file here:

 

Screen Shot

 

 

And then make sure the plugin is activated (NB. it should change to deactivated- like below- once activated):

 

Screen Shot

 

You should now have the SC Theme Editor option in Appearances:

 

Screen Shot

Which will display this page:

 

Screen Shot

 

We are ready to start making a lovely pop-up!

First you need have or sign-up to MailChimp, this allows you to have email subscribers. Once signed up or logged in you will need to create a list, you do this by selecting list in the left hand sidebar:

Screen Shot

 

 

 

Then select create list in the top right hand corner and fill in the details:

 

Screen Shot

 

Once your list have been created click onto the list:

 

Screen Shot

 

This will open this page:

 

Screen Shot

 

Next select sign-up forms in the top navigation and this will open this page:

 

Screen Shot

 

Select embedded forms this page will open:

Screen Shot

Scroll down in the Copy/paste onto your site section to a part of the code which starts at <form action=  and stops at novalidate> make a note of this code you will need it for the next section. It should look similar to this:

 

Next enter this code in the footer file just underneath <?php wp_footer(); ?>, this is a reduced version from the Mail Chimp code, you will want to change the text inside the <p> and </p> on the fourth line down to a message personal to you:

 

 

Change this section of the code just inserted to be your details, these can be found in the Mail Chimp code near the beginning:

 

 

On the third to last line of the just of code just entered is this line:

 

You will want to make sure the ‘value’ equals an action, as this will be the word in the button which they will press to sign up. It needs to tell the user what it is they will be doing e.g ‘Subscribe’ or ‘Get Updates’.

 

CSS

Now we can style it! First add an image you wish the pop-up to be to your WordPress Media, for this pop-up I have made this image, as you can see I have left space at the bottom of the image for the form:

 

SubscribeForm30daysofcoding

 

The first section of css I added is this:

 

 

This will give the entire screen an overlay of a black slight transparent background. If you wish to change the background colour simply change background:#000000;

To know which code to enter for each colour have a look on this site.

You can also alter the opacity by changing 0.8, 1 is a solid background and 0 is a clear background, so enter a figure in between 0 and 1 to still maintain a slightly transparent background.

 

Next is the pop-up css, I have entered the code:

 

The ‘popup-contents’ is the box itself, the ‘popup-contents form’ is the email input box and submit button and the ‘popup-contents p’ is the message above the form.

You will need to change the height and width of the ‘popup-contents’ to match the height and width of your image, you will also have to change the background url. You need to copy and paste the file url of the image taken from the images edit page:

 

Screen Shot

 

That will give you a url like this:

http://thefashiontechnologist.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-02-at-11.00.00.png

Only place this part of the url into the css background url:

/wp-content/uploads/2013/11/Screen-Shot-2013-11-02-at-11.00.00.png

A more detailed description of adding image backgrounds can be found in this post, when adding the header image.

In the ‘popup-contents form’ you may need to change the top position so it suited to your pop-up design.

In the ‘popup-contents p’ section you may need to the change top and padding values to change the position of the text to suit your pop-up.

 

Next I am editing the look of the button. I have entered in this code, feel free to change this code:

 

 

Finally for the css you could add these two sections of code to change the colour of the glow which appears around the form input and button when active, here I have them set to a pink:

 

 

Once you are happy with the style of your pop add ‘display: none;’ to both ‘popup-overlay’ and ‘popup-contents’, the css for both of these should now look like this, but with the details you have decided on:

 

 

 

 

jQuery

First for add this piece of code in your header.php file:

Place it just before this piece of code:

 

Next we need to make the javascript files, first open up your in your SC Theme Editor, it should look like this:

 

Screen Shot

 

Next select js on the right and then the html5.js:

 

Screen Shot

 

 

Now we have to make two new files, to do this enter cookie.js into the input as shown below select ‘Create File in current directory’ and this will create a new file:

 

Screen Shot

 

For this file go to this webpage  and copy all the code into the new file, remember to press update file at the bottom so it is saved.

 

Now make another file called main.js.

 

In this file paste this code in:

This code does a few things. It checks if the user has seen the popup before, if they have then they won’t see it again as we lead a cookie on their computer to stop the popup showing again and again as that would become annoying and they could turn against you! If the user does not have the cookie then we show the popup overlay and the popup contents. Once the user has submitted the form OR clicked the popup overlay to exit, we hide the popup and add the cookie. Lastly I put a timeout wrapper around my code to set the popup to show after 45secs as this helps increase conversion. The theory is, if someone is on your site for 45secs or longer then they are more likely to subscribe to your newsletter compared to someone who just landed.

Finally add these two references to these pages in the footer.php file just before <?php wp_footer(); ?>:

 

 

Day 2 complete!

Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!

 

 

 

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

5 thoughts on “#2 Pop-Up

  1. Pingback: #12 Basic RSS Email Newsletter | The Fashion TechnologistThe Fashion Technologist

  2. Pingback: #14 Newsletter Page & Sign Up Sequence | The Fashion TechnologistThe Fashion Technologist

  3. Hi Amy my pop up is not “floating” with the browser navigation i.e: The popup box remains at the top of the page, so if you’re at the bottom of the page you can see it. Any suggestions?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">