HTML5 time instead of disqus_rcw_post_time

Hey Bram, if you’d like, go ahead and fork us or send us a pull request, we’d be happy to give you a shout out in the release notes. https://github.com/andrewbartel/Disqus_Recent_Comments

I’m afraid I don’t know how GitHub works. I can post the code here if you want.

Line 216

$post_time = date(
    $style_params["date_format"] ,
    strtotime($comment_obj["created_at"].'+0000')
);
$pub_date = $comment_obj["createdAt"]; // ADDED

I kinda changed the whole output of a comment ($comment_html) to get some more HTML5 in there (article, rel:author, time) and to get less divs and better names for the divs:

//create comment html
$comment_html = '
<article class="disqus_rcw_single">
    <div class="disqus_rcw_meta_wrapper">
        <img class="disqus_rcw_avatar" src="'.$author_avatar.'" alt="'.$author_name.'">
        <div class="disqus_rcw_meta">
            <a href="'.$author_profile.'" rel="author">'.$author_name.'</a> -
            <time datetime="'.$pub_date.'" class="disqus_rcw_post_time">'.$post_time.'</time>
        </div>
    </div>
    <div class="disqus_rcw_content_wrapper"> <a class="disqus_rcw_thread_title" href="'.$thread_link.'">'.$thread_title.'</a>

        <div class="disqus_rcw_content">	<a href="'.$thread_link.$comment_id.'">'.$message.'</a>

        </div>
    </div>
</article>';

And to get the basic structure of this right, I would provide the following (relatively simple) css:

/* WordPress clear method */
.clear:after {
	content: "";
	display: table;
	clear: both;
}
.clear:before {
	display: table;
	content: "";
}

/* General */
.disqus_rcw_meta_wrapper {margin-bottom: 7px;}
img.disqus_rcw_avatar {
	float: left;
	width: 35px;
	margin-right: 7px;
}
div.disqus_rcw_meta {float: left;}
.disqus_rcw_post_time {font-size: 75%;}
.disqus_rcw_thread_title {font-weight: bold;}

I’ll take a look at implementing that Bram, but there’s no better time to learn git! Trust me you’ll be happy you did.

After looking at some other plug-ins who fetch list data, it seems better to output the data as a list.

Line 191:
$recent_comments = '<aside id="disqus_rcw_title" class="widget disqus_rcw_widget"><h3 class="widget-title">Recente reacties</h3><ul>';

Line 235

//create comment html
$comment_html = '
<li class="disqus_rcw_single">
    <div class="disqus_rcw_author_wrapper">
        <a href="'.$author_profile.'">
            <img class="disqus_rcw_avatar" src="'.$author_avatar.'" alt="'.$author_name.'">
            <span class="disqus_rcw_author">'.$author_name.'</span>
		</a>
    </div>
    <div class="disqus_rcw_content_wrapper">
        <a class="disqus_rcw_thread_title" href="'.$thread_link.'">'.$thread_title.'</a>
        <a class="disqus_rcw_message" href="'.$thread_link.$comment_id.'">'.$message.'</a>
    </div>
    <time datetime="'.$pub_date.'" class="disqus_rcw_post_time">'.$post_time.'</time>
</li>';

Line 259:
$recent_comments .= '</ul></aside>';

CSS

.disqus_rcw_author_wrapper {margin-bottom: 7px;}
img.disqus_rcw_avatar {
	float: left;
	width: 35px;
	margin-right: 7px;
}
div.disqus_rcw_author {float: left;}
.disqus_rcw_thread_title {font-weight: bold;display:block;}
.disqus_rcw_post_time {font-size: 75%;}

(That’s all the change I’ll make!)

And I know I should, but I’m working on some projects now.

Hey Bram,

I updated the plugin to support several new options and integrated your html5 suggestions as an option for markup. Can you take a look at the github: https://github.com/andrewbartel/Disqus_Recent_Comments and potentially test it on a few sites for me? Thanks much.

Cheers, love the new functionalities!

Some notes, if I may: WordPress automatically puts a widget in an “aside”, so no need to call line 213:
$recent_comments .= '<aside id="disqus_rcw_title" class="widget">';

And delete the closing “aside-tag” on line 301.
if($style_params['markup_style'] == 'html5') $recent_comments .= '</ul></aside>';

I think I made that call, but apparently I was wrong. I’m sorry for that!

I don’t really like the classic markup, but I’m not going to use it any way, and also: that’s how other users are used to the plugin. So maybe it’s a good thing that that option is still available. Everything seems to work fine, so great job! Just getting rid of that wrapping “aside” and it’s good to go!

Also, you don’t really need the “disqus_rcw_clear” div. You can add a css clear class to “disqus_rcw_author_wrapper” and in the css then:

.disqus_rcw_author_wrapper.clear:after {
  content: "";
  display: table;
  clear: both;
}

This will only work for IE8 and up BUT because this is the HTML5 template, it isn’t really something to worry about.

Also the <br> isn’t necessary, we can force this in css:
.disqus_rcw_thread_title {display: block;}

Which isn’t that odd, because “disqus_rcw_thread_title” behaves as a title, and titles are block elements anyway.

Hey Bram, I’m going to mark this thread as resolved with the release of 1.1. Thanks again for all your help.