How can I use an image for the Goodreads link?

The default Book Layout template has the Goodreads link appearing as a plain text link. But this can be changed into an image instead.

Comparison of a Goodreads text link and image link

Step 1: Find and download your Goodreads image.

First you need to find the image you want to use. There are many choices on this page on Goodreads: https://www.goodreads.com/api Scroll to the very bottom of the site to see a collection of buttons and graphics. Choose one and download it to your computer. (Right click > Save image as…)

Step 2: Upload your image to the WordPress media library.

Once it’s been uploaded, you want to click on the image in your media library and copy the “URL”, as shown below.

Copy the Goodreads image URL

Step 3: Add the image to your template.

Once you have the URL copied, go to Books > Settings and click onto the “Book Layout” tab. Make sure you have the “Goodreads Link” field inside the “Your Layout” area. Find it, and click the “Edit” button next to it to open up the template box.

Editing the Goodreads link template

Erase everything in the box so that it’s empty. Then add in this:

<a href="[goodreads]"><img src="YOUR IMAGE URL HERE" alt="Goodreads"></a>

Be sure to paste in your URL where I’ve noted. So mine might look like this:

<a href="[goodreads]"><img src="http://localhost/wp/wp-content/uploads/2016/04/goodreads.png" alt="Goodreads"></a>

Then, save your changes at the bottom.

Was this article helpful to you? No Yes