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:

readmore

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.

Quick Directory

If you are looking for company information, details relating to our services, products, or you need to contact Pixel Theme Studio, the following directory should help:

About Pixel Theme Studio

aboutptsPixel Theme Studio is focused on designing professional WordPress themes and premium Joomla Templates (this site is in Joomla). The goal is to design real world concepts for individual bloggers and business owners with themes that are not bloated with scripts and code.  We create the best WordPress themes and Joomla templates possible by keeping the designs simple and clean.

Sybergen Certified

Twitter Feed

Please make cache directory writable.