A great way to enhance the style of your images in your post is to have the title of your post wrap around your image. If you don’t understand what that means, then take a look at this post, and just about any other post on Blogussion. I got an email request on how to achieve this effect from our new friend Evan, so I decided that I would just write a post about how to do this.
To achieve this effect, you have to dive into your theme files and do a tiny amount of PHP/HTML/CSS coding. It’s not hard at all, and there is very little coding behind this method. I am sure there are other methods (if not, a plugin) to do this, but this is the way we have grown accustomed to on Blogussion.
Before we start, I just want to run through a checklist of things you need to keep in mind throughout this short little “how-to”:
- You use WordPress as your blogging platform.
- A basic understanding of Custom Fields
- You can edit a theme file
Step 1
Setting up your custom fields
The way I do this is through custom fields. Using custom fields is a great solution to this, because you can set up your image within your post screen without editing any files.
If you need help setting up custom fields, read below. If not, skip to Step 2.
In your post screen, right under your post box is another box called “Custom Fields”. Very self explanatory here: this is where you set up your custom fields.
Inside the custom fields box is an option to create a name for it. Click “Enter New” and enter the name of your custom field. Remember the name, because you will be using it every time you want your title to wrap around an image.
After you add the Name, click “Add Custom Field”.
Step 2
Adding the code
This is the part where we will be editing the theme files. You will need an FTP program (like Transmit or FileZilla) and a text editor to edit the code (but working inside of WordPress will work just fine).
Go to your themes folder, open up ‘index.php’
Look for the piece of code (usually) directly under The Loop that looks like this:
<div class=“post” id=“post-<?php the_ID(); ?>”>
Directly under that line, add this piece of code:
<div class=“excerpt”>
<?php echo get_post_meta(get_the_ID(), ‘CUSTOM_FIELD_NAME’, true); ?>
</div>
Replace the part ‘CUSTOM_FIELD_NAME’ with the name of the custom field you created in Step 1.
Make sure you repeat this process in the single.php file too. That way, the image will show when someone clicks on the title of the post.
Open up your Stylesheet (style.css)
We need to add a very short line of CSS so we can position the image in the right spot for the text to be able to wrap around it.
Paste this code anywhere in your stylesheet:
.excerpt {
float: right;
margin: 0 0 0 2.5em; /* spacing between image and text */
}
You may need to adjust the margin depending on your style sheet.
Don’t understand the margin? You can edit the margin from all different sides in just this one line. It goes in order from left to right: top, right, bottom, left. If it helps you remember, think of margin as “T.R.B.L” — trouble 
Step 3
Putting the code to use
Now that all of the code is set up, you can now use your custom fields to make the image of your choice show up.
How to make your image appear
Once you go back to the post screen and write up your post, go back to the Custom Fields screen. Click on the drop down menu and look for the custom field you created earlier and used as the name in your code. Always remember to use this custom field for all of your images, or you may find that some of your images may not show up or disappear.
Now that you have selected the name, edit the box right next to it called Value. You need to enter the image code into this section. You can use this image code below:
<img src=“URL OF IMAGE HERE” alt=“ALT TEXT HERE” title=“TITLE TEXT HERE” />
Use that every time you want to use the image. If you don’t want your title to wrap around an image, then don’t. This code will not have any effect on posts that do not use this method to show its image.
I hope you have learned something. If you have any questions, or can improve this code then let me know!
16 Discussions
It would be significantly easier, i think, to hard code the image code and just paste a URL into the value field. You lose the alt text attribute, but it’s not as annoying to create feature images.
That’s how we have it here, but for the sake of neatness in the tutorial I just decided I would add that![]()
tag in the custom field. The only thing I have against that (but I still do it) is that when you don’t have an image with text wrapping, then it will have a blank ![]()
tag in the source code. It’s not a huge issue, but like I said “neatness”.’ 
I didn’t even know we used this method
In fact, I don’t know how you managed to set it up – but all I know is ~ it looks good and I can manipulate it
Kudos to Alex on setting the Blogussion Theme up, it’s just perfect
The ALT Text Attribute is significant when it comes to SEO, because crawlers can’t obviously work out pictures and they play a major role when it comes to identification.
Also, there are many users that use devices to read out loud what is displayed on the site, and a missing ALT attribute fails here as well.
Coming back to a SEO point of view, every image without an ALT tag is a ‘minus’, especially if you have a image-based website or a lot of eye-candy imagery – your site can take a heavy hit on the SERPs.
Thank you for posting this! It answered my question very thoroughly and it it will be very helpful to me and my blog. Once again, thanks!
Evan’s last blog post..It’s A Sweet Thing
No problem man. If you need any help, don’t hesitate to ask.
Appreciate the quick guide on how to set this up. I’ve been debating how I want to setup one of my future blogs and this has given me another idea from which route to pick. Of course, having one more option perhaps I should be annoyed that it shall be that harder to choose how I want to style it
Stuart Conover’s last blog post..Review: eCommerce Action Pack by: Jon Lewis
Just keep experimenting. You’ll find something you like.
How can I do this with Thesis WordPress Theme? You can send an email to me if you respond (forgot to check the notifier checkbox). Thanks.
It’s automatically done, go to Thesis Options then Post Images and Thumbnails, you can change how the image shows up.
Oh, thank you! I recently got the Thesis Theme, and I’ve never used the post images and thumbnails before.
John Ankarström’s last blog post..Execute PHP code in posts with WordPress Plugin
Do you design/create all of the Post Images for your articles?
Nick Tart’s last blog post..‘Marketing’ Has More P’s Than ‘Hippopotamus’
Most of them, but I also use Flickr a lot to find images too.
Awesome stuff. Came to your blog from my friend’s site and wasn’t expecting to find something actually useful. was expecting to just find something random and comment for the do follow love :p being honest
.I wanted to use something like this in my about page but landed up putting the image below. didn’t realise you could just float it. been using float=”right” but seems like there are a few ways to initialise these things (come from java background so weird that you can use so many methods)
You may have not intended to do so, but I about you obtain managed to indicate the state of haul that a oceans of people are in. The common sense of inadequate to escape, but not crafty how or where, is something a straws of us are contemporary through.
Superb study, I just passed this onto a colleague who was doing just a little study on that. And he really bought me lunch simply because I found it for him smile So allow me rephrase that: Thanks for lunch!
2 trackbacks