How to Create a Stylish Post Title on your Homepage

23rd Jan 2011 | Posted by Eko S. | 4 Comments

To grab the visitors attention on your site also make your blog more interesting and outstanding from the crowd of others you should think over the two main things: content and design. In this article, we’ll learn how to design your post title so it looks more stylish.

Step 1: Adding WordPress image thumbnail function

In this tutorial we’ll use the WordPress post thumbnail function, please check our previous tutorial for how to activate this function.

Step 2: Edit file loop.php

In this tutorial we’ll use TwentyTen theme as a case study.
After the wordpress thumbnail function has been activated. Then you must insert the image tag into your homepage loop, open file loop.php then insert this image tag

<?php the_post_thumbnail(); ?>

Like this (in line 126)

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>
			<?php the_post_thumbnail(); ?>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

Step 3: Create the framework

We just insert wordpress image thumbnail function on the loop, now we’ll make the framework so the post title looks stylish.
Please open file loop.php again, go to line 126 then edit your file like this

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>

		<div class="post-thumbnail-title">
			<?php the_post_thumbnail(); ?>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
		</div>

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

Step 4: Styling the CSS

Now we will style the CSS. Open the style.css and at the very bottom add:

.post-thumbnail-title {
	border: 1px solid #ccc; 
	height: 150px; 
	padding: 4px; 
	width: 600px; 
	position: relative;
	}
 #content .post-thumbnail-title h2.entry-title {
	position: absolute; 
	left: 0; 
	bottom: 0; 
	background: #FFF; 
	padding: 5px 10px; 
	margin-right: 30px; 
	-webkit-border-top-right-radius: 7px; 
	-moz-border-radius-topright: 7px; 
	border-top-right-radius: 7px;
	}

Step 5: Insert the image as thumbnail

After we finished creating the framework, now we’ll insert an image as thumbnail for each post. But before that you must prepare your images first, we strongly recommend that your image size 600x150px like this:
How to Create a Stylish Post Title on your Homepage

Go to your wordpress dashboard > Posts and edit one of your articles. Then insert your image on post thumbnail section below the categories
How to Create a Stylish Post Title on your Homepage

The Result

If this all goes according to plan, it should look rather nice, something similar to this (with your own content of course):
How to Create Stylish Post Title on your Homepage

That’s All. Hope it useful. And when it comes to adding other style on our post titles, your own creativity is the only limit! Feel free to share your ideas in the comments!