WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Format "read more" (22 posts)

  1. IlanK
    Member
    Posted 1 year ago #

    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

    I am using the Ari theme.

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Wrap it with jQuery.
    Assuming you have jQuery referenced, try;

    jQuery('a.more-link').wrap('<div></div>');
  3. IlanK
    Member
    Posted 1 year ago #

    I'm not sure how to use jQuery. Would you provide more instructions please?

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    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>
  5. IlanK
    Member
    Posted 1 year ago #

    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!

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    It has wrapped the 'Read more' text in a <div> element.
    You need to then use CSS to style/ format it.

  7. ClaytonJames
    Member
    Posted 1 year ago #

    There is also information on Customizing the Read More and designing the more tag located in the Codex, if that's of any help.

  8. IlanK
    Member
    Posted 1 year ago #

    Where do I put the name of the div element?

    Thanks Clayton!

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    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>
  10. IlanK
    Member
    Posted 1 year ago #

    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

  11. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You're calling your CSS selector with an ID(#) rather than a class(.),
    also you should apply the color to the anchor.

  12. IlanK
    Member
    Posted 1 year ago #

    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.

  13. IlanK
    Member
    Posted 1 year ago #

    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.

  14. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    I don't think there's a way to specifically change its colour

    also you should apply the color to the anchor.

  15. IlanK
    Member
    Posted 1 year ago #

    You mean like in the div?

  16. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Yes.

  17. IlanK
    Member
    Posted 1 year ago #

    so do I just do

    <div class="readmore" text-color:"red"></div>

  18. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    No, apply the CSS color to the anchor tag within that div ☟

    .readmore a
  19. IlanK
    Member
    Posted 1 year ago #

    So what code do I use?

    Thanks

  20. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    .readmore a {
     color: yellow;
    }
  21. IlanK
    Member
    Posted 1 year ago #

    It works great. Thanks so much!

  22. gulliver
    Member
    Posted 1 year ago #

    I'm unsuccessfully trying to use this, and can't see where I'm going wrong.

    My theme has wpautop disabled because it was causing unwanted reformatting of some text. As expected, it also removes the p tags from the 'read more' link when using <?php the_content();?>.

    I've been able to get some css control of my 'read more' link by adding a span:

    <?php the_content ('<span class="continue-reading">CONTINUE READING »</span>'); ?>

    But I'd prefer to have the whole line wrapped in p tags - which your code should do.

    I've added it to the home.php template, and all my pages call JQuery. But it doesn't modify the code. What might I be doing wrong?

Topic Closed

This topic has been closed to new replies.

About this Topic