Making A Template Using The Attached Image Plugin
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.
The HTML/PHP
I’m going to give you the full HTML/PHP to use first & then I’ll explain it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php while (have_posts()) : the_post(); ?> <div class="post-more" id="post-<?php the_ID(); ?>"> <div class="post-more-image"> <?php the_attached_image('img_size=medium&href=true&link=post'); ?> <div class="post-more-share-this"> <div class="share-this">SHARE THIS:</div> <a href="http://del.icio.us/post?url=<?php the_permalink();?>&title=<?php the_title() ?>"><img src="<?php bloginfo('template_url'); ?>/img/social-icons/delicious.png" class="social-bookmark" /></a><a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink();?>&media=image&topic=celebrity&title=<?php _e(urlencode(the_title_attribute('echo=0'))); ?>"><img src="<?php bloginfo('template_url'); ?>/img/social-icons/digg.png" class="social-bookmark" /></a><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/img/social-icons/stumbleupon.png" class="social-bookmark" /></a><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>"><img src="<?php bloginfo('template_url'); ?>/img/social-icons/facebook.png" class="social-bookmark" /></a> </div> </div> <div class="post-more-text-content"> <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php the_title(); ?> </a></h1> <small class="date-posted">Posted on <?php the_time('jS F, Y @ g:ia'); ?> by <?php the_author(); ?></small> <?php the_content('READ THE REST OF THIS ENTRY »'); ?> <div class="the-tags"> <?php the_tags(); ?> </div> </div> <div class="clear"></div> </div> <hr class="more-post-divide" /> <?php endwhile; ?> |
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.
The CSS
Right, so without the CSS that HTML looks, well quite frankly it looks awful. So here we go.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
small.date-posted { color:#AAAAAA; font-size:9px; } div.post-more-text-content { width:360px; float:left; } div.post-more-text-content h1 { margin:0 0 5px 0; padding:0 0 7px 0; font-size:18px; line-height:21px; letter-spacing:1px; border-bottom:1px solid #AA6783; } div.post-more-text-content p { margin:15px 0 0 0; } div.the-tags { font-size:9px; } hr.more-post-divide { color:#393939; background-color:#393939; height:1px; width:100%; border:0px; } div.post-more-image { margin:0 25px 0 0; float:left; } div.post-more-share-this { margin-top:15px; } div.post-more-share-this .share-this { font-size:8px; padding-bottom:10px; } div.post-more-image img.post-image { width:200px; height:200px; border:1px solid #393939; } div.post-more-image img.post-image:hover { border:1px solid #6f6f6f; } div.post-more { margin:25px 0 25px 0; width:604px; } .post-image { width:300px; height:250px; } .clear { clear:both; } |
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. 🙂
