Title: Modifying HTML markup
Last modified: September 1, 2016

---

# Modifying HTML markup

 *  Resolved [Xaliber](https://wordpress.org/support/users/xaliber/)
 * (@xaliber)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/)
 * Hello Justin, thanks for the awesome plugin.
 * I’m interested in modifying the HTML markup of the output, like adding h3 to 
   the gtc-link, changing gtc-content-thumb to a `figure` instead of `a`, and lots
   other.
 * I’m not the savviest WordPress developer though, so I’m kinda lost what exactly
   I have to do. Tried Googling, says I have to use filter, but still not too sure
   what to do. Can you help me out here?
 * Much appreciated!
 * [https://wordpress.org/plugins/google-analytics-top-posts-widget/](https://wordpress.org/plugins/google-analytics-top-posts-widget/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [Justin Sternberg](https://wordpress.org/support/users/jtsternberg/)
 * (@jtsternberg)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7479932)
 * If you provide me a before/after comparison, i can try to tell you if/how it’s
   possible.
 *  Thread Starter [Xaliber](https://wordpress.org/support/users/xaliber/)
 * (@xaliber)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7479934)
 * Sure!
 * Here is the default markup:
 *     ```
       <ol class="gtc-list">
       <li>
          <a class="gtc-content-thumb" href="/perspective/dampak-negatif-pariwisata/">
             <img width="100" height="70" src="http://localhost/youthpro/wp-content/uploads/2016/05/2016-05-miskin-dan-kaya-pariwisata-tuca-vieira-100x70.jpg" class="attachment-kopa-image-size-3 wp-post-image alignleft wp-post-image" alt="Foto: Paraisopolis, oleh Tuca Vieira.">
          </a>
          <a class="gtc-link" href="/perspective/dampak-negatif-pariwisata/">Pariwisata, Tidak Seindah yang Kita dan Pemerintah Bayangkan </a>
       </li>
       <!-- etc -->
       </ol>
       ```
   
 * I want to change it to:
 *     ```
       <ol class="gtc-list">
       <li>
          <figure class="gtc-content-thumb" href="/perspective/dampak-negatif-pariwisata/">
             <a href="/perspective/dampak-negatif-pariwisata/">
                <img width="600" height="200" src="http://localhost/youthpro/wp-content/uploads/2016/05/2016-05-miskin-dan-kaya-pariwisata-tuca-vieira-600x200.jpg" class="attachment-kopa-image-size-3 wp-post-image wp-post-image" alt="Foto: Paraisopolis, oleh Tuca Vieira.">
             </a>
          </figure>
          <h3 class="gtc-link">
             <a href="/perspective/dampak-negatif-pariwisata/">Pariwisata, Tidak Seindah yang Kita dan Pemerintah Bayangkan </a>
          </h3>
       </li>
       <!-- etc -->
       </ol>
       ```
   
 * So, as you can see, I addde `figure` to the thumbnail, added `h3` to the post
   title, changed the image size to 600×200, and removed the `alignleft` class in
   the image. Your help is really appreciated!
 *  Plugin Author [Justin Sternberg](https://wordpress.org/support/users/jtsternberg/)
 * (@jtsternberg)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7479939)
 * Image size is controlled by your shortcode attributes. Do you have a 600×200 
   image size defined with [`add_image_size()`](https://developer.wordpress.org/reference/functions/add_image_size/)?
   If so, you would set the shortcode `thumb_size` attribute to the name of that
   image size.
 * To update the thumbnail wrap, you’d do this:
 *     ```
       function modify_gtc_list_item_thumb( $html, $url, $thumb ) {
       	return '<figure class="gtc-content-thumb" href="'. $url .'"><a href="'. $url .'">' . $thumb . '</a></figure>';
       }
       add_filter( 'gtc_list_item_thumb', 'modify_gtc_list_item_thumb', 10, 3 );
       ```
   
 * And to modify the title wrap:
 *     ```
       function modify_gtc_list_item_format( $format ) {
       	return '<li>%1$s<h3 class="gtc-link"><a href="%2$s">%3$s</a></h3></li>';
       }
       add_filter( 'gtc_list_item_format', 'modify_gtc_list_item_format' );
       ```
   
 *  Plugin Author [Justin Sternberg](https://wordpress.org/support/users/jtsternberg/)
 * (@jtsternberg)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7479940)
 * Image alignment class is controlled by your shortcode attributes. You would set
   the shortcode `thumb_alignment` attribute to a blank/empty string to remove.
 *  Thread Starter [Xaliber](https://wordpress.org/support/users/xaliber/)
 * (@xaliber)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7479954)
 * Thanks for the response!
 * I tried the filter, but it doesn’t seem to work though. Nothing has changed in
   the front. Tried wrapping it with `if ( function_exists( 'gtc_list_item_thumb'))`,
   but also nothing…
 *  Plugin Author [Justin Sternberg](https://wordpress.org/support/users/jtsternberg/)
 * (@jtsternberg)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7479958)
 * That’s because GTC results/output is cached for a period of time. Add `?delete-
   trans=1` to your URL as you are testing to bypass/flush the cache.
 *  Thread Starter [Xaliber](https://wordpress.org/support/users/xaliber/)
 * (@xaliber)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7480006)
 * Works like a charm. Much appreciated!
 * One more thing, sorry. Is it possible to add the post category and the published
   date? So it would look something like,
 *     ```
       <ol class="gtc-list">
       <li>
          <figure class="gtc-content-thumb" href="/perspective/dampak-negatif-pariwisata/">
             <a href="/perspective/dampak-negatif-pariwisata/">
                <img width="600" height="200" src="http://localhost/youthpro/wp-content/uploads/2016/05/2016-05-miskin-dan-kaya-pariwisata-tuca-vieira-600x200.jpg" class="attachment-kopa-image-size-3 wp-post-image wp-post-image" alt="Foto: Paraisopolis, oleh Tuca Vieira.">
             </a>
          </figure>
          <h3 class="gtc-link">
             <a href="/perspective/dampak-negatif-pariwisata/">Pariwisata, Tidak Seindah yang Kita dan Pemerintah Bayangkan </a>
          </h3>
          <span class="gtc-category"><a href="/perspective/">Category: Perspective</a></span>
          <time class="gtc-time updated" datetime="2016-05-25T12:43:06+00:00">May 25, 2016</time>
       </li>
       <!-- etc -->
       </ol>
       ```
   
 *  Plugin Author [Justin Sternberg](https://wordpress.org/support/users/jtsternberg/)
 * (@jtsternberg)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7480074)
 * Something like this:
 *     ```
       function modify_gtc_list_item( $item_html, $page, $wppost ) {
   
       	if ( $wppost ) {
       		$date = get_the_time( 'M j, Y', $wppost );
       		$categories = get_the_category_list( 'Category: ', null, $wppost->ID );
       		$xtra_data = '<span class="gtc-category">'. $categories .'</span>';
       		$xtra_data .= '<time class="gtc-time updated" datetime="2016-05-25T12:43:06+00:00">'. $date .'</time>';
   
       		$item_html = str_replace( '</a></h3>', '</a></h3>' . $xtra_data, $item_html );
       	}
   
       	return $item_html;
       }
       add_filter( 'gtc_list_item', 'modify_gtc_list_item', 10, 3 );
       ```
   
 * I’ll leave you to modify that as needed.
 *  Thread Starter [Xaliber](https://wordpress.org/support/users/xaliber/)
 * (@xaliber)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7480088)
 * Thanks! Much appreciated, Justin. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Modifying HTML markup’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/google-analytics-top-posts-widget.
   svg)
 * [Google Analytics Top Content Widget](https://wordpress.org/plugins/google-analytics-top-posts-widget/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/google-analytics-top-posts-widget/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/google-analytics-top-posts-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/google-analytics-top-posts-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/google-analytics-top-posts-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/google-analytics-top-posts-widget/reviews/)

## Tags

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

 * 9 replies
 * 2 participants
 * Last reply from: [Xaliber](https://wordpress.org/support/users/xaliber/)
 * Last activity: [9 years, 10 months ago](https://wordpress.org/support/topic/modifying-html-markup/#post-7480088)
 * Status: resolved