Loading The WordPress Comment Form Within A Lightbox

Wordpress Comment Form LighboxIn this tutorial I will be showing you how to load the WordPress comment form within a lightbox. A lightbox is typically used on video or photo galleries. When a thumbnail or link is clicked, jQuery (a Javascript framework) overlays the content on top of the Website. This keeps a visitor from leaving the page being viewed and allows the visitor to easily surf through the gallery.

The same idea is used to load the comment form within the lightbox. When any “make a comment” link is clicked on a post, the lightbox opens loading the comment form within it. After a comment is made, the lightbox closes, and the the visitor is taken to the location of the comment.

Notice: This is a rather advanced tutorial that I have stripped down to be as simple as possible. Adding the comment box into a lightbox is not be possible with all themes. As well, depending on how your comments work (such as reply links and comment plugins) this may not work at all. It is recommended that only advanced users of WordPress utilize this feature.

This example works not only for comment forms, but also contact and feedback forms, thus any user could utilize the lightbox example depending on your WordPress, jQuery, CSS and HTML knowledge.

 

 

The Lightbox jQuery File

This is probably the most basic jQuery Lightbox example you will find.

  • Filename name: jquery.js – Copy the example below into a newly created jquery.js file. Upload the jquery.js file to your Websites theme directory. If you already have a jquery.js type of file for your theme, exclude the first and last lines and copy lines 2-11 into your themes jquery file.
$(document).ready( function() {
	/** Lightbox for Feedback Form */
	$('.comment_form').click(function(e) {
		e.preventDefault();
		var post_id = $(this).attr("rel")
		$('body').append('<div id="lightbox"><iframe src="http://your-website.com/comment?post_id='+ post_id +'" width="400" height="500" /></iframe></div>');
	});
	/** Close iFrame */
	$('#lightbox').live('click', function()
{
		$('#lightbox').empty().remove();
	});
} );

Modifying the Lightbox jQuery Example

  • Line 3: .comment_form is the class name that will go on within the Comment links of your post. (Explained below)
  • Line 6: Modify the your-website.com to include your Websites url.
  • Line 6: /comment is the name of the Page that will be created within the WordPress admin. If your Website uses a different Page naming structure or if you want to name the page something different, then modify the /comment page name.
  • Line 6: Depending on how you style the WordPress comment form the width and hight of the lightbox may need to be modified.
  • Line 10 and 11: If you already have a lightbox on your Website, you may need to rename the id name of the #lightbox. This will also need to be changed in the css (below).

Loading the jQuery file into your WordPress Headers

Add the function below to your themes functions.php file. The first part loads the jQuery library from Google’s API and the second part calls the newly created jquery.js file (above).

/* place this in your themes functions.php file */
function myjQueryScript() {
    if( !is_single() ) { /* only display on posts */
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js' );
        wp_enqueue_script( 'jquery' );
  /* jquery.js file in local theme folder */
        wp_deregister_script( 'default' );
        wp_register_script( 'default', get_bloginfo('stylesheet_directory').'/jquery.js' );
        wp_enqueue_script( 'default' );
    }
}
add_action( 'wp_print_scripts', 'myjQueryScript' );

Lightbox CSS

Open your themes style.css file and place the Lightbox CSS example below into the file.

  • #lightbox text-align:center and margin:0 auto; will center the lightbox on the page, both are required to center the lightbox. The height and width being 100% expands the lightbox’s clickable area, which allows the jQuery file to close the lightbox when the web-page-area around the lightbox is clicked.
  • #lightbox iframe is what styles the look around opened window and it positions it on the Website. Currently the lightbox is 50px from the top of the page. To move the lightbox down, adjust the margin: 50px auto 0 auto; Example: margin: 150px auto 0 auto; would move it down 150px from the top of the page.
/** == Lightbox CSS == */
#lightbox {
	height:100%;
	left:0;
	margin:0 auto;
	position:fixed;
	text-align:center;
	top:0;
	width:100%;
}
#lightbox iframe{
	background:#333333;
	border:5px solid #000000;
	margin:20px auto 0 auto;
	padding:10px 10px;
}

Standalone WordPress Template

This file is basically your themes header.php file, with all the unneeded meta and graphic extras stripped out of it and it includes the closing body and html tags.

  • Create a new file named comment-form.php and paste the following html document within it, upload the file to your active theme directory.
  • Log into your WordPress Admin and add a New Page. Make sure the file name is “comment” if you choose a different name or if the page will have .html added to it, make sure you adjust Line 6 within the jquery.js file (from above) to reflect the file name.
  • Select a proper page title, like: Make a Comment
  • In the Page Attributes Widget within the Templates dropdown, select the template named: Comment Form.
  • Publish the page.

Other than the comment form html, the file has 3 key parts that makes it function.

  1. Template Name: At the top of the file, commented out, is the Template Name: Comment Form. This makes WordPress display the template within the WordPress admin. When adding a New Page, under the Page Attributes widget, within the Templates dropdown, the template Comment Form will appear.
  2. require(‘./wp-blog-header.php’); This is what makes the template actually work with WordPress features. Without this the comment form will not function correctly.
  3. wp_head(); Without this function the jQuery files will not load.
<?php
/**
 * Template Name: Comment Form
 */
require('./wp-blog-header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>Leave a Reply</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<?php /** comment form */
	if( isset( $_GET["post_id"] ) ) {?>
	<div id="respond">
		<h3 id="reply-title">Leave a Reply</h3>
	  <form action="<?php bloginfo('url');?>/wp-comments-post.php" method="post" id="commentform" target="_parent">
	  <input type='hidden' name='comment_post_ID' value='<?php echo $_GET["post_id"];?>' id='comment_post_ID' />
			<p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p>
			<p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p>
			<p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30" /></p>
			<p class="comment-form-comment"><label for="comment">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>
			<p class="form-submit"><input name="submit" type="submit" id="submit" value="Post Comment" /></p>
	  </form>
	</div>
<?php	} /** end isset post_id */
	wp_footer();?>
</body>
</html>

Comment Form / Template Body Explained

  • Within the body tags if the template is the comment form. The comment form is wrapped with if( isset( $_GET[“post_id”] ) ) { while this is not required, its purpose is to load the form only if the post_id is passed to the page.
  • Next is the comment form itself. You can adjust the css calls and html layout to match your themes setup. Within the form is the hidden input named “comment_post_ID” and the value returns the post_id that is passed in. This is required to make the form work correctly.
  • If you view the source of your Websites comment form, you can strip out the form and place it within the comment-form.php file, just make sure you add in the hidden field comment_post_ID to make it work. For more information on styling the comment form see this page and this page from the codex.

Comment Links

The final step is the markup of the comment links within your themes single.php file (or index.php, page.php, comments.php and any other template with a comment link), which will open the lightbox and pass the post_id into the form.

Note: Most themes will require a custom link be used for the “make a comment” link.

  • class=”comment_form” – This tells the jQuery script that its a comment link. When
    this link is clicked, the jQuery script disables the typical link click, thus the permalink is not re-opened but rather the lightbox. This is also a nifty trick to beat many spam bots.
  • rel=”” attribute with the php in it, adds the posts id to the a href link. The jQuery script reads the rel attribute, which is what makes the form load and populates the hidden field: comment_post_ID

Remember to place an Open Comment Form link below the comments, where the comment form would have been. It is also a good idea to style this link as a pretty button, so people can easily see it.

<a href="<?php the_permalink();?>" class="comment_form" rel="<?php the_ID();?>">Open Comment Form</a>

Comment Link with the Comment Number

<a href="<?php the_permalink();?>" class="comment_form" rel="<?php the_ID();?>"><?php comments_number( 'Leave a Comment', 'Leave a Comment (1)', 'Leave a Comment (% comments)' );?></a>

Comment Reply Form

If you use threaded comments, the reply form should open in-line with the comment. If you do not use threaded comments, the example below will hide the comment form unless the reply link is clicked.

This goes below the “Open Comment Form” link, below where the comments would display.

<?php if( isset( $_GET["replytocom"] ) ) { comment_form(); } ?>

Problems With The Lightbox

If you are having problems with the lightbox loading, first check to make sure jQuery files are loading in the header of your Website. This lightbox was tested on jQuery veresion 1.8.0, earlier versions may not function correctly. As well, make sure the path to the jquery.js file is correct.

If this is not the issue, then make sure the class name .comment_form class name within the jquery.js file (line 3) is the same name being used on your Make a Comment links.

If the lightbox still is not working, try using the JavaScript Errors Notifier Chrome Extension to see if the jQuery file has issues, as well validate the html to make sure no divs are open.

No matter what, if the lightbox or any part is failing, something is setup incorrectly.

~Enjoy The New Toy!