Shortcode and CSS Reference

Shortcode/PHP Functions

To add an Extraordinary Comments Archive to a Page or Post, simply add the code [add_exc_archive] . Added to a Post or Page, it will create a list of all featured comments, without pagination, bottom-right link or unique table title. You can adjust the output using any of the following arguments:

Optional Arguments:

  • ‘number_comments’: How many featured comments to display. The default is empty (”), signifying “retrieve and display all.”
  • ‘type’: whether to show featured or buried comments; the default is “featured.”
  • ‘order’: Order in which to display the comments; the default is “DESC” for “descending” (reverse chronological). The other options is “ASC” for ascending.
  • ‘lookback’: How far back to look for comments; the default is “‘January 1, 1970′” – or “all.” Accepts a standard readable date or expression (‘1 month ago’).
  • ‘random’: Display retrieved comments in random order, changing on every page reload: “1” (true) or “0” (false). The default is “0” or “do not randomize. Note: Random display is disabled for paginated tables.
  • ‘title’: Specific title or sub-title of the Widget or Archive: default is ” or no specific title.
  • ‘pre_date’: Text to appear prior to datetime. Default is ” or empty.
  • ‘datetime_format’: PHP datetime format for comment date – or escaped string. Default is “‘l, F j, Y – g:i a’.”
  • ‘pre_irt’: Text string to precede “in-reply-to” link if present (i.e., for comments in “nested” or “threaded” format. Default is “‘To: ‘”.
  • ‘pre_title’: Text string to precede Post title. Default is “‘Re: ‘”.
  • ‘gravatar_size’: Size of gravatar: default is “60” – use ‘none’ for no gravatar and “0” or empty ( ” ) for sitewide rather than plugin default.
  • ‘add_link’: Whether to include a link to another page at the bottom of the list. Default is “0,” meaning no link. “1” will add the link automatically, if the following two arguments (link_label and link_url) are also both provided:
  • ‘link_label’: What to display if add_link=1. Default is “‘View All →’.”
  • ‘link_url’: URL for the link. Default is “http://[your_site]/extraordinary-comments/.”
  • ‘paginate’: Works on Pages only: Whether to paginate the list. Default is “paginate=0” or “Do Not Paginate the List!”
  • ‘comments_per_page’: Applies to paginated Pages only: How many comments to show per page of a paginated archive. Default is “comments_per_page=5.”
  • ‘use_excerpt’: Whether to use an excerpt instead of full comment text. Default is “use_excerpt=0″ (in other words: use full text, not excerpt).”
  • ‘excerpt_length’: Length of excerpt in words. Default “25.”
  • ‘continued_label’: Text string for link at end of excerpt to full comment. Default is “‘[…]’.”
  • ‘show_credit’: Show a small, discreet link to CK’s plugins home page – a nice way to credit and thank the developer. Default is “show_credit=0” or do not show.

Shortcode Examples:

[add_exc_archive type=buried number_comments=3 random=1 lookback="1 year ago" title="Comments Buried by the Editors, a Hall of Shame" add_link=1 link_label="View the Whole List" link_url="http://example.com/hall-of-shame/" ]

Added to a Page, the above code will create an archive of three buried comments, randomly selected from comments buried over the course of the last year, under the title “Comments Buried by the Editors, a Hall of Shame,” without pagination, and with a link to another page at the bottom. Note that strings with spaces (like the title) longer than one word need to be enclosed in quotes. Otherwise, quotes are optional.

[add_exc_archive comments_per_page=5 title="Fabulous Comments" use_excerpt=1 excerpt_length=30 continued_label="...Read the Whole Fabulous Comment! → →" paginate=1]

Added to a Page, the above code will create a paginated archive of all featured comments, shown in up to 30-word excerpts, with a continuation link that reads “Read the Whole Fabulous Comment → →,” 5 per page, under the title “Fabulous Comments”. Note that strings with spaces (like the title) longer than one word need to be enclosed in quotes. Otherwise, quotes are optional.

CSS Selectors

Default styles:

/* Extraordinary Comments / V 0.8 / CK MacLeod / September – October 2016 */

/*basic archive and widget readability */
.cks_exc-comment {
margin-top: 1em;
padding-top: 1em;
}
.cks_exc-comment-author {
margin: 1em 0;
}
.cks_exc .comment-author img {
vertical-align: top;
margin-right: .5em;
}

/*in-thread styles: featured comments */
.comment.featured > article {
border: 1px solid green;
box-shadow: 5px 5px 5px green;
margin: 2em 0;
padding: 1em;
font-size: 1.4em;
}

/*cks cfix plugins */
.cks_exc .cks-plugins-credit {
clear: both;
float: none;
margin-top: 1em;
}

Extraordinary Commments Selectors:

Some common comment formatting selectors are also used in Extraordinary Comments. Many will be added automatically by WordPress Core, Theme, and Plug-Ins. Others – like “.comment-body”, “.vcard”, and so on, which might or might not already be exploited by your theme or commenting system, have also been included. If results of your modifications are not as expected, overriding by theme, plug-in, or other stylesheet is one likely explanation.

Selector(s)PurposeNote
#cks_exc-archive-[POST ID #]for an entire specific featured comment archiveGets “POST ID #” automatically
#cks_exc-widget-[WIDGET ID #]for an entire specific featured comment widgetGets “WIDGET ID #” automatically
.cks_exc, .cks_exc-archive, .cks_exc-widgetfor archives and widgets, for archives in general, for widgets in generaladditional selectors follow a parallel pattern, or directly name elements common to both types of table
.cks_exc-title, .cks_exc-title-archive
.cks_exc-comments, .cks_exc-comments-archive, .cks_exc-comments-widget
.cks_exc-comment, .cks_exc-comment-archive, .cks_exc-comment-widget
.cks_exc-widget-descr,.cks_exc-comment-header, .cks_exc-comment-header-archive, .cks_exc-comment-header-widget,
.cks_exc-pre-date, .cks_exc-comment-datetime, .cks_exc-pre-irt, .cks_exc-comment-irt, .cks_exc-pre-title, .cks_exc-post-title, .cks_exc-comment-author, .cks_exc-comment-author-name, .cks_exc-comment-body
.cks_exc-footer, .cks_exc-footer-archive, .cks_exc-footer-widget
.cks_exc-linkback, .cks_exc-linkback-archive, .cks_exc-linkback-widget
“Add CSS” Defaults

/*GENERAL CUSTOMIZATION */
.cks_exc .post-data {
padding-top: 1em;
font-family: Calibri, sans-serif;
clear: both;
font-size: 16px;
}
.cks_exc .post-data a:hover {
opacity: 0.6;
}
.cks_exc-comment-body {
padding: 0;
}
.cks_exc-comment-irt a {
font-size: 1em;
letter-spacing: 0;
border-bottom: none;
}
.cks_exc-comment-irt {
margin-top: 0;
}
.cks_exc-post-title {
clear: left;
float: left;
}
.cks_exc-comment-author a,
.cks_exc-comment-author a:hover {
letter-spacing: 2px;
}
.cks_exc-comment-author {
clear: both;
padding: 1em 0 0;
text-align: center;
font-size: 1.4em;
}
.cks_exc-comment .comment-author img {
margin-bottom: 0;
margin-right: .25em;
vertical-align: middle;
border: 1px dotted darkgray;
}
.cks_exc-comment-body {
clear: both;
}
.cks_exc-footer {
text-align: right;
font-style: italic;
padding-top: 2em;
}
/* WIDGET CUSTOMIZATION */
/* In many themes you will need to override ID styles with specific widget ID.
Save widget and view lower right in widget’s settings, substitute
for “#cks_exc-15” */
#cks_exc-15.widget li {
padding: 1em;
border: 1px dotted gray;
}
#cks_exc-15 p.cks_exc-widget-descr {
font-style: italic;
font-size: 1em;
font-family: Georgia, serif;
}
.cks_exc-linkback-widget {
float: right;
font-style: italic;
font-weight: 700;
font-size: 1em;
}
.cks_exc-comment-widget ul li a {
font-size: 1.15em;
}
.cks_exc-comment-widget a.cks_exc-link-to-comment {
border-bottom: none;
}
.cks_exc-comment-widget a:hover{
opacity:0.6;
}
.cks_exc-comment-header-widget {
width: 100%;
}
#widgets .cks_exc-widget .cks_exc-comment-body p {
font-size: 1em;
}
#widgets .cks_exc-widget ul {
margin-right: 0;
}
.cks_exc-widget ul {
padding: 0;
}
.cks_exc-widget .cks_exc-comment-irt {
float: none;
}
.cks_exc-widget .cks_exc-post-title {
clear: both;
float: none;
}
.cks_exc-widget .cks_exc-comment-author {
padding: 0;
}
/* ARCHIVE CUSTOMIZATIONS */
.cks_exc-comment-header-archive a,
.cks_exc-comment-header-archive .comment-irt a {
color: #351515;
font-size: 1.2em;
font-weight: 700;
font-family: Calibri, sans-serif;
letter-spacing: 1px;
}
.cks_exc-comment-header-archive a:hover,
.cks_exc-comment-header-archive .comment-irt a:hover {
opacity: 0.6;
letter-spacing: 1px;
color: #351515;
}
.cks_exc-comment-archive {
padding: 1em;
border: 1px dotted gray;
}
.cks_exc-comment-archive .comment-body p {
font-family: Georgia, serif;
font-size: 1.1em;
line-height: 1.6em;
}
.cks_exc-archive-comment {
border-bottom: 1px dotted gray;
margin: 1em 0;
padding: 1em 0;
}
.cks_exc-archive .comment-datetime {
float: left;
}
.cks_exc-archive .comment-irt {
float: right;
}
/*IN-THREAD STYLES
May need to be adapted substantially for your theme.
*/
/* Black Out Buried Comments */
.buried > article,
.buried > article a,
.buried > article .comment-author {
color: black;
background: black;
}
.buried > article p::selection {
color: black;
}
.buried > article img {
display: none;
}
.buried > article iframe {
display: none;
}
/* Give Featured Comments a Blue Ribbon */
.comment.featured > article {
background-image: url(../../../../wp-content/plugins/extraordinary-comments/images/blue_ribbon_2.png);
background-position: 100% 1em;
background-repeat: no-repeat;
}
.comment.featured > article {
border: 1px solid #24bbe8;
box-shadow: 5px 5px 5px #24bbe8;
margin: 2em 0;
padding: 1em;
font-size: 1.1em;
}