Customising HTML

  • Resolved gamerwithadegree

    (@gamerwithadegree)


    6 years, 4 months ago

    Hi,

    Is there any other tutorials for customising HTML output of the WP Popular Posts plugin?

    I am trying to achieve a certain style’ but I am having some trouble.

    Essentially, the HTML output should be nice and simple like this.

    <ul>
<li>
<a href="https://link-to-the-popular-post"><img src="show the thumbnail image in a predefined size 180x85"><span>The title of the popular post</span></a>
</li>
</ul>

    The list of posts should look something like this https://imgur.com/CmKwAQ7

    I did take a look at the filters tutorial, but that is way too complex and way too much code for what I need and it doesnt show how to get the thumbnail to display.

    I also read the grid of popular posts tutorial, not exactly what I am looking for but possibly could be altered.

    Is there any other tutorials to try and get what I am looking for?

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @gamerwithadegree,

    Customizing the HTML output of the widget is quite simple, actually.

    For a simple HTML markup like the one you posted above, using the widget’s built-in features is enough:

    1. Go to Widgets and expand the WordPress Popular Posts widget to access its settings.
    2. Under Posts settings, enable the Display post thumbnail checkbox and hit the Save button to apply changes. Then, set your desired thumbnail’s width & height.
    3. Under HTML Markup settings, enable the Use custom HTML Markup checkbox and hit the Save button to apply changes.
    4. Set the Before / after Popular Posts fields to <ul> and </ul>, respectively.
    5. Set the Post HTML Markup field to: 
      <li>
<a href="{url}">{thumb_img}<span>{text_title}</span></a>
</li>

      Notice the use of Content Tags ({url}, {thumb_img} and {text_title}). Find more via Settings > WordPress Popular Posts > Parameters, under post_html.

    6. Finally, hit the Save button once again to apply changes.
    Thread Starter gamerwithadegree

    (@gamerwithadegree)

    Hi,

    super fast support and a perfect solution as always.

    Your code worked like a charm.

    Thank you.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Don’t mention it. Glad I could help ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Customising HTML’ is closed to new replies.