The home page of your blog is prime real estate. You spend hours thinking up clever headlines for your posts, but they all end up pushed way down in a ridiculously long home page that takes far too long to scale (even with the most aggressive spins of the mouse’s scroll wheel).
Enter: the More tag. A handy little icon built in to the post editor’s quicktags panel (the little toolbar above the content input area).
You can use this button to cut off how much content appears on your blog page. It automatically adds a link at the bottom of the excerpt to read the rest of the post. By default, the link reads “more…”. Pretty bland if you ask me. Luckily, WordPress has made it relatively easy to customize the tag to say exactly what you want.
The parameters for the more tag are contained in
the_content() tag. Changing the text that appears is as simple as adding it in the tag. For example, if I wanted my more tag to read “Continue Reading”, the code would look like this:
<?php the_content( 'Continue Reading' ); ?>
Now that you have input the text that you want to see, you can go even further by styling that text. Add a class to the more tag like this:
<?php the_content( '<span class="moretagstyle">Click Here to Read More...</span>' ); ?>
Now go to your style.css file and add the class. For example, to italicize the text, the css would look like this:
This is where you can let your imagination go wild. You could make the lettering uppercase, bold, a different color, or even different size. Those things aren’t crazy enough for you? Try adding one of the character entities that are built in to WordPress, like the double arrows.
<?php the_content( 'Read More »' ); ?>
Looks like: Read More »
You can see more of these on the WordPress Character Entities page.