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.

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:

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.

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:

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

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.