How to Style the Read More Link in WordPress
Last week I wrote about using the WordPress More tag to control the content displayed on the front page of your blog.
As I mentioned, you can have the More link say anything you want. WordPress also provides a CSS class for the more link that you can use to style it.
When you use the more tag, you are breaking apart the content of the post in a spot that you determine. The content tag will look like this:
<?php the_content('continue'); ?>
Continue is what mine says but you can change the text between the single quotes to say anything you want. That text will be the link. Stratos has also written a tutorial on how you can have the title of your post in the read more link.
WordPress also provides the CSS class .more-link that can be used to style the Read More link.
Mine looks like the following:
.more-link {
text-align:right;
float:right;
font-size:10px;
width:72px;
height:17px;
text-transform:uppercase;
padding-right:10px;
margin-bottom:8px;
background:url(images/b_more.png) no-repeat right top;
}
This is placing the link in the layout, giving it a font size, making the text uppercase, and placing an image behind it. You can use this class to style you link however you want or make it match your theme. This code goes in your style sheet or style.css file.
If you want to learn more about CSS and what you can use to style your links and other features of your blog, W3Schools is a great place to start.
photo credit: Barry Yanowitz
Related posts:
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter.
August 13, 2009 at 12:10 am
Excellent tip and something I wondered about with my previous theme, but my current theme seems to make the “read more” link more visible and inviting. Thanks!
.-= Rick Castellini´s last blog ..Email of the Week – 014 =-.
August 13, 2009 at 12:32 am
OK, I’m a dolt when it comes to coding…I tried to implement the tip found in the tip at stratos that you linked here and couldn’t get it to work. I almost always truncate my articles on the home page and would like to use that tip. Any ideas?
Thanks.
.-= Rick Castellini´s last blog ..Email of the Week – 014 =-.
August 13, 2009 at 8:25 am
Hi Rick – I haven’t actually tried it myself. Did you get an error or did nothing happen? Sometimes a fix is a simple as retyping the single quotes.
August 13, 2009 at 11:27 am
Thanks Kim, that code at Template Tags you gave me worked…I still have the training wheels firmly in place, but it is fun learning!
.-= Rick´s last blog ..Email of the Week – 014 =-.
August 13, 2009 at 11:39 am
It’s the same code – sometimes when code is copied there is a problem with the single quotes. I’m glad it’s working!
August 13, 2009 at 12:53 pm
Hey Kim, thanks for including my link. Actually i know i have a problem with my code highlighter. When people copy, they always have a problem! Sorry for that Rick ;)
.-= stratosg´s last blog ..Intrusion detection with Perl =-.
August 13, 2009 at 4:28 pm
Hi Stratos – Copying code right from someone’s site is often a pain. I’ve learned that if it doesn’t work the first time to check the single quotes – it’s almost always the problem :-)
August 13, 2009 at 12:57 pm
I love the W3Schools website! I has saved me from disaster when updating the HTML and CSS on my website and blog. I’m not sure if I will style the read more link, but its good to know that its possible.
.-= carla | green and chic´s last blog ..Should I Continue: Blogging =-.
August 13, 2009 at 4:29 pm
Hi Carla – Whenever I search for some CSS that I can’t remember I always hit the W3Schools site so I figured they were good to link too.
August 14, 2009 at 12:36 pm
Kim,
Thanks for the tip. I will try the title one.
.-= Nihar´s last blog ..Friday Night Links Party – 14 August 2009 =-.
August 14, 2009 at 4:36 pm
Nice tip Kim. In addition I would also make it ‘nofollow’. One of the pains I am still facing and don’t know how to fix it is about the role of this ‘continue’ or ‘read more’ literal in the page keyword density. Invariably the home page has more ‘continue’ or ‘read more’ keyword than anything else :lol: If I just put an arrow -> some people may not click there at all, i guess.
.-= Ajith´s last blog ..Your Blog Commenting Strategy can backfire! =-.
August 14, 2009 at 6:47 pm
Hi Ajith – Hmm … I never thought about either one of those things.
August 15, 2009 at 9:56 am
Nice Tip Kim. Designing the Read More link can sometime grab attention.
.-= Madhur Kapoor´s last blog ..Free Studio is a Nice Set of Video and Audio Conversion tools =-.
August 16, 2009 at 10:05 am
Hi Madhur – I want to change mine but have an image behind the text – I’m not sure how I want to handle that.
October 26, 2009 at 8:53 am
This is how you can remove read more link
http://jaxov.com/2009/10/remove-read-more-link-from-wordpress-homepage-easily/
October 26, 2009 at 10:44 am
Hi Jaxov – That’s a good solution. I don’t like, however, to edit the core files as that can cause problems when upgrading.