Title: Shortcode Styling
Last modified: July 13, 2023

---

# Shortcode Styling

 *  Resolved [SSmeredith](https://wordpress.org/support/users/ssmeredith/)
 * (@ssmeredith)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/shortcode-styling-2/)
 * Hi Hector! I appreciate that you’re helping us to migrate over, and I’m choosing
   to go with shortcodes. What is the best way to add your widget styling to the
   shortcode? See > [https://tinyurl.com/2htoxtmh](https://tinyurl.com/2htoxtmh)
 * also added the live site url.
 * Thanks!!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fshortcode-styling-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/shortcode-styling-2/#post-16895323)
 * Hi [@ssmeredith](https://wordpress.org/support/users/ssmeredith/),
 * > I appreciate that you’re helping us to migrate over (…)
 * Thanks, that’s very kind of you!
 * > What is the best way to add your widget styling to the shortcode?
 * Alright, so this is the shortcode version of the “Cards” themed popular posts
   list:
 *     ```wp-block-code
       [wpp range='last24hours' limit=5 excerpt_length=75 thumbnail_width=75 thumbnail_height=75 stats_views=0 stats_category=1 wpp_start='<ul class="wpp-list wpp-cards">' post_html='<li class="{current_class}">{thumb_img} <div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title} <p class="wpp-excerpt">{excerpt}</p></div></li>' wpp_end='</ul>']
       ```
   
 * The only thing you may need/want to change is the `range` parameter. I set it
   to “last24hours” since I don’t know which Time Range you’re using with the classic
   widget 😛 Possible values for the `range` parameters are _last24hours_, _last7days_,
   _last30days_, _all_, and _custom_ (see [Parameters](https://github.com/cabrerahector/wordpress-popular-posts/wiki/2.-Template-tags#parameters)
   for more details).
 * It seems you already know how to add the shortcode to your sidebar but in case
   you don’t:
    1. Add a Text widget to your sidebar (via Appearance > Widgets > [Your Sidebar 
       Name]).
    2. Set Text widget’s title to “Trending” (or whatever you want haha)
    3. Paste the shortcode inside the Text widget.
    4. Save changes.
 * You will also need to add [these CSS rules](https://raw.githubusercontent.com/cabrerahector/wordpress-popular-posts/master/assets/themes/cards/style.css)
   to your site for the shortcode to be styled accordingly. You can do so either
   via **WP Dashboard > Appearance > Customize > Additional CSS** or by including
   these into your current WordPress theme’s style.css file.
 * If you have any further questions don’t hesitate to ask, alright?
 *  Thread Starter [SSmeredith](https://wordpress.org/support/users/ssmeredith/)
 * (@ssmeredith)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/shortcode-styling-2/#post-16904428)
 * Excellent help! Thanks very much! 🙂
 *  Thread Starter [SSmeredith](https://wordpress.org/support/users/ssmeredith/)
 * (@ssmeredith)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/shortcode-styling-2/#post-17066703)
 * Hi there!
 * Quick question. Using this short code, can I single out a specific category? 
   For example, if I wanted to use to category “news” what would that look like 
   in the shortcode?
 * TIA!
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/shortcode-styling-2/#post-17066880)
 * Hey [@ssmeredith](https://wordpress.org/support/users/ssmeredith/),
 * For that you can use the `cat` parameter to ask the shortcode to list only popular
   entries from a specific category ID.
 * For example let’s say that the ID of your _news_ category is `65`, ([how to find the category ID](https://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/#find-category-tag-id))
   then:
 *     ```wp-block-code
       [wpp range='last24hours' limit=5 cat=65 excerpt_length=75 thumbnail_width=75 thumbnail_height=75 stats_views=0 stats_category=1 wpp_start='<ul class="wpp-list wpp-cards">' post_html='<li class="{current_class}">{thumb_img} <div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title} <p class="wpp-excerpt">{excerpt}</p></div></li>' wpp_end='</ul>'
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Shortcode Styling’ is closed to new replies.

 * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659)
 * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * Last activity: [2 years, 8 months ago](https://wordpress.org/support/topic/shortcode-styling-2/#post-17066880)
 * Status: resolved