{"id":2596,"date":"2017-11-24T00:42:06","date_gmt":"2017-11-24T00:42:06","guid":{"rendered":"https:\/\/davidgerard.co.uk\/blockchain\/?p=2596"},"modified":"2017-11-24T00:43:53","modified_gmt":"2017-11-24T00:43:53","slug":"my-first-wordpress-extension-a-nice-patreon-button-at-the-end-of-each-post","status":"publish","type":"post","link":"https:\/\/davidgerard.co.uk\/blockchain\/2017\/11\/24\/my-first-wordpress-extension-a-nice-patreon-button-at-the-end-of-each-post\/","title":{"rendered":"My first WordPress extension: a nice Patreon button at the end of each post"},"content":{"rendered":"

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.<\/p>\n

It’s easy enough to bodge something into place by editing single.php in your theme, but I wanted to put the badge above<\/i> the Jetpack<\/a> “share” buttons, which are added when the post content is generated. Fortunately, Jetpack have a guide to doing this very thing<\/a>. 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.<\/p>\n

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

<?php\r\n\r\n   \/*\r\n   Plugin Name: Patreon Badge\r\n   *\/\r\n\r\nfunction my_patreon( $content = '' ) {\r\n        $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>';\r\n\treturn $content . $patreon_badge;\r\n}\r\n\r\nadd_filter( 'the_content', 'my_patreon', 18 );<\/pre>\n
(yes, I’ve made the <pre> tag wrap<\/a>)<\/p>\n
I also had to upload the image; you’ll need to replace the src=<\/tt> with the path to your own copy. (And the link with your own Patreon.)<\/p>\n
The Patreon branding<\/a> page suggests using a blob of minified JavaScript<\/a> to generate the button:<\/p>\n
<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><\/pre>\n
— but it didn’t play nice with the A1 Theme<\/a>‘s CSS, so I had to just use an image.<\/p>\n
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.<\/p>\n

\"Become<\/a>
Your subscriptions keep this site going. Sign up today!<\/a><\/i><\/p><\/div>","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[12,256,268],"class_list":["post-2596","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-attack-of-the-50-foot-blockchain","tag-patreon","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/posts\/2596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/comments?post=2596"}],"version-history":[{"count":13,"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/posts\/2596\/revisions"}],"predecessor-version":[{"id":2613,"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/posts\/2596\/revisions\/2613"}],"wp:attachment":[{"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/media?parent=2596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/categories?post=2596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidgerard.co.uk\/blockchain\/wp-json\/wp\/v2\/tags?post=2596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}