Posted on 8 September, 2008 By Kim Woodbridge 20 Comments

How to Frame Images in WordPress Posts with CSS

Framing

If you would like to frame the images in your blog posts like the one to the right, all you need to do is add a couple of lines to your CSS file and add the class attribute to your image tags. Don’t worry, don’t worry! I plan to provide step by step instructions.

Once this is set up, all of your images will be framed and padded in the same way, which really helps in making a blog look more professional.

OK – here we go!

**Note – I am using the most current version of WordPress. If you are using 2.3 or lower, some of the settings in the Admin area may be in different locations. Also, please upgrade!! If you need assistance with that, send me an email or a direct message on Twitter and we can discuss. My contact information is in the sidebar to the right.

Go to Design > Theme Editor > styles.css
Copy all of the text in this file and paste it into Word or your preferred text editor. I always back up the original in case I make a mistake or don’t like the changes. The backup allows me to quickly paste the original text back into the file.

Add the following code to your style sheet and save

.left { float:left; }
.right { float:right; }
.frame { border: 2px solid #aaa; padding: 10px; }
img.left { margin: 0 10px 10px 0; }
img.right { margin: 0 0 10x 10px; }

If you are unable to save and get the message in the screenshot below, you have a permissions issue with your theme files. I am not discussing permissions in this article but feel free to leave a comment or send me an email and I’ll let you know how to fix this.

Now you want to write a new post. Add an image. If you use the visual text editor, switch to the HTML one for the next part.
The following is an example of html code for your image.

[sourcecode language='html'][/sourcecode]

In order to use the css code we added to your style sheet, add the following to the image code.

class=”left frame”

If you want the image placed on the right rather than the left, than simply change the word left in the code to right.
The image code will now look like:

[sourcecode language='html'] height="31" class="left frame" />[/sourcecode]

All of your images will have the same frame, if you add this class attribute to the image tag.
You can change the way the frame looks by editing the code that we added to the css file. For example:

.frame { border: 2px solid #aaa; padding: 10px; }
You can make the frame border bigger or smaller by changing the 2px to a different number. Or you can change the color of the frame be editing the #aaa hex code.

That’s all there is to it. Just add a couple of lines to your style sheet and the class attribute to your image code and you will have professional framed images throughout your site.

photo credit: sveinhal

How to Use the WordPress Redirection Plugin When Moving Site to a New Domain or Directory

New System Requirements for WordPress 3.2

How to Hide a Facebook Tab from Being Displayed on Your Facebook Page

Posted In : WordPress Tips

Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter.

Pin It

20 Responses to “How to Frame Images in WordPress Posts with CSS”

Vered - MomGrind
September 8, 2008 at 2:16 pm

You are SO TECHIE.

I really admire that.

Vered – MomGrind’s last blog post – You Read Women’s Magazines? I’ll Give You Ten Reasons To Stop

Reply
Kim Woodbridge
September 8, 2008 at 2:19 pm

Vered – Thanks! We all have different strengths. I enjoy trying new things out on the blog way more than writing about how I did them :-)

Reply
Joel Lundgren (swe)
February 12, 2009 at 5:50 am

Is it possible to make this a standard in all posted pictures?

Joel Lundgren (swe)´s last blog post – Facebook + WordPress = sant

Reply
- Kim Woodbridge
  February 12, 2009 at 7:54 am
  
  Hi Joel – Yes, you can modify the code so all pictures are aligned
  and framed. When you add a picture to a post via WordPress and
  select the alignment a class of aligncenter, alignleft or alignright is added to the code.
  So, you could add something like this to your stylesheet file.
  
  .alignleft { padding: 3px; margin: 0.5em 15px 0.5em 0; border: 3px double #bbb; float: left; clear: left; }
  
  .alignright { padding: 3px; margin: 0.5em 0 0.5em 15px; border: 3px double #bbb; float: right; clear: right; }
  
  .aligncenter { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb;
  float: none; clear: both; }
  
  Keep in mind that if you have images in your sidebar it will align and frame them too and
  sometimes that ends up looking odd.
  
  Reply
Joel Lundgren (swe)
February 13, 2009 at 2:13 am

Spank you very much!

Joel Lundgren (swe)´s last blog post – Att bryta gamla mönster

Reply
Amanda Seyderhelm
March 25, 2009 at 9:55 am

Kim, I have a permissions issue with my theme files, and am unable to save changes. How do I fix this please? Thanks for this helpful post on posting flickr images to wordpress blog. Amanda

Amanda Seyderhelm´s last blog post – How Do We Develop Our Intuition?

Reply
- Kim Woodbridge
  March 25, 2009 at 10:21 am
  
  Hi Amanda – You need to change the file permissions on your theme files. How do you access them? Via ftp, cpanel’s file manager or another way? Here is some information about changing file permissions
  http://codex.wordpress.org/Changing_File_Permissions
  
  If I know how you access your files I can also provide better information.
  
  Reply
Edgar
July 15, 2009 at 10:57 am

Hello

Thanks for sharing tips like this one, it really comes handy when working in WP.
Now i have a question: Can we do the same thing but instead of frame pictures i want to frame some areas o text in a WP post ?

Is this possible ?

Will be very glad if anyone can help me with this !

Thanks,
Edgar.
.-= Edgar´s last blog ..Season 8 Episode 3 – Toxic =-.

Reply
- Kim Woodbridge
  July 15, 2009 at 11:28 am
  
  Hi Edgar,
  
  Do you use the visual or html editor? You can create a CSS class that puts borders around text or another object and then call that class for the item that you want to frame.
  
  For example,
  
  .customframe {border: 1px solid #000;}
  
  Then around the text you could do
  <div class=”customframe”>
  text here
  </div>
  
  Reply
  - Edgar
    July 15, 2009 at 2:46 pm
    
    Hello Kim Thanks for your reply !
    
    The truth is that i’m a bit newbie on this ….
    
    I’m working in a wordpress blog…
    
    Where do i have to put the code you have mentioned in the CSS or in the html part of the post ?
    
    Tahnks in advance !
    Edgar.
    .-= Edgar´s last blog ..Season 8 Episode 3 – Toxic =-.
    
    Reply
Kim Woodbridge
July 15, 2009 at 3:11 pm

Edgar – The first part goes in the style.css file

.customframe {border: 1px solid #000;}

The second part goes in the html around the text that you want to frame.

Keep in mind the css is just an example – it will make a thin black border around the text block.

Reply
- Edgar
  July 15, 2009 at 3:28 pm
  
  Hello Kim
  
  I did it already but it doesn’t work …
  maybe i’m puting the code .customframe {border: 1px solid #000;} in the wrong place in the style.css file ?
  .-= Edgar´s last blog ..Season 8 Episode 3 – Toxic =-.
  
  Reply
  - Kim Woodbridge
    July 16, 2009 at 9:22 am
    
    Hi – It shouldn’t matter where in the CSS file the code is placed as
    long as it is formatted correctly. I’m not sure why it’s not working though.
    
    Reply
    - Edgar
      July 16, 2009 at 11:49 am
      
      Hello Kim … Thanks again for your help !
      Please check the post in question where i want to frame diferent areas inside the post:
      
      http://smallville-episodes.com/season-8/smallville-season-8/
      
      If you check the link will take you to the post….
      I want to frame every episode ( Text with the pic of the tv )
      Maybe it’s not possible ?
      
      Thanks for your help !
      Edgar.
      .-= Edgar´s last blog ..Season 8 Episode 22 – Doomsday =-.
      
      Reply
      - Kim Woodbridge
        July 16, 2009 at 12:30 pm
        
        In the code for Smallville Season 8 you have the following
        
        You have two sets of doublequotes around the name of the class. Remove those and retype them. Hopefully that will work.
        
        Reply
Edgar
July 16, 2009 at 3:22 pm

Kim Thank you so much !
You’re a star !!!

At the end it has worked !! Just what i was looking for….

Thank you !
.-= Edgar´s last blog ..Season 8 Episode 22 – Doomsday =-.

Reply
- Kim Woodbridge
  July 16, 2009 at 3:36 pm
  
  Edgar – Yay! It looks great.
  
  Reply
Anna
May 28, 2010 at 10:58 am

Hello!
Any idea why is not working on mine?
I did everything you said

Thank you!
A

Reply
- Kim Woodbridge
  May 28, 2010 at 4:13 pm
  
  Hi Anna – I really can’t tell why it isn’t working. It’s possible that there is already CSS code for images, which is conflicting with this code.
  
  Reply
Anna
May 29, 2010 at 6:27 am

Hello Kim
Thank you so much for your reply, I might be missing something

That is how the code of a pic looks like on my blog, where should I put the code for the frame.

Sorry my english sucks! :P
.-= Anna´s last blog ..Submit YOUR Style =-.

Reply