How to Hide the Ghost Blog Subscribe Button

How to Hide the Ghost Blog Subscribe Button
Photo by Šimom Caban / Unsplash

Ghost is the platform I use to host this blog, and I love it. It has everything I need. However, I recently came across my first gripe/bug with Ghost.

The Bug

The issue is that the 'Subscribe' buttons can not be hidden from the page despite the 'Subscription access' setting being set to Nobody. It doesn't make any sense to display any subscribe buttons if subscriptions are disabled, and as a result the button is broken and does nothing when clicked.

The Ghost code-base is open-source but very robust, so opening a PR to fix this myself would be a non-trivial task. Instead, I opted to fix it using the built-in code injection feature.

The Fix

There are two subscribe buttons that need to be hidden. The first appears on the banner at the top of every page and its CSS class is 'gh-head-button'. There's also the "Sign up for more like this." CTA that appears at the bottom of every post, which has the 'footer-cta' class. The following code can be used to remove both of these:

<script>
    // hide the subscribe button from the top banner and footer since it's broken when subscriptions are disabled 
    document.getElementsByClassName('gh-head-button')[0].remove()
    document.getElementsByClassName('footer-cta')[0].remove()
</script>

Navigate to your blog's Settings > Code Injection page and paste the code above into the 'Site Footer' section (don't forget to click 'Save'). Now you won't see those pesky subscribe buttons anywhere on your blog!