HELP!!! Change "Read more" Link to Image

[pjblogger]

I want to change the "Read more" link into an image that can be clicked. In other words, I want a "Read more" button from an image that I've created. I have the code snippet for changing the text, but how can I modify the code to change the text into an image?

I already tried the code from WordPress Codex, but my site went offline each time I entered the code.

Please help, this seems so easy, but it is making me frustrated.

Thank you sincerely,

PJ

I am using Prose

[wendycholbi]

Try the first snippet on this page: http://my.studiopress.com/snippets/post-excerpts/#content-more-link

In the snippet, replace [continue reading] with an HTML link to your image, with alt-tags identifying the image as Read More, like this: <img src="IMAGE-URL-HERE" alt="read more" title="Read more..." />

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

Thanks Wendy, your code is the first one that didn't take my site offline, however, I now have a little box with a red x where the image should appear. How can I fix this?

[wendycholbi]

Okay, that sounds like progress! Progress is good. Sounds like the code is working but the image URL isn't quite right.

Can you post a link to your site so I can see the red x in action?

And can you post your code snippet here so I can see what's happening with the URL?

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

Sure! Here is the code:

/** Modify the WordPress read more link */
add_filter( 'the_content_more_link', 'custom_read_more_link' );
function custom_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '"><img src=”http://parentjob.com/wp-content/uploads/2013/04/read-more.png” /></a>';
}

Here is a link to my site:

http://www.parentjob.com

Here is the image:

[wendycholbi]

Looks like there are some curly quotes causing issues (partly my fault if you copied-and-pasted my HTML above, because I didn't format it properly).

Try copying this code snippet (that I'll try to format correctly this time...) and overwriting your existing snippet:

/** Modify the WordPress read more link */
add_filter( 'the_content_more_link', 'custom_read_more_link' );
function custom_read_more_link() {
 return '<a class="more-link" href="' . get_permalink() . '"><img src="http://parentjob.com/wp-content/uploads/2013/04/read-more.png" alt="read more" title="Read more..." /></a>';
}

I got this snippet to work on my test site (showing your little heart "read more" image), so I'm confident it will work, if we can get past copy-and-paste-introduced issues.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Rahn and Dianna]

You have the wrong quotes on your link.  Probably from copy/pasting

you have:

<img src="”http://parentjob.com/wp-content/uploads/2013/04/read-more.png”">

Get rid of the inner quotes, that aren't really quotes.  (Look closely and you'll see the look different than the outer quotes.

I think this will do it (notice all the single ' marks and double quotes " are vertical, not slanted:

add_filter( 'the_content_more_link', ‘custom_read_more_link' );
function custom_read_more_link() {
return '<a class="more-link” href="' . get_permalink() . '">
<img src="http://parentjob.com/wp-content/uploads/2013/04/read-more.png" /></a>';
}

---

gonesomewhere.com * oyveyaday.com * myworldofcoke.com

[wendycholbi]

Okay, the forum keeps changing my code, even though I'm using the PHP shortcode to format it. I don't know why it's doing it. It keeps ADDING an anchor tag WITHIN the image tag, which is messing it up. So don't copy my code snippet above (now for some reason I can't even edit my post). I'm sorry about that.

Rahn and Dianna are on the right track, but if you copy-and-paste their code snippet, you will still get curly quotes and there's a weird HTML entity stuck in there.

My suggestion is to go back to the original Genesis code snippet from this page:

Post Excerpts

Copy it (either directly into the Genesis --> Custom Code --> Custom Functions field, or into a text editor, not a word processor), and then replace:

[Continue Reading]

...with this line of HTML code (crossing my fingers that this formatting will work):

EDITED: Nope, there is no way I can get the code formatted right. Basically you need a correctly formatted valid link to your image, and I'm failing to give you one.

Let me know if you get anywhere with this. I can try to post a code snippet on one of my sites and then link to it, if you can't get a link to work.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

I really appreciate the help from you all, but now I am totally confused. Which code should I use and how do I copy without using copy and paste. Please help, Thanks

[pjblogger]

Wendy, I got it to work using the first code that you gave me. I  changed the curly quotes to straight quotes. I am super excited!! Can you take a look at my site and tell me if there is any way that I can keep the image from separating the lines in the paragraph?

I could hug you, but I know you'd much rather if I refer you to others for work, and I'll be sure to do that.

Thanks again,

God Bless

[wendycholbi]

That is FANTASTIC -- I'm so happy to hear (and see) that you got it working! Good for you for keeping at it. And, seriously, remember this moment if (when) you feel overwhelmed by your own website, and things seem hard. You DID figure it out. That proves that you CAN figure things out.

Now, as for the issue of the image being taller than a line of text. One way to deal with this would be to put the image on its own line, so it appears below the post excerpt instead of on the same line as the last line of text.

If you insert a line-break tag right before the beginning of the link code, that will push the image to the next line.

Here's the beginning of the line of code (I won't reproduce the whole line, for simplicity and to avoid those pesky code-formatting problems):

return '<a class

If you insert a line-break tag, it will look like this:

return '<br /><a class

That will put the image on a line by itself, and by default it will appear at the beginning of the line (on the left side of the page). If you want it to appear on the right, possibly a more "natural" location for a Read More link, you can add the built-in WordPress class "alignright" to the image. Look for the beginning of the image tag in the code -- it looks like this:

<img src=

Add the class between "img" and "src" so you get this:

<img class="alignright" src=

I've put both of these small modifications into a copyable-and-pastable snippet on Github, which you should be able to see by visiting this link:

https://gist.github.com/wendycholbi/5393213

I hope this helps!

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

Oh WOW!!! That worked beautifully. I know you are probably wondering why I am so dramatic, well all of this coding stuff is new and amazing to me. About two months ago, I didn't know what a code was. LOL

Anyway BIG thanks for helping me.

Goodnight

[Rahn and Dianna]

Thanks Wendy, I think we were both answering at the same time last night.  The HTML I pulled from inspecting the elements on the page, and seeing what the link was, but I think copy past probably got corrupted too.

I need to remember to use gist's, it sure makes pasting a lot easier.     🙂

Rahn

 

---

gonesomewhere.com * oyveyaday.com * myworldofcoke.com

[Author]

Posts