Making Wordpress comments collapsible using jQuery
Some blogs have over 100 comments on every new posts, which makes the page extremely large. So lets say you want to shorten those pages by making the comments collapsable, well there is a easy solution for that! jQuery! We are going to integrate jQuery into Wordpress and make the comments collapsible!
Step 1 - Downloading jQuery
What is jQuery?
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.
For this tutorial you will need jQuery, wich can be downloaded here at jQuery.com. You can download the minified version, because we are not going to edit the jQuery framework itself.
Step 2 - Uploading jQuery
In order to upload jQuery to your website, you need a FTP client, you can get many for free so just use your best friend: Google.com
Now in this tutorial i’m going to use the default Wordpress theme (Default) wich can be found in wp-content/themes/default.
We want our files organized so we are going to create a dir for all the JavaScript, in this case wp-content/themes/default/js.
Now simply drag and drop the jQuery file onto that folder in your FTP client, and you will see that the file is being uploaded.
Step 3 - Creating a JavaScript code file
We cant write code into the jQuery framework file, because that’s not the way to do it and it wont work.
So we have to create another file that contains our JavaScript code, so lets create a new file in our wp-content/themes/default/js directory called collapse.js
Step 4 - Loading the Javascript
Javascript has to be loaded between the <head></head> tags.
The Wordpress template system has 3 main files, header.php, index.php and footer.php, in this case we have to open and edit header.php.
Now we have to add the javascript before these 2 lines:
<?php wp_head(); ?> </head>
So we need at the following code before those lines
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/collapse.js"></script>
<?php wp_head(); ?>
</head>
Before saving and closing this file, ill explain you what the wordpress tag ( <?php bloginfo(’stylesheet_directory’); ?> ) does.
In this case the tags returns the path to the stylesheet directory or also known as the theme directory(wp-content/themes/default), so when you look at the page its source code it will look like this.
<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/collapse.js"></script>
These 2 JavaScript files will be loaded on every page, this is because of the header.php, this file is included on every page.
Step 5 - Editing comments.php
In the comments.php file, you can change the way how comments display. We want to make a few edits so we can get the proper effect with jQuery.
We need to focus on the following code in comments.php
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<?php comment_text() ?>
</li>
The code above displays the comments, now we need to make a few edits to make it collapsible.
First we need something to click on, so that the comments collaps.
<span class="collapse_me"></span> <cite><?php comment_author_link() ?></cite> Says:
Now as you can see, i have added a span and a class, but no text in it, that’s because it would be nice to display an image instead of text.
And i’m talking about the famfamfam icons of course. Let’s try tab_go.png.
So lets open up our stylesheet, which can be found in the theme directory wp-content/themes/default/style.css and add some code to display these images.
span.collapse_me{
background: url('images/tab_go.png') no-repeat; /* Display the tab_go.png image */
width: 16px; /* Make sure that its 16px in height */
height: 16px; /* And 16px in width */
display: block; /* Make sure it displays as a block */
float:left; /* Make it float left of the author name */
margin-right: 5px; /* And create a bit of space between the image and the author name */
}
Now when somebody clicks the button we want the comment text to collapse, so we have to make a div around that with the class comment_tex so we can hide it with jQuery.
<div class="comment_text"> <?php comment_text() ?> </div>
You might now understand why this is but you will find out in a bit.
Now we need to make a paragraph around the complete comment including the author and post details, so lets do that and call the class comment_info.
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<p class="comment_info">
<?php echo get_avatar( $comment, 32 ); ?>
<span class="collapse_me"></span>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<div class="comment_text">
<?php comment_text() ?>
</div>
</p>
</li>
Ok, the editing is done! What we did so far is add a image to collapse the comment and added a div around the comment text so we can hide that.
And another div around the complete comment so we can call to that using jQuery.
Step 6 - Editing collapse.js
Ok now its time to edit the collapse.js which is empty at this moment. First we have to add the document ready tags, what this does is waiting for the page to load and then execute the javascript code.
$(document).ready(function(){
// Your code here
}
When the page is loaded, the script between the brackets will be executed.
Now we need to write a code that executes when the image with the class collapse_me is clicked.
jQuery has some easy commands for that, in this case the click function which runs the code when something is clicked.
As you can see below, it actually says, when something with the .collapse class is clicked run this code.
$(".collapse_me").click(function(){
// Your code here
});
What we can do is just make the text dissapear, but that’s now really nice looking so we are going to animate it using jQuery:
$(".collapse_me").click(function(){
$(this).parents(".comment_info").next(".comment_text").slideToggle(700);
});
Ok so what happends there? We tell jQuery to slide the text up or down depeding on its current state.
We dont want all the comments to slide up so that’s why we first lookup the parents, in this case comment_info.
The 700 between the ( ) means the speed, you can adjust this to whatever you like.
If you now go to your website, you will see that your comments will collapse.
Now we have one extra for this tutorial and that is a button that collapses all comments at once, so let’s add a new line above all comments in the comments.php file.
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<span class="collapse_all">Collapse / Expand all</span>
We have added the span and the class around the text so we can call it again using jQuery.
$(document).ready(function(){
$(".collapse_me").click(function(){
$(this).parents(".comment_info").next(".comment_text").slideToggle(700);
});
$(".collapse_all").click(function(){
$(".comment_text").slideToggle(700);
});
});
So what we did is make the collapse_all class clickable, and made a comment_text classes to slide up.
As you can see we do not use the parents class, that’s why they all slide up.
And that’s it! You got collapsing comments! Enjoy!
Subscribe by:
October 22nd, 2008 at 10:15 pm
is there a way to make the comments all hidden by default (rather than just individual comments) and have an option to expand all comments should the reader wish to read them?