Wordpress: Customizing your 'read more' link
Tutorial hardness:
| Rate this tutorial: |
NOTE: People code their 'read more' links in many different ways. This is just the way that I code it.
In this short tutorial I will teach you how to customize your 'read more' link on Wordpress. If you need any help understanding this tutorial after, please contact me.
What's so great about a 'read more' link? A 'read more' link is not essential, often on my layouts I don't even use a read more link. But sometimes, depending on the legnth of your blog and the set out of your website, a read more link can tie things together nicely, and neaten up the appearance of your layout.
|
|
The read more link is always found on the
index.php page, in my case it is displayed using this code below:
<?php the_content('<span class="moretag"></span>'); ?>
moretag'. Ideally, this code will be found after all the information regarding the blog styling but before the information regarding how you will navigate throughout different blogs (ie. pevious, next).
<?php comments_template(); ?>
<?php the_content('<span class="moretag"></span>'); ?>
<?php endwhile; ?>
Styling
I usually stlye my 'read more' links using headings that link and can be hovered. Below is the code that I used to customize my 'read more' link on my layout Welcome to the Carnival; this is the code that you add to your CSS:
h6 a:link, h6 a:active, h6 a:visited {
color : transparent;
background: transparent url(http://i523.photobucket.com/albums/w353/dkizzbaby/carnivallyt/readonlink.png) top no-repeat;
width: 173px;
height: 46px;
display: block;
}
h6 a:hover {
color : transparent;
background: transparent url(http://i523.photobucket.com/albums/w353/dkizzbaby/carnivallyt/readonlink.png) 0px -46px;
width: 173px;
display: block;
}
The styling can be easily edited and manipulated:
- 'H6' is the name of the heading, this could be 'H3', or even 'Readmore'.
- To learn how to work with the background images, read this tutorial.
- Other things (such as the width and height) can be edited to suit that of the background image you are using.
Adding in your 'read more' link
We've sorted out the styling, the link on theindex.php page; the only thing left to do now is to use it on your blog.
Open up your Wordpress Admin and... write. Once you've decided that you've written as much text as you want to be displayed on that page; click the 'more' link; this link can be found underneath where you write your title and on the same bar that allows you to bold and italisize your text. This is all done on the HTML tab.
After the more code appears, frame it with
<h6> (or whatever you named the heading.
<readmore><!--more--></readmore>
Good luck! ^_^
Disclaimer: I know there is an easier way to customize your read more link now and I will probably try it whenever I next decide to use the 'read more' button; but for now, this is how I do mine.
