46 Responses

  1. Pothi
    Pothi Published |

    I never knew these info (except for image caption :)). Thanks for the details.

  2. Weekly WordPress Review » WPCanada
  3. Paul
    Paul Published |

    Thanks a lot for the code to remove the 10px injected by wordpress.

    as for the HTML5’s “ tag, should this be done by core ?

    1. simonlawrence
      simonlawrence Published |

      It could be a while before HTML5 is completely integrated into core. I see no harm in theme developers adding it in where possible now, I’m going to tweak Justin’s function and use it in all my teams until WordPress catches up.

  4. Erlend Sogge Heggen
    Erlend Sogge Heggen Published |

    Very handy!

    Do you know anything about captions and SEO? I would imagine search engines might appreciate that type of extra description to identify content.

  5. WordPress 3.2 | WordPress-Buch
    WordPress 3.2 | WordPress-Buch at |
  6. vayu
    vayu Published |

    Very informative – thanks Justin. 🙂

    I was wondering which code syntax highlighter you use on this site?


  7. Matteo
    Matteo Published |

    Hi there, I have a problem with my captions and you can maybe help.

    whenever I’m adding captions to my images, WP incapsulate them in a div that looks like this:

    All my images are uploaded at maximum resolution and then scaled down with different stylesheets according to screen size but the caption always takes the width of the original picture.

    How can I overcome this?

    I obtained a few results by imposing an !important declaration on the various stylesheets but this is not ideal as pictures might have different widths and I would have to rethink the entire layout which is otherwise fine without captions.

    Setting manually the width to auto not only is not recommended but it won’t work either!



    1. Eva Collados
      Eva Collados Published |

      Hi, really useful article. I found it after long research

      I have the same issue as Matteo, i would like to place two image captions side by side on a responsive site. To do so i wanted to override the width in pixels with percentages, 50%/50% or whatever depending the case.

      First solution i thought was adding a class for all these side by side captions and set the width with an “!important” declaration. But as Carlo Rizzante said this doesn’t work.

      So my questions are:

      Is there a way to ad a new class to some captions other than the default “alignleft”, etc?

      Justin, you said that changing the caption width was not necessary to make them responsive. I think that’s the case when i have just one. How do i solve responsiveness for more than one side by side?

      Sorry about my english and thanks in advance. I’m a beginner so may be i´m misunderstood.

  8. simonlawrence
    simonlawrence Published |

    Justin, I tried your video caption code but WordPress removed the caption when switching between the visual and HTML editor, or saving when in the visual editor.

  9. Fluid Images with Captions | Philip Walton
  10. Loren Swendsen
    Loren Swendsen Published |

    Hey just a quick word to say thanks for this tutorial! The extra 10px added by the caption shortcode had indeed plagued me on a couple past projects. I really appreciate your solution.

  11. Maura McGurk
    Maura McGurk Published |

    Thanks for explaining more about captions. Do you have a solution for coding “hard returns” into a captions, so that I can break the line where I want, rather than just rely on the text wrap? I’ve been pulling my hair out all day over this one–thanks in advance for your advice.

  12. Tushar
    Tushar Published |

    I am using Alltuts wordpress theme for my website. When i set caption to any image it does not shown at all. even that image cannot locate at center with caption. Please help me, is there any need to do with my theme CSS?

  13. Charley
    Charley Published |

    I’m trying to get my TinyMCE/visual editor to display exactly like my front-end site. I’ve removed the 10px with this tutorial for the front-end. How do I remove it on the TinyMCE/visual editor?

  14. TODO List | Sune Frederiksen
    TODO List | Sune Frederiksen at |
  15. jim
    jim Published |

    Thanks a lot for posting this. I’ve had this really bizarre problem with WP eating my caption tags and not displaying them correctly, including converting them to unqualified div tags as above. I think your module plus the suggestion for converting them to straight-up html5 figure and figcaption tags is a much more elegant solution. Namaste!

  16. Tech Notes: WordPress Featured Images with Captions - Oikos
  17. Jay
    Jay Published |

    How do you modify the image if it doesn’t have a caption? I’d like to wrap the image/linked image in a div if there is no caption.

  18. pinkocrat
    pinkocrat Published |

    Thanks Justin! Big help.

  19. Craig
    Craig Published |

    Great tutorial, thank you, it has proven useful. I discovered it through the Roots theme, which adds the as you suggested.

    I’m currently trying unsuccessfully to add the description field into your code, I want both the caption and the image description to show. But being no code fundi, it’s a struggle.

  20. WordPress [caption] 多出来10px的问题 – 木瓜园
  21. Clayton Nichols
    Clayton Nichols Published |

    Awesome stuff. I was having some caption issues on my site, until I realized that I needed all three and not just the text portion. Thanks for posting this!

  22. Josh
    Josh Published |

    Thanks for the help and fantastic blog. I’ve learned a lot through it!

    I know this post is old but I’m having issues.

    For some reason the theme we are using is hiding the captions given to images…

    Also when I try to just do it via tables, the table won’t follow the size of the image and I have to place that manually, leading to terrible looking borders around images, all for trying to attach a caption…

  23. Philip King
    Philip King Published |

    Many thanks for this article Justin, I’ve been trying to get [caption] and [embed] working with YouTube videos for hours.

    It’s just a pitty this facility is not available from the [Add Media] button. Maybe WordPress will include this in a future issue.

    Once again, thanks for a great article.

    Philip King, KingSolutions

  24. Carlo Rizzante
    Carlo Rizzante Published |

    Indeed the mandatory width parameter is quite annoying and I hit on it when working on my first fully responsive theme. Now I know how to remove it!

    However, I’m puzzled. If I re-write the function for the shortcode [caption] as you showed in here, so that the “width” becomes unnecessary, then changing theme in future will likely break the shortcode.

    Any suggestion about how to proceed?

    Anyway, thanks for the post. Cheers!

  25. walltrue
    walltrue Published |

    Hi, I am running a wallpaper site http://walltrue.com/

    I want some function that adds description, caption, alt for each image based on the image title.

    Please let me know what function will work. It’s simple, I have image name, or image title, so get the image name/title and add that to image description, alt, caption for each image.


  26. WordPress image fields and their uses
  27. Rhys
    Rhys Published |

    I’m not an expert but I believe, even if you want a spacing/margin around your image it is good to remove this silly 10px and instead use css how it should be:


    box-sizing: content-box;

    padding: 5px 5px 0px;

    You can then remove the margins from the img.

    That way you maintain the correct maximum image size and also maintain the correct margin when the browser or column is resized.

    1. Rhys
      Rhys Published |

      Oh sorry, {box-sizing: content-box;} with padding is going to cause it to overflow its parent.

      Can’t win huh.

  28. Rhys
    Rhys Published |

    On a slightly different note, does anyone else notice the caption markup is different in the visual editor?

    In the visual editor it is describing it as a definition list (like the WP gallery) and also using different classes.

    I only noticed because the usual caption CSS selectors was not working in the editor window.

  29. tschoepler
    tschoepler Published |

    Thank’s for the info. The 10px drove me crazy ; )

  30. Nico
    Nico Published |


    Great stuff!

    I’m struggling to display captions and image description on an image slider that comes with a theme I got.


    Do you think it’s possible to display both captions and descriptions? Could you point at the right direction to get the code to work?

    Thanks a lot!


  31. No caption field in the wordpress media upload - HelpDesk
  32. shambles
    shambles Published |

    Wow! Thank you! I just spent over an hour trying to get one of the subheadings on my site to resemble the caption style. I didn’t realize you could apply the caption style to any embedded element.

  33. No caption field in the wordpress media upload - Technology
  34. John Montgomery
    John Montgomery Published |

    FYI…This seems to not work in the current 4.1 release.

    [caption width="600" caption="A football video"][video width="640" height="360" mp4="http://dev.fxguide/wp-content/uploads/2015/03/Chappie_graysuit.mp4"][/video][/caption]

    If you switch back and forth between the visual and text editor — much of this gets blown away…

    I’ve tried this with no plugins and the twentyfifteen theme…

  35. Lam
    Lam Published |

    My slideshow’s images have captions and they’re quite long. When I preview it, the words are simply cut. How can I even solve this?

  36. Shad
    Shad Published |

    I am using the caption shortcode but I have to insert links into the caption, it looks fine in the edit page but when I upload it, every link appears in a newline, how can I fix this?

  37. Matt
    Matt Published |

    I just used this code to add an extra class to a caption for responsive purposes. Thanks!

Comments are closed.