BlogCatalog Users : Download & Install SezWho Plug-in (Wordpress)

 

Detalied 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 recieved in Email or from 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 Clickining 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 highlighed)

<!-- You can start editing here. -->

<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
<?php if (function_exists('cp_comment_filter_options_bar')) cp_comment_filter_options_bar();?>
<ol class="commentlist">

<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<?php if (function_exists('cp_comment_header')) cp_comment_header(); ?>
<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('e','',''); ?></small>

<?php comment_text() ?>
<?php if (function_exists('cp_comment_footer')) cp_comment_footer(); ?>
</li>

<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>

<?php endforeach; /* end for each comment */ ?>

</ol>

 

 

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 highlighed)

<div id="sidebar">
<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_filter_options_bar: This tag adds the header bar for the comments. The header bar looks as follows:

     

    This template tag generates the following markup:

    <table id="cpEmbedPageTableid" class="cpEmbedPageTable cpEmbedPageFilterBarCustom">

    <tbody>

    <tr>

    <td class="cpEmbedPageTableCell cpEmbedPageFilterBarCellCustom">

    <p class="cpEmbedSelectParagraph cpEmbedSelectParagraphCustom">Highlight: <select onchange="..."><option value="0">All Comments</option><option value="5.5">Good Comment(3+)</option> <option value="7.5">Great Comments(4+)</option></select> <a href="...">What is this?</a> </p>

    </td>

    <td class="cpEmbedPageTableCellBranding cpEmbedPageFilterBranindingCellCustom"><a class="cpEmbedPageTableCellBrandingLink" href="javascript:void SezWho.Utils.openPage('home');"/></td>

    </tr>

    </tbody>

    </table>

    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)

     

  • cp_comment_header: This tag adds the comment score and comment plus/minus button along with the profile link:

     

    This template tag generates the following markup:

    <table class="cpEmbedPageTable cpEmbedPageCommentHeaderCustom">

    <tbody>

    <tr>

    <td class="cpEmbedPageTablePMCell cpEmbedPageHeaderBarPMCellCustom"><input type="button" class="cpEmbedCommentImgMinus cpEmbedCommentImgMinusCustom" onclick="..." id="sz_comment_collapse:id"/></td>

    <td class="cpEmbedPageTableCell cpEmbedPageProfileCellCustom"><a rel="nofollow" href="..." class="cpEmbedPageCommentHeaderAuthorLinkCustom">Name</a> (<a id="sz_profile_link:id" class="cpEmbedPageProfileLinkCustom">Profile</a>)</td>

    <td class="cpEmbedPageTableScoreCell cpEmbedPageTableScoreCellCustom">

    <div id="sz_comment_score:id" class="cpEmbedPageCommentHeaderScoreDivCustom">

    <input type="button" class="cpEmbedScoreSquareImgon cpEmbedScoreSquareImgonCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgon cpEmbedScoreSquareImgonCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgon cpEmbedScoreSquareImgonCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgoff cpEmbedScoreSquareImgoffCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgoff cpEmbedScoreSquareImgoffCustom" title="Comment Score : 3.2"/>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

    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)

     

  • cp_comment_footer: 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:

    <div>

    <p class="cpEmbedPageCommentFooterCustom">Was this comment useful to you ?

    <input type="button" value="yes" id="sz_rating_button:yes:id" class="cpEmbedYesNoButtonClassCustom"/>

    <input type="button" value="no" id="sz_rating_button:no:id1" class="cpEmbedYesNoButtonClassCustom"/>

    </p>

    </div>

    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)

     

Configuring the Look & Feel with CSS

If you want to change the look and feel of the SezWho tags you can do that my adding CSS rules for the following elements:

 

    Comment Filter Bar
  • cpEmbedPageFilterBarCustom
  • cpEmbedPageFilterBarCellCustom
  • cpEmbedSelectParagraphCustom
  • cpEmbedPageFilterBranindingCellCustom

 

    Comment Header Bar
  • cpEmbedPageCommentHeaderCustom
  • cpEmbedPageHeaderBarPMCellCustom
  • cpEmbedCommentImgMinusCustom
  • cpEmbedCommentImgPlusCustom
  • cpEmbedPageProfileCellCustom
  • cpEmbedPageCommentHeaderAuthorLinkCustom
  • cpEmbedPageProfileCellCustom
  • cpEmbedPageTableScoreCellCustom
  • cpEmbedPageCommentHeaderScoreDivCustom
  • cpEmbedScoreSquareImgonCustom
  • cpEmbedScoreSquareImgoffCustom
  • cpEmbedScoreSquareImghalfCustom

 

    Comment Body
  • cpEmbedPageCommentBodyCollapseDivCustom

 

    Comment Footer Bar
  • cpEmbedPageCommentFooterCustom
  • cpEmbedYesNoButtonClassCustom

 

    Red Carpet Widget
  • szRCEmbedTableClassCustom
  • szRCEmbedImageCustom
  • szEmbedCommeterNameCustom
  • szEmbedCommetLinkCustom
  • szRCStarImgonCustom
  • szRCStarImgoffCustom
  • szRCStarImghalfCustom