How to render field HTML from tpl file I am trying to create a custom field widget and change the HTML of the field through a .tpl file or a theme function. The idea is my field will store some integer value (it will be updated by another form) and show the value in the from of a progresbar. My question is how can I change the HTML of the field. Same question is asked here also. Please help if anyone have any clue.
After a long research I got the answer how to do this. 

/**
 * Implements hook_theme().
 */
function mymodule_theme() {

return array(
'my_field' =&gt; array(
  'render element' =&gt; 'element',
  //  'template' =&gt; 'field--field-progress',
  //  'variables' =&gt; array('element' =&gt; NULL, 'field' =&gt; NULL),
   ),
  );
 }


Than render the field as below_

function theme_progressbar_field($vars){  
  $element = $vars['element'];
  $output = '';
  $output .= '&lt;div class="link-field-subrow12 clearfix"&gt;';
  $output .=' &lt;a href="#"&gt;';
  $output .='&lt;div class="clearfix  progress-percentage"&gt;';
  $output .='&lt;span class="pull-right"&gt;'.$element['myfield']['#value'].'%     &lt;/span&gt;';
  $output .='&lt;/div&gt;';
  $output .='&lt;div class="progress ui-progressbar"&gt;';
  $output .='&lt;div class="progress-bar" style="width:'.$element['myfield']   ['#value'].'%"&gt;&lt;/div&gt;';
  $output .='&lt;/div&gt;';
  $output .='&lt;/a&gt;' ;
  $output .= '&lt;/div&gt;';
  return $output;
}