How to customize More tag in WordPress


One of the widely used WordPress is the More tag. This tag is used split a post so that only a portion of the post is
displayed on the front page. When WordPress sees More tag, it inserts a link to next line of the post. By default
the text of the link is “Read more”. But you can easily change the text and appearance of the link.

Just follow these simple steps to customize your More tag.

  • Log on to your blog as administartor.
  • From your dashboard, click on Appearacnce->Edit->. This will bring up a text editor and a list of your theme files.
  • Select the file that renders your homepage that is index.php.
  • In the text editor, now search for <?php the_content(_(‘Read more’));?> in the file.
  • Replace the phrase ‘Read more’ with whatever text you like. I changed it to “Continue Reading” on this blog.
  • Click on update file button to save the changes.
  • Visit your homepage. Your new text should greet you.

But that is not all. If you want you can also change the style of the link. You can add background image, use different color or anything else that you can accomplish using CSS styles and your imagination.
By default WordPress associates a CSS class “more-link” to the ‘more’ link. So to change the appearance of this link you can add a new class in your stylesheet or if you already have this class just change it to make this link the way you want.
For instance I added following styles for my more link.


a.more-link:link{

text-transform:capitalize;

float:right;

text-decoration:none;

border-bottom: 1px dotted #ba0000;

font-weight:bold;



}

a.more-link:hover{

text-decoration:none;

border-bottom:none;

font-weight:normal;

color:#0000FF;

}


Enjoy.