When I add image to a post, wordpress makes this html format in theme.

 <img class="aligncenter size-full wp-image-455" src="http://localhost/pb/wp-content/uploads/20116/04/huracan-yellow.jpg" alt="huracan yellow" width="2560" height="1440">

How can I change the above format to get possible html output like this, using hook or function:

 <div class="post-page-image">
  <img class="aligncenter size-full wp-image-455" src="http://localhost/pb/wp-content/uploads/2016/04/huracan-yellow.jpg" alt="huracan yellow" width="2560" height="1440">

Edit: Tried image_send_to_editor filter on same and 2016 theme, but alteration or so found.

  • 1
    use image_send_to_editor hook! – Sumit Apr 30 '16 at 8:15
  • @sumit, no success. It's giving same output html. – g13 Apr 30 '16 at 8:32
  • Did you try this answer ? – Sumit Apr 30 '16 at 8:39
  • yes, after using the same I commented. – g13 Apr 30 '16 at 11:14
  • Then please debug because that is working example! – Sumit Apr 30 '16 at 11:19

Try adding this to your functions.php - it will wrap the image in the div you want.

function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
 return '<div class="post-page-image" id="image-'.$id.'">'.$html.'</div>';
add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);
  • Thanks @Howard, I have tried the same as Sumit has told. I am not getting the intended changes. I have none of the plugins installed too. How can I debug this thing? – g13 Apr 30 '16 at 11:38
  • What is the text output from the editor when you do this? – Howard E Apr 30 '16 at 11:39
  • Editor shows the same first html code I mentioned in the question after running this script. – g13 Apr 30 '16 at 11:41
  • Where are you putting the code? – Howard E Apr 30 '16 at 11:45
  • This is my functions.php: pastebin.com/x5uVd2fc – g13 Apr 30 '16 at 11:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.