How To Customize The Read More Tag

Now this is exciting. Today we get to edit some code together… which is easily my favorite part of working with WordPress. There’s just something rewarding about hitting that “Refresh” button and seeing the changes I want show up the page I’m working on. I don’t know if that sort of tweaking makes you as happy as it does me, but either way, this is going to be fun. I wrote a post the other day about using More Tags vs Manual Excerpts, so today I want to talk about customizing the Read More link created by that More Tag. This will let you style the perfect link to entice your readers to read on…

Customize The Read More Link Text

The More tag is controlled by a WordPress template tag called “the_content.” This tag has three different parameters:

• The text to be displayed by the link
• Whether or not the link should be hidden - The default for this is “FALSE,” which means the link will be displayed, so you’ll probably want to leave it blank.
• The destination file for the link - The default here is the link to the post in question, so we’ll be leaving this part blank today.

The first step is to look in your theme’s code (usually in index.php) for something similar to this:

<?php the_content('Read on...','',''); ?>

In the example above, the first parameter (link text) is set to display “Read on…”, while the second and third parameters are not set. Since they are not set their default values are automatically used (meaning the link is displayed, and it leads to the more tag of the post in question).

If you wanted to change the words “Read on…” to something more interesting, simply replace the text to say whatever you would like (but leave the quotes in place):

<?php the_content('Click here to keep reading. All the cool kids are doing it...'); ?>

Now, modifying the code like this will set the default link text, if you wanted to customize the link for each post, you would just need to edit the More tag directly from the post editor. After you add a More tag to you post, you can edit it by switching over to the HTML editor. The More tag will look like this in HTML view:

Just add in the text you want for that specific post, like so:

To display the text you want (this would obviously display “Limited Time Offer, Click Here” as the link text).

If you wanted to use the second parameter to hide the link when you use the More tag in a post, just change the second parameter, like this:

<?php the_content('Read on...','TRUE',''); ?>

Note that each parameter is enclosed in a pair of single quotes, and they are separated by commas. Blank parameters (like the third one in this example) will always use their default values.

Adding Images To The More Link

Ah, so you want to get fancy now, do you? No problem!

First off, to display the image along with the text, just include the image code in the first parameter of the template tag, like so:

<?php the_content('<img title="Read More" src="/images/minisphere.png" alt="Read More" /> Continue Reading!','',''); ?>

To display the following:

Continue Reading!

If you have an image that you want to use as a button, you can always just leave the text out and use the image by itself. You can also assign the link a specific CSS class to control things like it’s position, color, size or even background image… if you want

Enjoy!