Free “What I’m Reading” Plugin – Display Books from your Goodreads Shelf

Give your Goodreads shelf a sense of style with this free plugin.

This widget I’m about to show you is already available in the Ultimate Book Blogger Plugin but I thought I’d release this specific feature for free. 🙂

A WordPress widget to display the books on your Goodreads shelf.

Now you might be wondering, “What’s the point of this widget? Goodreads already has code to let you do this.” Well, I don’t like the official Goodreads widget. I don’t like how you can’t change the appearance and it looks and feels bulky. So I made a better one.

This widget can be totally customized with CSS to match the look and feel of your blog.

The plugin comes with two display styles to show off the books on your shelf.

You can choose to show only book covers:

Currently reading shelf on Goodreads - showing only book covers

Or you can choose to show the book cover along with the title and author text.

Currently reading shelf on Goodreads - showing book covers and title/author text

This plugin may not be for everyone, but what I like about it is that it’s simple. It’s not an opinionated widget. It doesn’t add in styles that may look clunky or clash with your design. It’s intentionally plain so that:

  1. It won’t look out of place on your site.
  2. If you’re comfortable with CSS and Inspect Element, you can customize the look and feel very easily.

Download the free WordPress plugin!

The plugin is free to download. Just enter your email address to get it. (You will be added to my mailing list, but you can unsubscribe at any time.)

Installation instructions.

  1. Once you have the what-im-reading.zip file saved on your computer, login to your self-hosted WordPress site.
  2. Go to Plugins » Add New and click Upload. Upload the zip file there.
  3. Once the plugin is installed, activate it.
  4. Go to Appearance » Widgets and find the widget called Goodreads Shelf. Drag it into your sidebar.

Next, you’ll need an API key from Goodreads.

This plugin works by using the Goodreads API. That’s a way to communicate with Goodreads through code. But in order to use their API, you need to create your own API key.

  1. Login to Goodreads and visit their API key page: https://www.goodreads.com/api/keys
  2. Fill in the details under “App Info”. You can set the Application Name to “Goodreads Shelf” and the Company Name to your blog name. The details don’t particularly matter. Leave all the optional fields (application URL, callback URL, and support URL) blank.
  3. Click Update App Info to save your settings.
  4. Your API key (and secret) will then be shown on the page. Copy the key value and paste it into the widget settings.

Goodreads shelf widget settings

Find your Goodreads user ID number.

Once you’ve entered your API key in the correct box, you need to get the ID number of your user account. This can be found in your Goodreads profile URL.

For example, mine is: https://www.goodreads.com/user/show/8769426-ashley

See the numbers I highlighted? That’s my user ID number.

Your profile needs to be public in order for this to work.

Make sure your profile is visible to everyone. Otherwise we won’t be able to display your books!

Go to your Goodreads settings (make sure you’re on the “Settings” tab) and find this option:

"Who can view my profile?" settings in Goodreads

Make sure yours is set to anyone.

Finally, type in the name of your Goodreads shelf.

There’s a box in the widget settings for “Shelf Name”. This is where you enter the name of the shelf you want to display books from. It can be an official shelf like currently-reading or it can be one you’ve created yourself, like dnf.

So how can you customize the design?

The look and feel of the widget is customized using CSS. I’m not going to go over every possible solution, but here are a few examples that work for the cover, title, author style:

Change the font size/color.

.grshelf-shelf-book {
    color: #333333;
    font-size: 20px;
}

You also need to change the link colours separately:

.grshelf-shelf-book a {
    color: #333333;
}

Change the size of the image.

Note that you won’t want to make it bigger than it actually is, but you can make it smaller!

.grshelf-shelf-book img {
    width: 60px;
}

You can even add a background for each book.

.grshelf-shelf-book {
    background: #FFD8DE;
    margin-bottom: 15px;
    padding: 10px;
}

Ready to start making your shelves pretty for your blog?

Remember, this widget is already included in the Ultimate Book Blogger Plugin. If you have that, you do not need to download this. 🙂

Are you like me? Do you hate the style of the default Goodreads widget?

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

51 comments

  1. Thank you! I like that this automatically populates from GR, rather than having to make a draft post and marking it ‘currently reading’ in UBB. Your instructions were crystal clear, and I have already added it to my sidebar. ?

  2. Awesome, as always 🙂 🙂 Question – can you use this plugin to show different people’s shelves or can it only work on one Goodreads account?

    1. As long as all accounts meet the requirements (public profile), absolutely! You enter the API key and account ID separately for each instance of the widget. So you can add the widget twice and have different user IDs and shelf names in each one.

  3. I love this! It looks so much better than the crappy GR one. I love how simple it is and it doesn’t take up too much room either! Thanks Ashley!

  4. I love this, and I’ve already added it to my blog. It looks so much better than the previous one I could find to use. I love that your instructions are so precise that even a relative newbie like me can follow them and get great results. Thanks!

    Donna @ OnDBookshelf recently posted: We Never Asked For Wings
  5. Would it be possible to tweak the plug-in so that one could create a big poster or collage of the books on one’s shelf? I’m giving many of my most favourite books away. I would love to have a pretty collage on my wall, of those books, so that I’m reminded of them. I think this would go well with the kind of movement to reduce footprint, and to share and give away.

    1. I’m not totally sure what you mean by a poster/collage. Is this still an online thing?

      I’m sure it would be possible to do what you want, but it would require some different/custom code to execute.

  6. Ashley, thanks for your response. Yes, this would indeed be something else. As you give away books, it would be wonderful if you could keep memories — and if you could do a collage, that you could either print out, or put as a screensaver — I would love to have that and would be happy to spend money on it, too! I know this is off-topic, but I just thought I would mention it, in case it is not too hard to tweak. (Or maybe someone else gets enthusiastic.)

        1. .grshelf-covers {
              text-align: center;
          }
          
          .grshelf-covers img {
              width: 180px; /* change this to whatever value you want */
          }
            1. Well you don’t want to put it in the middle of other CSS code. Either at the top—before everything else, or at the bottom—after everything else. 🙂

    1. That’s something Goodreads is doing. It means they haven’t added the book cover to their API. Their API (how we communicate with them via code) is not necessarily the same as what you see on their website.

      Sadly there’s nothing I can do since it’s the cover Goodreads is providing.

  7. Ashley, thank you so much for this awesome plugin. When I’m in the plugin it says there is a limit of 200 books. I seem to be able to 60 no problem. But going up that doesn’t seem to work. Any thoughts?

  8. This plug in is amazing! I just wanted to know if there was a way to center the book images? The way my blog sidebar is, I can only have 2 images next to eachother or else the others move onto the next row (which is fine with me) but I would like to have them centered in the box (please refer to my link to see what I mean) instead of left aligned.

    Kacie Reynolds recently posted: My DIY Wedding Binder
    1. So I am very bad at looking at typing comments before reading them and I noticed that you already provided the answer to this to someone else. I tested it out and it worked! So please ignore my comment lol.

      I still LOVE this plugin though!

    1. What you see on the Goodreads website isn’t necessarily the same as what they provide through their API (which is kind of confusing, I know). So that means a cover image may be available on their website but not their API. Unfortunately there’s nothing I can do about that, as we can only use the information they provide.

  9. I love this plugin! My Jetpack Goodreads plugin wasn’t working and I was looking for a replacement. But your plugin looks so much more gorgeous. Already have it active on my sidebar 🙂

Recent Posts

    Random Posts