Download & Install SezWho Plug-in (Wordpress)
Detailed steps to Install (with pictures)
- Download the plugin
-
Unzip or copy the files into WordPress plug-in directory (wp-content/plugins). This should create a folder in wp-content/plugins/sezwho. (see Figure 1 below)
(Figure 1)
-
Go to WordPress plug-ins page and activate the plugin. (see Figure 2 below). After activating the plug-in, you will see a message (Figure 3 below) asking you to enter your blog key in order to complete the activation.
(Figure 2)
(Figure 3)
-
Enter your blog key (Get your blog key here) in the SezWho plug-in configuration (under the plug-ins tab) page. (see Figure 4 below)
(Figure 4)
-
We are almost there. You plugin should be active and working now. So let's add some widgets. First let's make sure that your Wordpress theme is widgetized. Now go to Presentation -> Widgets page. Here you should see the list of all available widgets (see Figure 5 below).
(Figure 5)
You can now add the Badge and RC widgest by dragging them from the "Available Widgets" page to the sidebar. And configure them by Clicking on the properties image on the widgets in the sidebar. (See Figure 6 and 7)
(Figure 6)
(Figure 7)
In the Badge widget, please make sure that you enter an email address for a user who has at least one comment in the system (add a comment if the user does not have one), otherwise the Badge will not show up. Finally the Badge and RedCarpet should show up in the page as follows (Figure 8):
(Figure 8)
After the installation is complete, access a post that has comments and make sure that the filter bar, comment score and comment ratings bar is showing as in this screenshot.
If you are still having problems or you want more control over the automatic layout, you should check out how to manually modify your theme template.
Configuring SezWho by modifying your theme
The SezWho plugin can be added to a blog by modifying the comment template. The SezWho template tags allow bloggers full control over the look and feel of their comment pages. Since SezWho if focused on improving comments functionality, the only template that needs to be modified is the comments template, comments.php.
SezWho template modification example
Typical comments.php (Changes highlighted)
<!-- You can start editing here. -->
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<cite>
<?php if (function_exists('cp_comment_user_image')) echo cp_comment_user_image(); ?>
<?php comment_author_link() ?>
<?php if (function_exists('cp_comment_profile_link')) echo cp_comment_profile_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('e','',''); ?></small>
<?php comment_text() ?>
<?php if (function_exists('cp_comment_footer_content')) echo cp_comment_footer_content(); ?>
</li>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
Typical single.php (Changes highlighted)
<!-- You can start editing here. -->
<div class="post" id="post-<?php the_ID(); ?>"><h2><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
<?php if (function_exists('cp_post_ratingbar')) echo cp_post_ratingbar();?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<p class="postmetadata alt">
<small>
This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through the <?php comments_rss_link('RSS 2.0'); ?> feed.
<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(true); ?>" rel="trackback">trackback</a> from your own site.
<?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href="<?php trackback_url(true); ?> " rel="trackback">trackback</a> from your own site.
<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link('Edit this entry.','',''); ?>
</small>
</p>
</div>
</div>
<?php comments_template(); ?>
Typical index.php (Changes highlighted)
<!-- You can start editing here. -->
<?php while (have_posts()) : the_post(); ?><div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small>
<?php the_time('F jS, Y') ?>
by <?php if (function_exists('cp_post_author_image')) echo cp_post_author_image(the_author());?>
<!-- by <?php the_author() ?> -->
<?php if (function_exists('cp_post_author_link')) echo cp_post_author_link();?>
</small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
<?php if (function_exists('cp_post_ratingbar')) echo cp_post_ratingbar();?>
</div>
<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
Template modification for Red Carpet widget
If you would like to manually add the Red Carpet widget, please change sidebar.php as shown below.
Typical sidebar.php (Changes highlighted)
<ul>
<li>
<?php
include('/wp-content/plugins/sezwho/cpratecomments.php');
if(function_exists('widget_sezwho_rc'))
widget_sezwho_rc();
?>
</li>
<?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
SezWho template tag details
-
cp_comment_user_image: This tag adds the author image for the comment with a profile event associated with it. The image looks as follows:
This template tag generates the following markup:This tag should be placed at the beginning of the comments section of a page. This tag should be placed outside the main comment block so place it appropriately based on your formatting. (See an example above)<img src='http://s3.amazonaws.com/sz_users_images/noimg.gif' alt='no image' title='no image' class='cpEmbedImageUserh' onmouseover='javascript:SezWho.Utils.cpProfileEventHandler(event);' onmousedown='javascript:SezWho.Utils.cpProfileEventHandler(event);' href='' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onerror="this.src='http://s3.amazonaws.com/sz_users_images/noimg.gif'" id='sz_image_link:1'/> <script type='text/javascript' src='http://image.sezwho.com/getpic.php?md5id=f66d6a65279698198471f5ea00605f84&
return_js=true&element_id=sz_image_link:1&aname=kuldeep'></script> -
cp_comment_profile_link: This tag adds the Check me out! link along with the profile event:
This template tag generates the following markup:This tag should be placed at the beginning of an individual comment block. This tag marks the beginning of collapsible boundary of a comment, so place it appropriately based on your formatting. (See an example above)(<a class='cpEmbedPageProfileLink' id='sz_profile_link:1' onmouseover='javascript:SezWho.Utils.cpProfileEventHandler(event);' onmousedown='javascript:SezWho.Utils.cpProfileEventHandler(event);' href='' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();'>Check me out!</a>)
-
cp_comment_footer_content: This tag adds the comment footer bar along with comment rating UI. The footer bar looks as follows:
This template tag generates the following markup:<table class='cpEmbedPageTable' style='width:auto'>This tag should be placed towards the end of and individual comment block. This tag marks the end of collapsible boundary of a comment, so place it appropriately based on your formatting. (See an example above)
<tr>
<td class='cpEmbedPageTableCell'>
<span class='cpEmbedPageCommFooterCS'>
<a href='#' onmousedown='SezWho.DivUtils.activateRatingsHelpDIV(event);'>Rate this</a>:
</span>
</td>
<td class='cpEmbedPageTableCell'>
<ul id="cpEmbedCommScore:1" class="cpEmbedCommScoreUl" onmousedown="SezWho.Utils.ScoreDisplay.update(event)" onmousemove="SezWho.Utils.ScoreDisplay.cur(event)" title="Rate This!">
<li id="cpEmbedCommScoreLi:1" class="cpEmbedCommScoreLi" title="2.5" style="width:50%">
</li>
</ul>
</td>
<td class='cpEmbedPageTableCell'>
<span id="cpEmbedCommScoreSpan:1" class="cpEmbedCommScoreSpan" title="2.5">2.5</span>
<span id="cpEmbedCommCountSpan:1" class="cpEmbedCommCountSpan" title="0"></span>
</td>
</tr>
</table>
-
cp_post_author_image: This tag adds the author image for the comment with a profile event associated with it. The image looks as follows:
This template tag generates the following markup:admin<img src='http://s3.amazonaws.com/sz_users_images/noimg.gif' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onmousedown='javascript:void SezWho.Utils.cpProfileImgClickHandler(3, "P");' onmouseover='javascript:SezWho.Utils.cpProfilePostEventHandler(event)' class='cpEmbedImageAuthor' onerror="this.src='http://s3.amazonaws.com/sz_users_images/noimg.gif'" id='sz_image_link_post:3' alt='User Image' title='No image'/> <script type='text/javascript' src='http://image.sezwho.com/getpic.php?md5id=6bb67fbe7333423e15adeed150c63d7c&This tag should be placed at the beginning of the post section of a page. This tag should be placed outside the main post block so place it appropriately based on your formatting. (See an example above)
return_js=true&aname=admin&element_id=sz_image_link_post:3'></script> -
cp_post_author_link: This tag adds the Check me out! link along with the profile event:
This template tag generates the following markup:<span id='sz_author_span_post:3'> (<a href='#' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onmousedown='javascript:void SezWho.Utils.cpProfilePostEventHandler(event);' onmouseover='javascript:SezWho.Utils.cpProfilePostEventHandler(event)' class='cpEmbedPageProfileLink' id='sz_author_link_post:3'/>Check me out!</a>)</span>This tag should be placed towards the end of and individual post block. This tag marks the end of collapsible boundary of a post, so place it appropriately based on your formatting. (See an example above) -
cp_post_ratingbar: This tag adds the post footer bar along with post rating UI. The footer bar looks as follows:
This template tag generates the following markup:<table class='cpEmbedPageTable' style='width:auto'>This tag should be placed towards the end of and individual post block. This tag marks the end of collapsible boundary of a post, so place it appropriately based on your formatting. (See an example above)
<tr>
<td class='cpEmbedPageTableCell'>
<span class='cpEmbedPagePostFooterCS'>
<a href='#' onmousedown='SezWho.DivUtils.activateRatingsHelpDIV(event);'>Rate this</a>:
</span>
</td>
<td class='cpEmbedPageTableCell'>
<ul id="cpEmbedPostScore:3" class="cpEmbedPostScoreUl" onmousedown="SezWho.Utils.ScoreDisplay.update(event)" onmousemove="SezWho.Utils.ScoreDisplay.cur(event)" title="Rate This">
<li id="cpEmbedPostScoreLi:3" class="cpEmbedPostScoreLi" title="3.2" style="width:64%">
</li>
</ul>
</td>
<td class='cpEmbedPageTableCell'>
<span id="cpEmbedPostScoreSpan:3" class="cpEmbedPostScoreSpan" title="3.2">3.2</span>
<span id="cpEmbedPostCountSpan:3" class="cpEmbedPostCountSpan" title="0"></span>
</td>
</tr>
</table>
Configuring the Look & Feel with CSS
If you want to change the look and feel of the SezWho tags you can do so from the "Edit Presentation" link against your blog in the myAccount page. It looks like as follows:
