Style WordPress images and captions

When inserting an image into the rich text editor you get the following:

The WordPress logo

When viewing the code in the HTML tab you see that the following Shortcode is created:

[ caption id="attachment_75" align="alignnone" width="150" caption="The WordPress logo" ]<a href="https://wpquicktips.files.wordpress.com/2010/03/blue-l.png"><img class="size-full wp-image-75" title="WordPress" src="https://wpquicktips.files.wordpress.com/2010/03/blue-l.png" alt="" width="150" height="150" /></a>[ /caption ]

And the Shortcode creates the following HTML:

<div style="width: 160px;" class="wp-caption alignnone" id="attachment_75"><a href="https://wpquicktips.files.wordpress.com/2010/03/blue-l.png"><img height="150" width="150" alt="" src="https://wpquicktips.files.wordpress.com/2010/03/blue-l.png?w=150&amp;h=150" title="WordPress" class="size-full wp-image-75"></a><p class="wp-caption-text">The WordPress logo</p></div>

When developing new themes it really helps to use the existing markup. You could redo the HTML if you wanted by using filters, but why invent the wheel twice?

About these ads
About

Web Developer @ Oakwood Creative - www.oakwood.se

Tagged with: , ,
Posted in Beginner
2 comments on “Style WordPress images and captions
  1. Iago says:

    HOW do I remove that style=”width: 160px;”

    I have searched to much :(

    • Vincent says:

      The HTML is run through a filter, so you could filter the HTML and do a preg_replace or something perhaps? The style attribute is needed if you want to align a image to the right for example. Otherwise the caption might expand the box and make everything look terrible!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About

WordPress Quick Tips is a blog supplying great tips about WordPress.

We hope to create a great knowledge resource for WordPress developers as well as serving a reminder for all the forgetful ones.

The blog is created and run by Vincent of Oakwood Creative

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 120 other followers

Follow

Get every new post delivered to your Inbox.

Join 120 other followers

%d bloggers like this: