Categories
WordPress

How to Add an Opt-In Box to WordPress After Your Posts

In this post I’m going to explain how to add an opt-in box to WordPress after your content and before the comment section. To do this I will be using the following WordPress plugins:

Two Fields

First create a form using Gravity Forms. Add a single text field and an email field. Change the Field label for the single text field to First Name.

Top Align

Under the form settings change the Label placement to Top aligned. Be sure to Update the Form Settings before you go back to the form editor.

To change the layout of the form fields I will use Gravity Forms ready classes.

First Name Field

On the First name advanced tab add gf_left_half as the CSS Class name.

Email Field

From the Email Field Advanced Tab add gf_right_half as the CSS Class name. Update the form.

After Content Widget

If you have not done so go to Plugins >> Add New. Search for Add Widget After Content. Install and activate the plugin. Go to Appearance >> Widgets and you should see a new widget section called After Content. Drag the Form widget to After Content and choose the form you just created. Set the title and check Display form description.

Save and now you have an optin form under every post. It is there but it is not styled. To style the optin box I added the following to my theme css file. You will want to change the css to meet your needs.

.awac-wrapper{
	border:1px solid #333;
	background:#f3f3f7;
	margin-bottom:1em;
	padding:.8em
}
.awac{
	margin-bottom:.8em
}
.awac .gform_wrapper .gform_footer{
	padding:8px 0 20px 0;
	margin:8px 0 0 0;
}

.awac .gform_wrapper input[type="submit"],.awac .gform_wrapper input[type="button"]{
	background:#333;
	color:#ffffff;
	border:1px solid #333;
}

If you don’t want the optin to display for a post you can turn it off on the post edit page. you can also add an image and explain your optin offer in more detail.

This same concept will work for an author box and other types of calls to action.

 

Note: Updated 4/25/15 to change the css to use classes instead of ids.

Categories
WordPress

Display A Gravity Form In A Light Box

Recently on Skype, Christine was asking how to display a Gravity form in a light box using the iThemes Builder theme. After trying multiple techniques found online she was not able to get it to work successfully. My first thought was to use the version of Thickbox that is included with WordPress. That would have worked but it would have required adding two lines of code to the functions dot php file and Thickbox is not responsive.

I am going to show you how to use the Royal PrettyPhoto plugin to display a Gravity form in a light box using the iThemes Builder theme.

Layout

Once the form has been created create a layout in iThemes Builder that only has a content area.

Gravity Form on Page

gravityform
Then create a page that includes only the title and the gravity form shortcode. Later I will call this the form page.

Light Box Plugin

Install and activate the Royal PrettyPhoto plugin. Then go to Settings > Royal PrettyPhoto.

Royal Prettyphoto
Change the settings to hide the photo title, hide the Photo Control, Hide the social icons, Hide the Photo Thumbnail, and Hide the Photo Nav Arrow. Be sure to save the changes.

Gravity Form In A Light Box

Now it is time to edit the page the link will be on. Add a link to the form page. For Example:

< a href="http://mydomain.com/form/">Contact Us</a> 

Then add the following query string to the end of the page url

?iframe=true&width=600&height=700

Your link should look similar to

< a href="http://mydomain.com/form/?iframe=true&width=600&height=700">Contact Us</a> 

Let me explain so you can make changes as needed. The first query variable iframe tells it to display the page it is linking to in an iframe. The width is the width of the iframe. The example shows the width in pixels, but you can also set the width to a percentage such as 100{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a}. The height is the height of the iframe. The example shows the height in pixels, but you can also set the height to a percentage such as 100{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a}. If the page is bigger than the size provided scroll bars will appear.

If you were to save the page and view it in the browser the form would not display in a lightbox when the link is clicked. It would actually go to the form page. So we need to do another step.

< a href="http://mydomain.com/form/?iframe=true&width=600&height=700" rel="prettyPhoto[iframes]">Contact Us</a> 

Add the rel attribute to the link. Save the page and view it in the browser. When you click the link the form is now loaded in the lightbox.
form in lightbox
You can also style the Thickbox as needed.

Note: If you are using a theme other than iThemes Builder you will need to create a plan page template that does not have styling. I also want to mention that displaying a Gravity form in a light box is not the best solution for mobile visitors.

Do you have a solution for displaying a Gravity Form in a light box? If so share it in the comments below.
Categories
jQuery

Position A jQuery UI Dialog Window

 

jQuery ui dialog

A modal dialog window is a popup dialog box that the user must interact with before they can return to content on the page. Since it is smaller than the page you have to tell it where to appear on the page. In the past when I had to position a jQuery UI Dialog I used the Position option.

$("#swipe-dialog").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    open: function(event, ui) {
        
        [...code goes here]

        $(".ui-dialog-titlebar").hide();
    },
    position: {
        
            my: 'top', 
            at: 'top'
            
    },
    buttons: {
        Cancel: function() {
            $(this).dialog("close");
            $("body").unbind("click");
        }
    }
});
Position Option

The position option works as long as the user does not use the zoom feature on the browser or the zoom property in css. The position option does not adapt to zoom which causes the dialog to display partially off the page. To fix the problem I removed the position option.

$("#swipe-dialog").dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
open: function(event, ui) {
[...code goes here]
$(".ui-dialog-titlebar").hide();
},
buttons: {
Cancel: function() {
$(this).dialog("close");
$("body").unbind("click");
}
}
});
No Position Option

Then I added CSS to the style sheet to position the jQuery User Interface Modal Dialog Window in the center of the screen.

.ui-dialog {
    left: 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} !important;
    top: 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} !important;
    margin-left: -175px !important; 
    margin-top: -175px !important; 
} 
Center jQuery UI dialog

Margin-left is set to 1/2 the dialog width option of 350. Margin-top is set to 1/2 the dialog height option of 350. You will need to change the margin-left and margin-top based on the width and height of your dialog window. The left value and top value are set to 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} to ensure the dialog window is in the center of the screen even if the page has been scaled.

 

Categories
WordPress

How To Remove The Entry Title In iThemes Builder Using A Custom Extension

There are two things that I really like about iThemes Builder — the layout engine and the extensions.

Extensions are like mini-themes for Builder in that they can have style.css and functions.php files. They can be applied to a specific Layout or to a specific View.- iThemes Codex

In a recent project I needed one layout to not show the entry-title. Since there is not a filter to alter the entry-title I considered my options and decided to just create an extension. To create the extension I added an extensions folder to my child theme. In the extensions folder I created another folder called no-title. In the no-title folder I created a file called functions.php. In the functions.php file I added the following code:

 

<?php
if ( is_admin() )
	return;

if ( ! class_exists( 'ExtensionNoTitleLayout' ) ) {
	class ExtensionNoTitleLayout {
		function ExtensionNoTitleLayout() {
			it_classes_load( 'it-file-utility.php' );
			$this->_base_url = ITFileUtility::get_url_from_file( dirname( __FILE__ ) );
			add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );	
		}
		function extension_render_content() {	
		?>
			<?php if ( have_posts() ) : ?>
				<div class="loop">
					<div class="loop-content">
						<?php while ( have_posts() ) : // The Loop ?>
							<?php the_post(); ?>
							<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
								<div class="entry-content clearfix">
									<?php the_content(); ?>
								</div>
							</div>								
						<?php endwhile;  ?>
					</div>
				</div>
			<?php else :  ?>
				<?php do_action( 'builder_template_show_not_found' ); ?>
			<?php endif;  ?>
		<?php

		}
		function change_render_content() {
			remove_action( 'builder_layout_engine_render_content', 'render_content' );
			add_action( 'builder_layout_engine_render_content', array( &$this, 'extension_render_content' ) );
		}
	} 

	$ExtensionNoTitleLayout = new ExtensionNoTitleLayout();
}

ExtensionOnce I created the extension I moved to the layout editor and selected the extension.

 

 

Categories
Tools

Getting Started With Sublime Text

Sublime Text is the text editor that I use for writing code such as PHP, CSS, HTML and jQuery. I have been using it for a few years and highly recommend it to others. Below is an infographic I created a few months ago to help others get started with Sublime Text.

Getting Started With Sublime Text Infographic

You can try Sublime text for free, but I highly recommend purchasing a license if you plan to use it as your code editor.