Title: Customising HTML
Last modified: July 3, 2018

---

# Customising HTML

 *  Resolved [gamerwithadegree](https://wordpress.org/support/users/gamerwithadegree/)
 * (@gamerwithadegree)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/customising-html-2/)
 * 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](https://imgur.com/CmKwAQ7)
 * I did take a look at the [filters](https://github.com/cabrerahector/wordpress-popular-posts/wiki/3.-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](https://cabrerahector.com/wordpress/how-to-make-a-grid-of-popular-posts-with-thumbnails/),
   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](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/customising-html-2/#post-10458673)
 * Hi [@gamerwithadegree](https://wordpress.org/support/users/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:
    6.     ```
           <li>
           <a href="{url}">{thumb_img}<span>{text_title}</span></a>
           </li>
           ```
       
    7. Notice the use of **Content Tags** (`{url}`, `{thumb_img}` and `{text_title}`).
       Find more via **Settings > WordPress Popular Posts > Parameters**, under **post_html**.
    8. Finally, hit the **Save** button once again to apply changes.
 *  Thread Starter [gamerwithadegree](https://wordpress.org/support/users/gamerwithadegree/)
 * (@gamerwithadegree)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/customising-html-2/#post-10459753)
 * Hi,
 * super fast support and a perfect solution as always.
 * Your code worked like a charm.
 * Thank you.
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/customising-html-2/#post-10459762)
 * 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.

 * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659)
 * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/)

## Tags

 * [custom](https://wordpress.org/support/topic-tag/custom/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * 3 replies
 * 2 participants
 * Last reply from: [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/customising-html-2/#post-10459762)
 * Status: resolved