Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Tweak Wordpress Popular Posts plugin WordPress

  • SOLVED

I need to tweak the [[LINK href="http://wordpress.org/extend/plugins/wordpress-popular-posts/"]]Wordpress popular posts plugin[[/LINK]] so that I can style the output, rather than just using the regular OL tags.

I've customised the plugin slightly already to display the following at the start of each LI:
<li class="group"><div class="number">1</div>

This works great, but of course each OL > LI has a number 1 in front of it. I need this to increment, so the first has '1', the second '2' etc.

Here's a Pastebin with my modified code so far: [[LINK href="http://pastebin.com/LfV4NSHi"]]http://pastebin.com/LfV4NSHi[[/LINK]]. The modified code is at line 1014.

I'm going to display 2 lists of popular posts on the same page, so this output count will need to reset itself once the list is finished outputting, so I can output another straight away.

Answers (2)

2011-05-16

Pippin Williamson answers:

Yes, as Peter said. You can automatically give each item a number by putting this in your CSS:

li.group { list-type-type: decimal; }


Jon comments:

The regular OL would be fine if I didn't need to do a lot more styling (even wrapping the list content in a span and styling the li and li > span separately isn't an option) - I need to increment with PHP


Pippin Williamson comments:

You can make an auto incrementing counter like this:


<?php
$i = ;
//your loop starts here
$i++; echo $i;
// loop ends here
?>


Jon comments:

Could you let take a look at the pastebin link and let me know how to add this to the array at line 990, please? That's the part I don't have the knowledge to implement. Thanks!


Pippin Williamson comments:

Line 990 isn't where this needs to be placed. It's actually around line 640, I think. Try this version:

http://pastebin.com/0ieQNdUS

And use the default markup, not custom.


Jon comments:

Doesn't seem to make any difference there - what do you mean by the default markup? My template side code is:

<?php get_mostpopular("range=weekly&limit=4&order_by=avg&pages=0&stats_comments=0"); ?>


Pippin Williamson comments:

What does the HTML outputted look like?


Jon comments:

<ul>
<li class="group"><div class="number">1</div><a href="###" title="title here"><span class="wpp-post-title">Title</span></a> </li>
<li class="group"><div class="number">1</div><a href="###" title="title here"><span class="wpp-post-title">Title</span></a> </li>
<li class="group"><div class="number">1</div><a href="###" title="title here"><span class="wpp-post-title">Title</span></a> </li>
<li class="group"><div class="number">1</div><a href="###" title="title here"><span class="wpp-post-title">Title</span></a> </li>
<li class="group"><div class="number">1</div><a href="###" title="title here"><span class="wpp-post-title">Title</span></a> </li>
</ul>
<!-- End Wordpress Popular Posts Plugin v2.1.4 -->


Pippin Williamson comments:

Okay, I've found it, but based off of how the plugin is setup, it's not going to work. If you're willing to up the prize to $20, I can do it with jQuery


Jon comments:

Sure - go for it. If you can get this working in jQuery, I'll drop this in. OK for me to add the extra prize money at the end?


Pippin Williamson comments:

Alright, try this one: http://pastebin.com/4v9vAyMG


Jon comments:

Thanks Pippin - looks like it's nearly there - just 2 problems:

1) Starts from 0 (0, 1, 2, 3 - should be 1, 2, 3, 4)
2) I have a second popular posts list right after (one shows weekly top posts, the other monthly) - the numbers continue, whereas they should actually restart after the first list is finished outputting.

Any quick fixes for those two?


Pippin Williamson comments:

Here you go: [[LINK href="http://pastebin.com/g6wbkdzE"]][[/LINK]]


Pippin Williamson comments:

Whoops, missed the link. [[LINK href="http://pastebin.com/g6wbkdzE"]]Use this one[[/LINK]].


Jon comments:

Hmm, I did try tweaking that var count to 1 before, but it didn't seem to have any effect. In any event, that latest code seems to strip the numbers out entirely?


Pippin Williamson comments:

Check your HTML output again. I added a class to the UL called "wpp". Make sure it's there.


Jon comments:

The wpp class is being output, but the numbers aren't?


Pippin Williamson comments:

Found it. Sorry, there was a syntax error. Try now [[LINK href="http://pastebin.com/ZhCja8Ga"]]http://pastebin.com/ZhCja8Ga[[/LINK]]


Jon comments:

That works perfectly to reset the second list, but they both begin with 0, for some reason? Changing var count to 1, or even 10, doesn't seem to have any effect, nor does renaming count 'countposts' (thought there might be a conflict)?


Pippin Williamson comments:

Got it: [[LINK href="http://pastebin.com/xT8bfgWj"]]http://pastebin.com/xT8bfgWj[[/LINK]]


Jon comments:

Perfect! Thanks, Pippin!

2011-05-16

Peter Michael answers:

Instead of tweaking, use the [[LINK href="http://www.w3schools.com/css/pr_list-style-type.asp"]]CSS list-style-type property[[/LINK]]


Jon comments:

I need much more fine-grained control over this one (custom fonts and styling) so list-type isn't workable, unfortunately.


Peter Michael comments:

You would have to fiddle in the get_popular_posts function if you want to add a counter. The line you changed could have been added in the shortcode tag anyway (it's an attribute), no need to make changes in the code at 1014.