How to Use PopTrends

How to Use the PopTrends Rating Widget

This is a simple guide for beginner users of PopTrends Rating Widget.

How to Use The Widget

After activating the plugin, PopTrends will start counting the number of reads on your blog posts and custom post types. So at the start, the post lists generated by PopTrends will not be accurate, but as soon as your website visitors start browsing your content, the lists will be more accurate.

Head over to Appearance > Widgets and just add / drag a PopTrends widget into one of the widget areas allotted by your theme.

Instructions placed inside the widget.

Settings Page

The settings page for PopTrends can be found atSettings > PopTrends

From the settings page you can set whether to display heart & star rating buttons either in the top, bottom, or both for each post type available. After activation, PopTrends will add heart buttons to the top of each blog post. Star ratings are not enabled by default.

You can also change the major colors of the widget from there, as well as caching.

Caching

The generation of PopTrends lists might take a lot of processing for some websites, especially if have a lot of blog posts (maybe if you have 10,000+ posts).

We want your websites to be fast, so we added some caching into PopTrends.

By default, caching is turned off so that you can see the plugin in action right away. But when you're happy with your set up, it's a good idea to turn it on. You can change the caching settings from the PopTrends settings page at Settings > Poptrends.

Typically, you'll probably want the today lists cached for a short time (10 minutes is a good number), and the longer lists like the yearly lists cached for longer periods of time (1 day or 1 week).

Adding Your Own Heart & Star Rating Buttons

There might be some cases where you want to display the heart & star rating buttons in other places outside your blog post pages. For those instances, we have provided you with 2 shortcodes:

    
    
     
  1. [poptrends_heart]
    2.

and

    
    
     
  1. [poptrends_rate]
    2.

You can place the above shortcodes inside your loops. Or if you know the post ID of your posts, you can supply it in the shrotcode:

    
    
     
  1. [poptrends_heart post_id='2']
    2.

or

    
    
     
  1. [poptrends_rate post_id='3']
    2.

Remember that PopTrends can add heart & rate buttons inside your post pages, so you won't have to add shortcodes to your post's content.

The above shortcodes are helpful if you are displaying posts in a gallery, or listing them down in a grid.


Styling The Widget

We have included a few simple styles with PopTrends. They're cleanly coded and follow WordPress' html structure, so they should blend perfectly with most themes.

We have also made the styles easy to adjust with CSS. Personally, the best way to edit the looks of the widget is by using your browser's inspect or developer console. Here's the structure of the classes of the widget for reference:

  • div.poptrends_container // The main widget container
    • h1.widget-title // The tab container
      • a.poptrends_tab.poptrends_popular_tab // These are each tabs
      • a.poptrends_tab.poptrends_trending_tab
      • a.poptrends_tab.poptrends_heart_tab
      • a.poptrends_tab.poptrends_rate_tab
    • div.poptrends_post_container // The main list container
      • div.poptrends_post
        • div.poptrends-select // This is the drop down container
          • select.poptrends_range_selector
        • ul // These are all the lists, each ul is a date range
        • ...
      • ...