In this post we are going to do a simple make over of the <-more-> link/button. We are going to add in a style class in this link.
Your php code
The php code in your index.php file should look something similar, if you have any question about the the_content coding problem, you can view the document at here.
<div class="entry">
<?php the_content('Continue Reading »'); ?>
</div>
This is just something we have, a simple word changes for the_content, of course you can change the ‘Continue Reading »’ to anything you want.
HTML code
Let’s look at the html code from the source of your website, by looking at this we know that this is a simple a link tag that have a more-link class in it. So in our css we can modify it to look different to other a link tag. Next we would like to transform the style to something more appealing to the reader (kinda like a article separator).
<a class="more-link" href="http://www.designersandbox.com/wordpress/feedburner-for-your-wordpress/#more-270">Continue Reading »</a>
Adding CSS code to your a class more-link
By adding this following code to your a tag more-link class, the button will be created. Isn’t this easy. From this css, you will have the state of :link :visited and :hover, this is an all in one css for your read-more link. ;-P
a.more-link{
background:#699eb6;
padding:2px 7px;
margin: 0;
margin:20px 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-style:italic;
font-weight:bold;
padding:4px 20px;
}
a:link.more-link,
a:visited.more-link{
color:#c6c6c6;
text-decoration:none;
display:inline-block;
margin-bottom:5px;
font-size:1.5em;
}
a:hover.more-link{
color:#47798f;
background:#d9d9d9;
text-decoration:none;
}
I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.
Good Luck!
Remember to subscribe to our RSS feed.
I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.
Good Luck!
Hello.
I probably would use your idea to make my "Read more" look better. Maybe You can help me. I am very new to php, where and how can I modify the php 'code'. Do I need some editor for this?
Thank You in advance.
I too am new. I know how to edit the PHP but where should I place the css in the stylesheet? Does it matter where I place it? Please reply if you can.
The css should be place under your template folder inside your css.
usually it goes under style.css
wp-content/themes/[YOURTHEME]/style.css
Ignore my previous comment lol. I just want to say THANK YOU SOOOOOOOO MUCH for posting this! You have no idea how LONG and HARD I searched the web to figure out how to do this!!!! I appreciate this post and will share with others. I'm now at ease.
Also, would this be the same for the "comment" link as well? I figure it would. Thanks again
WOW!! THANK YOU!!!!! THAT IS WHAT I LOOK FOR!!!
Dear Vincent Hope you are doing great and enjoying your life.
I want to replace the ugly (Read more , older post and newer posts link with Images)
you can have a lock at my blog (http://www.risepk.com/blog/) they have the ugly links like
Read More
« Older posts
Newer posts »
can you please help me in this case.