WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Popular Posts
[resolved] Add CSS class to the list items displayed by WordPress Popular Posts (3 posts)

  1. chrisjb
    Member
    Posted 1 year ago #

    Hi there,

    First of all thanks for a really awesome plugin. It's working really well on my site.

    I am actually using it to display top 10 restaurants in the world on my website. However I would like to display the top 10 restaurants as pins on a map!

    I was wondering if there is any way to add a class to each list item that is displayed by the plugin? Then I would be able to position the list items on my map using CSS! That would be amazing.

    Do you know if there is a way to add some class names to the list items?

    Ideally I would liek to add the posts category IDs as classes!

    Thanks so much for such a great plugin.

    http://wordpress.org/extend/plugins/wordpress-popular-posts/

  2. darkwarriorblake
    Member
    Posted 1 year ago #

    I too want to know this. I like the plugin but the customization is broken, I don't want the : separating the title and excerpt so the only way to do it is to choose a custom pattern_form, but that strips most of the tags making them difficult to customize.

  3. chrisjb
    Member
    Posted 1 year ago #

    Unfortunately darkwarriorblake if you want to be able to do this you'll have to edit the plugin, which means you will have problems updating. Hopefully the plugin author will continue to develop the plugin as it works really well apart from this problem and the problem of displaying most popular posts in the current category.

    Hopefully this code will help you add category ids as classes to your lis:

    $cid = get_the_category($p->id);
                        $cidfull = "cat-item cat-item-" . $cid[0]->cat_ID;
                        $data = array(
                            'title' => '<a data-cat="' . $cid[0]->cat_ID . '" href="' . $permalink . '" title="' . $title . '">' . $title_sub . '</a>',
                            'summary' => $excerpt,
                            'stats' => $stats,
                            'img' => $thumb,
                            'id' => $p->id,
                            'category' => $cidfull
                        );
    
                        array_push($posts_data, $data);
    
                        // PUTTING IT ALL TOGETHER
                        if ($instance['markup']['custom_html']) { // build custom layout
                            $classes = "";
                            foreach ($cid as $c) {
                                $classes.="cat-item-".$c->cat_ID." ";
                            }
                            if ($instance['markup']['list']) {
                                if ($instance['markup']['pattern']['active']) {
                                    $content .= "<li class=\"cat-item-list $classes cat-post-" . $p->id ."\" data-postid=\"".$p->id."\" data-cat=\"" . $cid[0]->cat_ID . "\">" . htmlspecialchars_decode($this->format_content($instance['markup']['pattern']['form'], $data, $instance['rating'])) . htmlspecialchars_decode($instance['markup']['post-end'], ENT_QUOTES) . "\n";
                                } else {
                                    $content .= "<li class=\"cat-item-list $classes cat-post-" . $p->id ."\" data-postid=\"".$p->id."\" data-cat=\"" . $cid[0]->cat_ID . "\">" . "{$thumb}<a href=\"{$permalink}\" title=\"{$title}\" class=\"wpp-post-title\">{$title_sub}</a> {$excerpt}{$stats}{$rating}" . htmlspecialchars_decode($instance['markup']['post-end'], ENT_QUOTES) . "\n";
                                }
                            } else {
                                if ($instance['markup']['pattern']['active']) {
                                    $content .= "<li class=\"cat-item $classes cat-post-" . $p->id ."\" data-postid=\"".$p->id."\" data-cat=\"" . $cid[0]->cat_ID . "\">" . htmlspecialchars_decode($this->format_content($instance['markup']['pattern']['form'], $data, $instance['rating'])) . htmlspecialchars_decode($instance['markup']['post-end'], ENT_QUOTES) . "\n";
                                } else {
                                    $content .= "<li class=\"cat-item $classes cat-post-" . $p->id ."\" data-postid=\"".$p->id."\" data-cat=\"" . $cid[0]->cat_ID . "\">" . "{$thumb}<a href=\"{$permalink}\" title=\"{$title}\" class=\"wpp-post-title\">{$title_sub}</a> {$excerpt}{$stats}{$rating}" . htmlspecialchars_decode($instance['markup']['post-end'], ENT_QUOTES) . "\n";
                                }
                            }
                        } else { // build regular layout
                            $content .= "<li class=\"cat-item cat-item-" . $cid[0]->cat_ID . "\" data-cat=\"" . $cid[0]->cat_ID . "\">{$thumb}<a href=\"{$permalink}\" title=\"{$title}\" class=\"wpp-post-title\">{$title_sub}</a> {$excerpt}<span class=\"post-stats\">{$stats}</span>{$rating}</li>" . "\n";
                        }
                    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.