Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Wrap it with jQuery.
Assuming you have jQuery referenced, try;
jQuery('a.more-link').wrap('<div></div>');
Thread Starter
IlanK
(@ilank)
I’m not sure how to use jQuery. Would you provide more instructions please?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
(@ilank)
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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It has wrapped the ‘Read more’ text in a <div> element.
You need to then use CSS to style/ format it.
There is also information on Customizing the Read More and designing the more tag located in the Codex, if that’s of any help.
Thread Starter
IlanK
(@ilank)
Where do I put the name of the div element?
Thanks Clayton!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
(@ilank)
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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
(@ilank)
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
(@ilank)
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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
(@ilank)
You mean like in the div?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
