Sridhar Katakam

Genesis and WordPress Tutorials

How to replace “Comments” text in Genesis Featured Posts widgets with an icon

by Leave a Comment

The default Post Info content in a Genesis Featured Posts is:

[post_date] By [post_author_posts_link] [post_comments]

which might appear on the frontend (depending on the styling in the child theme) like this:

This tutorial provides the steps to replace the strings Leave a Comment/Comment/Comments in the output of [post_comments] shortcode (if used) in the widgets with a speech icon using Font Awesome.

Step 1

Install and activate Widget Output Filters plugin which lets us filter the output of any widget in WordPress.

Step 2

Load Font Awesome.

Go to Genesis > Theme Settings > Header and Footer Scripts.

Paste

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

in the Header Scripts text area.

Step 3

In the Featured Posts widget(s) replace

[post_date] By [post_author_posts_link] [post_comments]

with

[post_date] By [post_author_posts_link] [post_comments zero="{{{commenticon}}}" one="1 {{{commenticon}}}" more="% {{{commenticon}}}"]

Step 4

Now let’s replace all instances of {{{commenticon}}} with <i class="far fa-comment"></i> in the output of Featured Posts widgets.

Add the following in child theme’s functions.php:

add_filter( 'widget_output', 'filter_widgets', 10, 4 );
/**
 * Replace `{{{commenticon}}}` with HTML for a comment icon in Genesis Featured Posts widgets.
 *
 * @param  string $widget_output The widget's output.
 * @param  string $widget_type   The widget's base ID.
 * @param  string $widget_id     The widget's full ID.
 * @param  string $sidebar_id    The current sidebar ID.
 *
 * @return string                Modified widget's output.
 */
function filter_widgets( $widget_output, $widget_type, $widget_id, $sidebar_id ) {
    if ( 'featured-post' === $widget_type ) {
        $widget_output = str_replace( '{{{commenticon}}}', '<i class="far fa-comment"></i>', $widget_output );
    }

    return $widget_output;
}

References:

https://philipnewcomer.net/2014/06/filter-output-wordpress-widget/

https://github.com/philipnewcomer/widget-output-filters

>