Jetpack Top Post Short Code

Hi there,

Please use this shortcode, which is mentioned here https://jetpack.com/support/extra-sidebar-widgets/top-posts-pages-widget/#shortcode

[jetpack_top_posts_widget]

omg , thank you dat hoang.

but how about the parameters? let say i want to change the default title or Control the number of displayed posts, etc?

ok, i got it, just for “title” by the way…

[jetpack_top_posts_widget title="Top Post"]

my problem is, i want to make Top Post with this parameter..

1. Top Post only for Post, exclude Home Page, Pages etc.
2. Limit the number of displayed posts, ex 5 top post only.
3. Display date under the title top post
4. Source full of Top Post parameter for shortcode

And the last..

5. how to customize top post? font size, color etc

thank you…

Hi,

1. Top Post only for Post, exclude Home Page, Pages etc.
2. Limit the number of displayed posts, ex 5 top post only.

You can use this shortcode with two parameters: count and types.

[jetpack_top_posts_widget title="Top Post" count="10" types="post"]

3. Display date under the title top post

Please use the filter in this guide https://jetpack.com/2016/01/12/hooks-customize-top-posts-pages-widget/ – the “Add data before or after each post in the widget” section.

4. Source full of Top Post parameter for shortcode

You can see all parameters here
https://github.com/Automattic/jetpack/blob/5.7.1/modules/widgets/top-posts.php/#L457-L465

5. how to customize top post? font size, color etc

As you see here https://cld.wthms.co/umHWId, please use the CSS class “jetpack_top_posts_widget” for customizing it.

Cheers,

trying to customize with this tutorial Ordered List CSS Styles

with this code css at my generatepress..

.jetpack_top_posts_widget li {
	list-style: none;
	margin: 0;
    margin-left: 3em;
    padding: 0;
    counter-reset: li-counter;
	position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}

.jetpack_top_posts_widget > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}

.jetpack_top_posts_widget a {
	color: #444444;
	font-size: 18px;
	line-height: 1.4em;
	font-weight: 300;
}

.jetpack_top_posts_widget a:hover {
	color: #efb93f;
}

but the result is: the big number list disapear,

screenshot: https://prnt.sc/i2idqn
ex weblog: Qarier dot com

• This reply was modified 6 years, 10 months ago by bebibu.

Hi there,

Thank you for getting back to us.

We do not support this kind of styling issue.

Please ask for the help on this page https://codeitdown.com/ordered-list-css-styles/ ??

Hi, when using the shortcode is there a way to display the image list instead of a regular list?

Thanks

• This reply was modified 6 years, 5 months ago by theurbanbrain.

Hi,

For displaying this shortcode, there are 3 options for the “display” parameter: grid, list, text.

You can test them out:

grid:
[jetpack_top_posts_widget title=”Top Post” count=”10″ types=”post” display=”grid”]

list:
[jetpack_top_posts_widget title=”Top Post” count=”10″ types=”post” display=”list”]

text:
[jetpack_top_posts_widget title=”Top Post” count=”10″ types=”post” display=”text”]

Cheers, Dat

—-

Code reference: https://github.com/Automattic/jetpack/blob/6.2.1/modules/widgets/top-posts.php/#L83

if ( isset( $instance['display'] ) && in_array( $instance['display'], array( 'grid', 'list', 'text' ) ) ) {

Hi, there,
I am here simply because I would like to have two Top Posts widgets on my website and I want everyone to have a different range of days.
Is it possible to do this?

I see documentation of this, but the code affects all the widgets on the website and not just one.

@zontir

Could you please start your own thread, as per the Forum Welcome?

https://www.ads-software.com/support/plugin/jetpack#new-post

Thank you!