How to use fully customised HTML Structure

Hi @gentheme,

i am using post_html, but in the Frontend, the output is coming in a Json form.

That’s odd. Could you please explain in more detail what you did to get this kind of result? The code you shared above doesn’t contain anything WPP related, it’s just plain HTML code.

Not executing SVGs correctly:

<!-- Trending Posts Widget -->
<div class="widget PopularPosts" data-version="2" id="PopularPosts00">
    <h2 class="title dt noTOC">Trending</h2>
    <div class="itemPp" role="feed">
        <?php
        if (function_exists('wpp_get_mostpopular')) {
            wpp_get_mostpopular(array(
                'limit' => 4,
                'range' => 'last30days',
                'order_by' => 'views',
                'wpp_start' => '<div class="wpp-wrapper">',
                'wpp_end' => '</div>',
                'stats_comments' => 1, // Enable stats_comments to get the comments count
                'post_html' => '
                    <article class="itm {current_post}">
                        <div class="iThmb pThmb">
                            <a class="thmb" href="{url}">
                                <img alt="{text_title}" class="imgThm lazy" src="{thumb_url}" />
                            </a>
                            <div class="iFxd">
                                <a aria-label="Comments" class="cmnt" data-text="{comments}" href="{url}#respond" role="button">
                                    <svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></g></svg>
                                    <span class="comment-count">Comments: {comments}</span> <!-- Custom comment label -->
                                </a>
                            </div>
                        </div>

                        <div class="iInf pSml">
                            <time class="aTtmp iTtmp pbl" data-text="{date}" datetime="{date}" title="Published: {date}"></time>
                            <div class="pLbls" data-text="in">
                                {category} {tags}
                            </div>
                        </div>

                        <div class="iCtnt">
                            <div class="iInr">
                                <h3 class="iTtl aTtl"><a href="{url}">{text_title}</a></h3>
                                <div class="pSnpt">
                                    {summary}
                                </div>
                            </div>
                        </div>
                    </article>'
            ));
        } else {
            echo '<p>No trending posts available.</p>';
        }
        ?>
    </div>
</div>

Can you prefer something like this:

<!-- Trending Posts Widget -->
<div class="widget PopularPosts" data-version="2" id="PopularPosts00">
    <h2 class="title dt noTOC">Trending</h2>
    <div class="itemPp" role="feed">
        <?php
        // Query for popular posts
        $popular_posts = new WP_Query([
            'posts_per_page' => 4,
            'orderby'        => 'views',
            'order'          => 'DESC'
        ]);

        if ($popular_posts->have_posts()) :
            while ($popular_posts->have_posts()) : $popular_posts->the_post(); ?>
            
                <article class="itm <?php if ($popular_posts->current_post == 0) echo 'mostP'; ?>">
                    <div class="iThmb pThmb">
                        <a class="thmb" href="<?php the_permalink(); ?>">
                            <img alt="<?php the_title_attribute(); ?>" class="imgThm lazy" src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>" />
                        </a>
                        <div class="iFxd">
                            <a aria-label="Comments" class="cmnt" data-text="<?php echo get_comments_number(); ?>" href="<?php comments_link(); ?>" role="button">
                                <svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></g></svg>
                            </a>
                        </div>
                    </div>

                    <div class="iInf pSml">
                        <time class="aTtmp iTtmp pbl" data-text="<?php echo get_the_date('M j'); ?>" datetime="<?php echo get_the_date('c'); ?>" title="Published: <?php echo get_the_date(); ?>"></time>
                        <div class="pLbls" data-text="in">
                            <!-- Display the main category and first tag -->
                            <?php
                            $category = get_the_category();
                            if (!empty($category)) {
                                echo '<a aria-label="' . esc_attr($category[0]->name) . '" data-text="' . esc_html($category[0]->name) . '" href="' . esc_url(get_category_link($category[0]->term_id)) . '" rel="category"></a>';
                            }
                            $post_tags = get_the_tags();
                            if (!empty($post_tags)) {
                                echo '<a aria-label="' . esc_attr($post_tags[0]->name) . '" data-text="' . esc_html($post_tags[0]->name) . '" href="' . esc_url(get_tag_link($post_tags[0]->term_id)) . '" rel="tag"></a>';
                            }
                            ?>
                        </div>
                    </div>

                    <div class="iCtnt">
                        <div class="iInr">
                            <h3 class="iTtl aTtl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            <div class="pSnpt">
                                <?php echo wp_trim_words(get_the_excerpt(), 15, '...'); ?>
                            </div>
                        </div>
                    </div>
                </article>

            <?php endwhile;
            wp_reset_postdata();
        else : ?>
            <p>No trending posts available.</p>
        <?php endif; ?>
    </div>
</div>

Hey @gentheme,

There were a couple of things that were wrong / missing in your code. Here’s the revised version:

<!-- Trending Posts Widget -->
<div class="widget PopularPosts" data-version="2" id="PopularPosts00">
    <h2 class="title dt noTOC">Trending</h2>
    <div class="itemPp" role="feed">
        <?php
        if (function_exists('wpp_get_mostpopular')) {
            wpp_get_mostpopular(array(
                'limit' => 4,
                'range' => 'last30days',
                'order_by' => 'views',
                'wpp_start' => '<div class="wpp-wrapper">',
                'wpp_end' => '</div>',
                'thumbnail_width' => 100, // Set thumbnail's width so the image can be displayed
                'thumbnail_height' => 100, // Set thumbnail's height so the image can be displayed
                'stats_category' => 1, // Enable stats_category to get the category(ies)
                'stats_comments' => 1, // Enable stats_comments to get the comments count
                'stats_date' => 1, // Set stats_date so the date can be displayed
                'excerpt_length' => 25, // Set excerpt_length so the excerpt (summary) can be displayed
                'post_html' => '
                    <article class="itm {current_class}">
                        <div class="iThmb pThmb">
                            <a class="thmb" href="{url}">
                                <img alt="{title_attr}" class="imgThm lazy" src="{thumb_url}" />
                            </a>
                            <div class="iFxd">
                                <a aria-label="Comments" class="cmnt" data-text="{comments}" href="{url}#respond" role="button">
                                    <svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></g></svg>
                                    <span class="comment-count">Comments: {comments}</span> <!-- Custom comment label -->
                                </a>
                            </div>
                        </div>

                        <div class="iInf pSml">
                            <time class="aTtmp iTtmp pbl" data-text="{date}" datetime="{date}" title="Published: {date}"></time>
                            <div class="pLbls" data-text="in">
                                {category} {tags}
                            </div>
                        </div>

                        <div class="iCtnt">
                            <div class="iInr">
                                <h3 class="iTtl aTtl"><a href="{url}">{text_title}</a></h3>
                                <div class="pSnpt">
                                    {summary}
                                </div>
                            </div>
                        </div>
                    </article>'
            ));
        } else {
            echo '<p>No trending posts available.</p>';
        }
        ?>
    </div>
</div>

Additionally, you need to add the following code snippets to your theme’s functions.php file to allow rendering SVG images, to allow the use of time HTML tags, and so that {tags} actually renders post tags:

/**
 * Parses custom content tags in WordPress Popular Posts.
 *
 * @param  string  $html    The HTML markup from the plugin.
 * @param  integer $post_id The post/page ID.
 * @return string
 */
function wpp_parse_tags_in_popular_posts( $html, $post_id ){

    // Replace custom content tag {tags} with a actual
    // post tags
    if ( false !== strpos($html, '{tags}') ) {
        $tags = '';
        $tags_separator = ', ';

        // Get the post tags
        $tags_arr = get_the_tags( $post_id );

        if ( $tags_arr ) {
            foreach ( $tags_arr as $tag ) {
                $tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>' . $tags_separator;
            }

            $tags = trim( $tags, $tags_separator );
        }

        // Replace {tags} with the value of $tags
        $html = str_replace( '{tags}', $tags, $html );
    }
	
	return $html;
}
add_filter( "wpp_parse_custom_content_tags", "wpp_parse_tags_in_popular_posts", 10, 2 );

/**
 * Allows SVG images and <time> tags to be used on the site.
 */
add_filter( 'wp_kses_allowed_html', function( $tags ) {
 
    $tags['svg'] = array(
	'class' => array(),
        'xmlns' => array(),
        'fill' => array(),
        'viewbox' => array(),
        'role' => array(),
        'aria-hidden' => array(),
        'focusable' => array(),
    );
    $tags['g'] = array(
        'transform' => array(),
    );
    $tags['path'] = array(
        'd' => array(),
        'fill' => array(),
    );

    $tags['time'] = array(
        'class' => array(),
        'data-text' => array(),
        'title' => array(),
    );

    return $tags;
 
}, 10, 2);

Thank you. I works. But it looks like I will not able to use it as the plugin generates the html client side with js. I saw huge performance drop in CLS in core web vitals. But thanks for such great plugin.