Ready to get started?Download WordPress


WordPress Popular Posts
[resolved] Adding post "Position" to each list item (9 posts)

  1. mura-
    Posted 1 year ago #


    I don't know what I was thinking when I opened the original thread... I was extremely dense. I managed to work around the output and solved my first problem wrapping the title around an extra div.

    Now I just need to find a way to add a position number to each list item as it's shown in the original example below.


    Is there a way to achieve that without using an ordered list? Maybe a function counting the number of items?

    Original Post:

    I've been reading through the forums to get an answer for my issues but I found nothing yet, I hope it wasn't already asked.

    I'm trying to make a "Most read" list on my site using WPP Plugin and I'm finding some trouble to adapt the list to my needs. I made a custom CSS using a "grid" pattern, and some CSS transitions to display the posts this way: http://weblab.hol.es/template.html.

    My template uses unlinked images, as I've styled the <a> tags to behave as an absolutely positioned block with z-index. To achieve the movement effect I also need to place the link tags around my whole block of text (<a href><span>text1</span><span>title</span></a>) As the plugin works, my list behaves like this: http://weblab.hol.es/template2.html (first list item changed to show the difference) Is there any way I can change those twho behaviours? I'm using the template tag with the following parameters:

    <?php wpp_get_mostpopular("range=weekly&limit=6&order_by=avg&post_type=post&title_length=50&thumbnail_width=190&thumbnail_height=190&wpp_start='<ul class=\"masleido\">'&wpp_end='</ul>'&post_start='<li>'&post_end='</li>'&do_pattern=1&pattern_form='<span class=\"numero\">1</span><span>{title}</span>{image}'"); ?>


  2. Héctor Cabrera
    Plugin Author

    Posted 1 year ago #

    Hi there,

    Interesting, I like the idea! However, at the moment I can only think of two possible solutions:

    1. Hack the plugin's code:
    If you're using the latest version of the plugin, find $thumb = "<a href=\"". $permalink ."\" class=\"wpp-thumbnail\" title=\"{$title}\">"; and comment it/erase it. Also, you need to comment/delete the closing tag as well $thumb .= "</a>"; (lines 1071 and 1103, respectively).

    2. Use Javascript (jQuery would be my choice for this) to remove the <a> tags from the thumbnail:

    Here's an example:

    // find all links with images in it
    $("ul.masleido li a:has(img)").each(function() {
       var target = $(this).attr("href");
       $(this).parent().wrapInner('<a href="'+target+'"></a>');

    The custom HTML markup feature is not as flexible as I'd like it to be so it's going to be revamped to allow more customizations in the near future, but for now this is all I can think of.

  3. mura-
    Posted 1 year ago #

    Hey! Thanks so much for answering, gracias :)

    I already found a way around the links situation using an extra div in pattern_form, so everything's OK there :)

    The only thing I need to figure out now is how to add something like this "<span class="number">*Post's position*</span>" before {title}


    <li><span class="number">1</span><a...>post title</a><img src=thumbnail /></li>
    <li><span class="number">2</span><a...>post title</a><img src=thumbnail /></li>
    <li><span class="number">2</span><a...>post title</a><img src=thumbnail /></li>
  4. Héctor Cabrera
    Plugin Author

    Posted 1 year ago #

    With that, you need Javascript as the plugin doesn't keep a count of the posts. Might get back later with an example as I'm going home now.

  5. mura-
    Posted 1 year ago #

    Thanks Héctor!

    After some testing I found a quick (and probably stupid) solution. For now it works regardless of how you list your posts. Around line 1007 in wordpress-popular-posts.php, right before the foreach where the list is composed I declared a variable ($position) and gave it a value ("1"). Then, where the title is constructed I edited $title_sub adding "<span class\"number\">".$position."</span>". right before strip_tags($title). Then I add "1" to $position variable ($position++)

    $title_sub = "<span class=\"numero\">".$position."</span>".strip_tags($title);

    It's working for now :P

  6. Héctor Cabrera
    Plugin Author

    Posted 1 year ago #

    Easy hack hehe Might consider including it on the next release.


  7. mura-
    Posted 1 year ago #

    Hey! Just in case you wanna watch the results (I'm still working on the CSS, I don't know why it "shrinks" the title instead :/) hit hercios (punto) es :) Thanks for your great plug-in

  8. Héctor Cabrera
    Plugin Author

    Posted 1 year ago #

    Damn, that looks awesome!

    Actually, since the little chat we had here I was kinda considering adding predefined design "templates" so users could choose one that fits their site better - I really like what you did there, so if I decide to include such functionality I'd like to borrow your example. Would that be OK with you?

  9. mura-
    Posted 1 year ago #

    Absolutely! you can use the template as you please :)

    In fact, here are two clean samples (without the added div, they'll work with an unlinked thumbnail)


Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic