Open Ended and Ring Spanner Wrenches by wallyir at

Hacking Popular Posts for Arras

The Arras theme continues to be my preferred theme, although there are enough things I don’t care for about it that I periodically try other themes.  It’s a bit heavy feeling and I find myself restyling many elements.  One of the areas that was not styled in a way I wanted was the WordPress Popular Posts widget when thumbnails were enabled.

I was able to tweak the widget but, because the underlying HTML is an unordered (<ul>) list with unclassed list items (<li>), it meant that some changes I made to the overall popular post item would impact other widgets or elements on the site.

To get around this, I ended up adding a simple paragraph tag to the /wp-content/plugins/wordpress-popular-posts/wordpress-popular-posts.php file within the <li> … </li>.  The plugin has custom HTML support but I was not able to get it to do what I wanted.  In the end, I edited the Custom HTML else section of the plugin file to read

‘<li><p class=”poppostthumb”>’ ….. ‘</p></li>’

I didn’t make any other changes to the line.  Now, when I want to theme the entire popular post thumbnail section, I can do it distinctly from the other list items in other widgets.  The only downside is that I need to add this back in each time the plugin upgrades.

And it just did and now I don’t seem to be able to control the thumbnail size any longer, which is disappointing.  I have mine at 55px high, so I have changed the user.css file for Arras to enable that to display at larger than the 15px default for the plugin:

li.widgetcontainer ul li img.wpp-thumbnail {
float: left;
vertical-align: text-top;
margin-right: .25em;
height: 55px;
width: 55px;

The widget style I am trying to emulate is the default in the free Dimes theme from  bigger thumbnails, better distinction between items.