Pixel Theme Studio

Changing your read more or continue reading buttons

You will notice I have a "Read More" button located in the Header Caption widget position on the demo site which is coded like this:

<a href="http://demo.pixelthemestudio.ca/wordpress/march10/?page_id=2" class="readon">Read More</a>

The link code above is a standard text link but with the added class of "readon" applied to it which gives you this:

Changing the Post "Continue Reading..." Background

If you like the button more than the current default gradient "Continue Reading..." style, you can change this in one of two ways but be prepared there are a few steps involved because of how WordPress functions...

Option One

Changing the Post background "Continue Reading..." style to the grey button style

1. Open the style.css file and look for /* Page styling */ which is around line 107
2. This code includes both the post continue reading style and the button style (readon)
3. Look for this .more-link {font-weight:bold;} and after it, add:  .more-link {width:150px; background: url('/images/button.png') repeat-x; text-align:center;}
4. You may need to make adjustments to the width.
5. Save the file and you should now see the button style from the gradient background to the grey button.

Option Two

There's a few ways to do this but I thought the easier would be to changing the Post "Continue Reading... " to be a "Read More" Button:

1. First, open the functions.php file and scroll to the bottom
2. Look for the following code and change the Continue Reading... located between to single quotes and change it to, for example: Read More
3. Click Save
4. Open the style.css file and go the /* Page styling */ css coding and look for the following code:

Look for this code:.readon, #searchsubmit {width:75px; background:url('images/button.png') repeat-x; text-align:center;} 
and add .more-link, to the beginning of it to look like this: 
.more-link, .readon, #searchsubmit {width:75px; background: url('/images/button.png') repeat-x; text-align:center;}

Save the style.css file and see if it worked in the front-end but you may need to make a few adjustments to widths or any other attribute for these read more styles.