A Simple layout for WordPress Blog Posts. This would show a Featured image, Title and a custom Excerpt in a clickable div.
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="blog-post"> <a href="<?php the_permalink(); ?>" > <div class="featured-image"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail('featured-thumb'); } else { ?> <img src="<?php bloginfo('template_url'); ?>/images/default-featured.png" /> <?php } ?> </div><!-- featured image --> <div class="featured-content"> <h1 class="entry-title"><?php the_title(); ?></h1> <?php echo get_excerpt(300); ?> </div><!-- featured content --> </a> </div><!-- blogpost --> |
The css:
|
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 |
.blog-post { width: 750px; float: left; position: relative; margin-bottom: 40px; } .blog-post a { display: block; padding: 10px; overflow: hidden; border: 5px solid #EDEDED; } .blog-post a:hover { background-color: #FFC; border: 5px solid #CCC; } .featured-image { width: 300px; height: 200px; float: left; position: relative; } .featured-content { width: 410px; float: left; position: relative; margin-left: 10px; line-height: 22px; } |
To get the custom Excerpt going, you’re going to have to add this function to your theme’s fucntions.php file.
|
1 2 3 4 5 6 7 8 9 |
// Limit the excerpt without truncating the last word. function get_excerpt($count){ $permalink = get_permalink($post->ID); $excerpt = get_the_content(); $excerpt = strip_tags($excerpt); $excerpt = substr($excerpt, 0, $count); $excerpt = $excerpt.'... read more'; return $excerpt; } |