Title: Format "read more"
Last modified: August 20, 2016

---

# Format "read more"

 *  Resolved [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/)
 * Hi,
 * I’d like to format the read more by placing it in a div class.
    Whenever I try
   to do that though it makes all the text that div class, but not the actual read
   more.
 * My div class is called “readmore”
 * Here is my webpage: [http://www.payitforwardfriends.com](http://www.payitforwardfriends.com)
 * I am using the Ari theme.

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/format-read-more/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/format-read-more/page/2/?output_format=md)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962421)
 * Wrap it with jQuery.
    Assuming you have jQuery referenced, try;
 *     ```
       jQuery('a.more-link').wrap('<div></div>');
       ```
   
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962427)
 * I’m not sure how to use jQuery. Would you provide more instructions please?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962429)
 * If you want to wrap the read more link in a div on all pages, add this code to
   the bottom of your footer.php file, just above the `</body>` element.
 * If you want to wrap… on just one template, find that template and add this code
   to the bottom of that template file.
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function() {
        jQuery('a.more-link').wrap('<div></div>');
       });
       </script>
       ```
   
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962431)
 * This second code doesn’t seem to reference the read more div class and link it
   to the read more text.
 * I assume I need to do something else but I’m not sure what.
 * I added the code to the footer.
 * Thank you!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962432)
 * It has wrapped the ‘Read more’ text in a `<div>` element.
    You need to then use
   CSS to style/ format it.
 *  [Clayton James](https://wordpress.org/support/users/claytonjames/)
 * (@claytonjames)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962434)
 * There is also information on [Customizing the Read More](http://codex.wordpress.org/Customizing_the_Read_More)
   and designing the more tag located in the Codex, if that’s of any help.
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962436)
 * Where do I put the name of the div element?
 * Thanks Clayton!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962438)
 * You give the div element some attributes through the jQuery above,
    E.g
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function() {
        jQuery('a.more-link').wrap('<div class="read-more"></div>');
       });
       </script>
       ```
   
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962442)
 * Alright in my footer I have the code
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function() {
        jQuery('a.more-link').wrap('<div class="readmore"></div>');
       });
       </script>
       ```
   
 * and in my CSS I have the code
 *     ```
       #readmore {
       	color:#00CC00 !important;
       }
       ```
   
 * However my read more is clearly not green. Have I made an error?
 * Thanks so much by the way
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962443)
 * You’re calling your CSS selector with an ID(#) rather than a class(.),
    also 
   you should apply the `color` to the anchor.
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962453)
 * Andrew,
 * I changed it to . so the code is now
 *     ```
       .readmore {
       	font-size: 15px !important;
       	color:yellow !important;
       }
       ```
   
 * this code works on changing font size, but does not working on changing color.
 * I am not sure what you mean to the anchor.
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962459)
 * I figured it out. It’s linked to the actual theme and is in theme options. I 
   don’t think there’s a way to specifically change its colour, you have to change
   a lot at a time.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962468)
 * I don’t think there’s a way to specifically change its colour
 * > also you should apply the color to the anchor.
 *  Thread Starter [IlanK](https://wordpress.org/support/users/ilank/)
 * (@ilank)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962476)
 * You mean like in the div?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/format-read-more/#post-2962480)
 * Yes.

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/format-read-more/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/format-read-more/page/2/?output_format=md)

The topic ‘Format "read more"’ is closed to new replies.

## Tags

 * [class](https://wordpress.org/support/topic-tag/class/)
 * [div](https://wordpress.org/support/topic-tag/div/)
 * [format](https://wordpress.org/support/topic-tag/format/)

 * 21 replies
 * 4 participants
 * Last reply from: [gulliver](https://wordpress.org/support/users/gulliver/)
 * Last activity: [13 years, 6 months ago](https://wordpress.org/support/topic/format-read-more/page/2/#post-2962574)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics