My first WordPress extension: a nice Patreon button at the end of each post

I have made my own WordPress extension! Since I did it by cargo-culted copy’n’paste’n’bodge, I’ll probably get pwn3d in an hour. But in the meantime, I have a nice Patreon badge at the bottom of every post.

It’s easy enough to bodge something into place by editing single.php in your theme, but I wanted to put the badge above the Jetpack “share” buttons, which are added when the post content is generated. Fortunately, Jetpack have a guide to doing this very thing. The trick is that when WordPress is assembling the post content, the share buttons have priority 19; so we just have to give our new thing priority 18.

Here’s the code. I put this in a file called patreon-badge.php in a directory called patreon-badge in my plugins directory, for neatness. But the only important part for naming is Plugin Name: Patreon Badge, which WordPress takes note of even though it’s in a comment.

<?php

   /*
   Plugin Name: Patreon Badge
   */

function my_patreon( $content = '' ) {
        $patreon_badge = '<br><div align="center"><p><a href="https://www.patreon.com/bePatron?u=8420236"><img src="/blockchain/wp-content/uploads/2017/11/become_a_patron_button.png" alt="Become a Patron!" title="Become a Patron!" width=217 height=51></a><br><p style="align:center;" class="patreon-badge"><i>Your subscriptions keep this site going. <a href="https://www.patreon.com/bePatron?u=8420236">Sign up today!</a></i></p></div>';
	return $content . $patreon_badge;
}

add_filter( 'the_content', 'my_patreon', 18 );

(yes, I’ve made the <pre> tag wrap)

I also had to upload the image; you’ll need to replace the src= with the path to your own copy. (And the link with your own Patreon.)

The Patreon branding page suggests using a blob of minified JavaScript to generate the button:

<a href="https://www.patreon.com/bePatron?u=8420236" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>

— but it didn’t play nice with the A1 Theme‘s CSS, so I had to just use an image.

Notice how I tried to centre both badge and text several ways, including in custom CSS. But the A1 Theme defeated me. There’s probably a way.