Just like this Blog’s homepage. The steps are easy. Here is a small description into how I got this done on this blog. Why I got this done is explained first. Over the years I have shied away from commenting on Blogs simply because one has to click and go to a comments popup form or a post page, not that works just fine on larger posts where there are tons of stuff to read, tons of Maps and Images and other stuff to go through, but for a very simple day to day blogging, that kind of comes across as a lose nut in the theme, and that’s how I got around to get this done.
Here’s how.
Step 1. Open you index.php file in the theme and locate the loop. That should look like this. It should start with the following:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
And end with the following:
<?php endwhile; ?>
....
<?php endif; ?>
Between these two parts is where your posts pop up and the whole thing is repeated over and over again depending on the amount of posts you would want to load up on the homepage, which can be set right there in the settings. We don’t want to touch that.
Step 2: Now open your single.php file and find this small piece of code.
<?php comments_template(); ?>
Change that to:
<?php $withcomments = "1"; comments_template();?>
Copy that and paste it right above the end of the loop, just before this:
<?php endwhile; ?>
....
<?php endif; ?>
This should result in the comments form and the comments to pop up right under each post. But that would also pop up a bunch of errors as each form field ID would get repeated over and over again, and that can’t be cool.
Step 3: Now open the comments.php file in your theme directory. In that you will have to locate each ID identifying each field in the comments form. Either prefix or suffix them with the following code to make them unique. The code pulls out the post ID and adds a suffix to the already existing ID after a hyphen. Here’s how:
<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="40" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
Becomes:
<input type="text" name="author" id="author-<?php the_ID(); ?>" value="<?php echo esc_attr($comment_author); ?>" size="40" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
Note the:
-<?php the_ID(); ?>
added right after the “author” in the ID of the Input Field. Do this for all the fields and submit buttons. Once you are done, you are error free for most of the part. But there still remains one problem, now when the page loads, you will see all the comments form and that cant be good, it would look cluttered and bad.
Step 4: Add or Change the “Reply” button under the post, in most themes this button is linked to the post page.
Instead put this Hyperlink to the “Reply” button:
<a href="javascript:toggleLayer('respond-<?php the_ID(); ?>');">Reply</a>
By any luck, you would have already added the “Post ID” identifier to the “respond” ID in the comments.php. That leaves us with the Javascript. Copy the following code and place it within the <head> section of your header.php file.
<script type="text/javascript">function toggleLayer( whichLayer ) { var elem, vis; if( document.getElementById ) // this is the way the standards work elem = document.getElementById( whichLayer ); else if( document.all ) // this is the way old msie versions work elem = document.all[whichLayer]; else if( document.layers ) // this is the way nn4 works elem = document.layers[whichLayer]; vis = elem.style; // if the style.display value is blank we try to figure it out here if(vis.display=='' && elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined) vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; vis.display = (vis.display==''||vis.display=='block')?'none':'block'; }</script>
Thats it. you are done. This Javascript will simply “Show/hide” your comments form identified by “respond-(postID)”. Now I am no PHP guru, but this seems to work just fine returning zero errors.
[Edit] If you are copying the codes from above in green. Make sure you copy them into Notepad / Textedit and remove all formatting (convert to plain text) before pasting them in.
