6. Styling the list

Héctor Cabrera edited this page Sep 26, 2018 · 16 revisions

Out of the box, the WordPress Popular Posts widget outputs a very simple HTML list of popular posts with basically no predefined design. The list uses the styles provided by your current theme, which maximizes the chances of a better integration with its look & feel.

The other reason for not including a set of predefined styles is that unfortunately it's simply impossible to make one design that fits perfectly on every single theme out there.

To give the list some custom styles you'll need to do either of the following:

Import WPP's CSS classes into your theme's stylesheet, and tweak it from there
  1. Go to Plugins > Editor and select WordPress Popular Posts from the dropdown at the right.
  2. Click on public/css/wpp.css to open WPP's stylesheet and copy its contents.
  3. Go to Appeareance > Editor and WordPress will automatically open the stylesheet of your current theme for you.
  4. Paste WPP's CSS rules at the end of the file (be very careful not to overwrite / delete any preexisting CSS rules you find in there or else a world of pain might come your way!), tweak WPP's CSS rules to your liking and then hit the Update File button to save changes.
Tweak WPP's stylesheet directly
  1. Go to Plugins > Editor and select WordPress Popular Posts from the dropdown at the right.
  2. Click on public/css/wpp.css to open WPP's stylesheet.
  3. Tweak the CSS rules to your liking and then hit the Update File button to save changes.
  4. To preserve changes across plugin updates, move the modified wpp.css stylesheet into your theme's directory (if you don't know how, you should probably stick to the first option or ask your developer to do this for you).

Here are a few examples on what can be done with a little CSS, time and imagination :P

Examples

Some of these layouts were tested under the Twenty Thirteen theme. You'll probably need to make some adjustments to the CSS to make it work on your theme.


Card Style

Card style

Instructions:

Add this CSS code to your theme's stylesheet (located at wp-content/YOUR-THEME-FOLDER/style.css):

.wpp-list {
}

    .wpp-list li {
        overflow: hidden;
        margin: 0 0 1em 0;
        padding: 1em 0 1em 0;
        border-bottom: #ddd 1px solid;
    }

    .wpp-list li:first-of-type {
        padding: 0 0 1em 0;
    }

        .wpp-list li .wpp-thumbnail {
            float: left;
            margin: 0 1em 0.6em 0;
        }

        .wpp-list li .category,
        .wpp-list li .wpp-post-title {
            display: block;
            font-weight: bold;
        }

        .wpp-list li .category {
            margin-bottom: 0.6em;
            color: #0366d6;
            font-size: 0.8em;
            line-height: 1;
        }

        .wpp-list li .wpp-post-title {
            margin-bottom: 0.2em;
            font-size: 1.1em;
            line-height: 1.3;
        }

        .wpp-list li .wpp-excerpt {
            float: none;
            clear: both;
            margin: 0;
        }

Go to Appeareance > Widgets, then click on the WordPress Popular Posts widget on your sidebar to access its settings.

Under Posts settings, tick the Display post excerpt checkbox.

Under Stats Tag settings, tick the Display taxonomy checkbox.

Under HTML Markup settings, tick the Custom HTML markup checkbox and Save.

Set Post HTML Markup to <li>{thumb} {category} {title} <p class="wpp-excerpt">{excerpt}</p></li>.

Save changes.


CSS3 Ordered list #1

Ordered list

Credits: José Vargas, at codeitdown.com

Instructions:

First, add this to the end of your theme's stylesheet (located at wp-content/YOUR-THEME-FOLDER/style.css):

ol.wpp-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 3em;
    padding: 0;

    counter-reset: li-counter;
}

ol.wpp-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}

ol.wpp-list > 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;
}

ol.wpp-list li span.wpp-stats { display:block; }

Go to Appeareance > Widgets, then click on the WordPress Popular Posts widget on your sidebar to access its settings.

Under Posts settings, tick the Display comment count and Display views checkboxes.

Under HTML Markup settings, tick the Custom HTML markup checkbox and Save.

Set Before / after Popular Posts to <ol class="wpp-list"> and </ol>, respectively.

Set Post HTML Markup to <li>{thumb} {title} <span class="wpp-stats">{stats}</span></li>.

Save changes.


CSS3 Ordered List #2

Ordered list

Credits: Robert Johansson at 456 Berea Street.

First, add this to the end of your theme's stylesheet (located at wp-content/YOUR-THEME-FOLDER/style.css):

ol.wpp-list {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}

ol.wpp-list > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #666;
    background:#31191c;
}

ol.wpp-list > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}

Go to Appeareance > Widgets, then click on the WordPress Popular Posts widget on your sidebar to access its settings.

Under Posts settings, untick the Display comment count and Display views checkboxes.

Under HTML Markup settings, tick the Custom HTML markup checkbox and Save.

Set Before / after Popular Posts to <ol class="wpp-list"> and </ol>, respectively.

Set Post HTML Markup to <li>{title}</li>.

Save changes.


CSS3 Ordered List #3

Ordered list

Credits: Alexios Tsiaparas at Stack Overflow

First, add this to the end of your theme's stylesheet (located at wp-content/YOUR-THEME-FOLDER/style.css):

ol.wpp-list {
	margin-left:0;
	padding-left:0;
	counter-reset:item;

}
ol.wpp-list > li {
	margin-left:0;
	padding-left:0;
	counter-increment:item;
	list-style:none inside;
	margin-bottom:5px;
}

ol.wpp-list > li:before {
	content: counter(item);
	padding:3px 10px;
	margin-right:0.5em;
	background:#381d20;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px; 
}

ol.wpp-list li span.wpp-stats {
	display:block;
	margin-left:2.7em;
}

Go to Appeareance > Widgets, then click on the WordPress Popular Posts widget on your sidebar to access its settings.

Under Posts settings, tick the Display comment count and Display views checkboxes.

Under HTML Markup settings, tick the Custom HTML markup checkbox and Save.

Set Before / after Popular Posts to <ol class="wpp-list"> and </ol>, respectively.

Set Post HTML Markup to <li>{thumb} {title} <span class="wpp-stats">{stats}</span></li>.

Save changes.

See also

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.