Making A Template Using The Attached Image Plugin

/ Wordpress / by Paul Robinson / 0 comments
This post was published back on December 27, 2008 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

Right, I’m back after my christmas break & since I had a barrage of emails asking how to make it, I thought I’d show you how to make the layout shown in the screenshot for my new plugin the_attached_image(). Remember it’s a WordPress theme so you don’t need a huge amount of PHP knowledge, but a little would be helpful. Right let’s get to it.


I’m going to give you the full HTML/PHP to use first & then I’ll explain it.

Ok, so as HTML goes this is kinda complicated, but I’ll try my best to explain it & if you get stuck drop me a comment. First we start the WordPress loop with the standard while loop. Then we make a container, called post-more, to hold the full post. Then we make a container to hold the image which is generated by the_attached_image(). Underneath that I want some socialbookmarking icons so instead of using a plugin I just throw in some pictures & use WP’s functions to put the info into the URL’s. Next we throw in a container for the main content. I use a h1 for my title with a permalink wrapped around it, I then pop in a small tag to display the time & author that posted it. Then the content using the_content();. Underneath that I put the tags. Finally I clear out all of the floats which are define in the CSS & then I use a hr to place a divider between each post. I think I clipped that off the in the example image though.


Right, so without the CSS that HTML looks, well quite frankly it looks awful. So here we go.

Ok so that might look complicated, but it isn’t really. I think you can get the jist of what it does from just reading it through. Most of the CSS is quite easy to understand. The important parts are the floats, widths, heights & margins, everything else is just styling.

Again if you have any questions just drop me a comment. So that’s all for now. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more