A Simple layout for WordPress Blog Posts. This would show a Featured image, Title and a custom Excerpt in a clickable div.
The markup:
The css:
.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.
// 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; }