Add HTML5 Figure and Caption Elements in WordPress

Do you need to add HTML5 Figure in WordPress if you need that you can do it in just one minute using this code snippet where let you filter by WordPress built-in hooks image_send_to_editor

Steps to use figure and caption in WordPress:

1. Open WordPress admin panel then go to Appearance > Theme Editor
2. Open theme functions.php file, if you work localhost open the same file using any code editor IDE
3. Add the following code at the bottom of the file.
4. Save the changes.

function zytheme_figure_caption($html, $id, $caption, $title, $align, $url) {
  $html5 = "<figure id='post-$id media-$id' class='align-$align'>";
  $html5 .= "<img src='$url' alt='$title' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  }
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'zytheme_figure_caption', 10, 9 );

Example that will show in forntend:

<figure>
   <img src="/picture.jpg" alt="some sample picture">
   <figcaption>here something interesting. Original by <a href="https://zytheme.com">zytheme</a></figcaption>
<figure>

Did you find the WordPress snippets in this article helpful? Share it with your friends and if you have any questions and want to ask us about it, please don’t hesitate to add comments.