How to Add A Signature to All WordPress Posts

You know how almost every blog you read (in this niche) has the blogger’s “signature” at the bottom of the post? I did that in Blogger and in WordPress, but I’ve also changed my design a million times and changed my signature a few times as well. This means that an old post will not have a signature that matches my current color scheme. Petty, I know, but color coordinating is important to me! I knew there was a way to back-annotate all old posts with the same signature, I just never got around to figuring it out. Somehow, this task floated to the top of my to-do list one day, and I did it! And it worked! And even better, I was able to add my social media follow buttons as well! The angels are singing! So then of course, my next thought was “Can I make this into a blog post?” Why yes, I can! And here it is! (Enough exclamation points yet?) So. Here’s my tutorial on how to add signatures to all wordpress posts!

NOTE: This tutorial will add a signature to ALL your posts, old and new.  If you already have a signature in your old posts, your posts will show two signatures, so user beware, this may force you to go back and remove all those old signatures.  I don’t have a magical plan to do that yet, and yes, I actually gritted my teeth and went through all my old posts and removed the code manually.  eek.

1.  First, you need a signature.  You can use PicMonkey or Gimp or Photoshop or any other piece of software to create an image of your name, or whatever you want to sign off as, SuperWoman, the Baby Whisperer, whatever floats your canoe.

2.  Upload your image to your media library, and make a note of the direct URL to that image.  You’ll need that info in a bit.

3.  We’ll be messing with your functions.php file, so you’ll need to know where that is and how to get to it.  Some themes will allow you to edit the functions.php file as an override, like mine does.  Most themes should allow you to edit the file directly by going to your Dashboard -> Appearances -> Editor.  On the right hand side, you might see a functions.php to click on and edit.  If neither option works for you, you’ll have to go to your blog host, and FTP the file to your computer, edit it, then upload it back to your server.  You should be able to find the file in your /wp-content/themes hierarchy.

CAUTION!  Editing your functions.php file *can* kill your site.  Not KILL off-the-server kill, but mistakes in editing can cause your site to not load at all.  So, make sure you have your blog backed up, and as you are editing, refresh and preview the changes in a separate window, so in case something goes wrong, you can just go back to your dashboard and erase your updates, re-save and get your site back online.

4.  Now let’s look at the code you’ll be adding to your functions.php file.

Code to add a Signature to Posts

Replace the “INSERT IMAGE URL HERE” with the URL of your uploaded signature image file.

// Add Signature Image after single post
add_filter('the_content','add_signature', 1);
function add_signature($text) {
 global $post;
 if(($post->post_type == 'post')) 
    $text .= '<div class="signature"><img src="INSERT IMAGE URL HERE"></div>';
    return $text;
}

Code to add a Signature to Posts and Pages

If you want to also add the signature at the end of pages, you’ll add a condition to the IF statement. Replace the

if(($post->post_type == 'post'))

with

if(($post->post_type == 'post') || ($post->post_type == 'page'))

Here’s the full snippet:

// Add Signature Image after single post
add_filter('the_content','add_signature', 1);
function add_signature($text) {
 global $post;
 if(($post->post_type == 'post') || ($post->post_type == 'page'))
    $text .= '<div class="signature"><img src="INSERT IMAGE URL HERE"></div>'; 
    return $text; 
}

Code to add a Signature and Social Media Follow buttons

I wanted to get even fancier and add my social media follow buttons at the bottom of every post/page as well.  My whole set of buttons is covered by an image map.  Check out this post to see how to set one up for yourself.  The image map comes with two tags, one that starts with <img id=”….”> and one that starts with <map id=”…”>  Add the map tag to your template head – you only need it on your site once for all image maps of that particular id to work.  Then the img tag is added to your signature function where it says “Insert Image Map Tag Here”.

// Add Signature Image after single post and page
add_filter('the_content','add_signature', 1);
function add_signature($text) {
global $post;
if(($post->post_type == 'post') || ($post->post_type == 'page')) 
   $text .= '<div class="signature"> <div><img src="INSERT SIGNATURE URL HERE"></div>
   <div>INSERT IMAGE MAP IMG TAG HERE</div></div>';
return $text;
}

Here is what my code looks like:

// Add Signature Image after single post and page
add_filter('the_content','add_signature', 1);
function add_signature($text) {
 global $post;
 if(($post->post_type == 'post') || ($post->post_type == 'page')) 
   $text .= '<div class="signature"> 
      <div><img style="border: 0px;" alt="" 
         src="https://www.1dogwoof.com/wp-content/.../signature_2013.png" 
         width="187" height="49" border="0" /></div>
      <div><img id="Image-Maps_8201307132041164" alt="" 
         src="https://www.1dogwoof.com/wp-content/.../media_icons_55px.png" 
         usemap="#Image-Maps_8201307132041164" width="300" height="55" border="0" />
      </div>
   </div>';
 return $text;
}

Setting Display Priority

If you use any plugins to show related content at the bottom of your posts, you may hit the problem of having the signature show BELOW the related content, when you really want the signature to show just after your written post. To fix that, you’ll need to lower the priority of the related content plugin. I use the nRelate plugin, so my code look like this:

remove_filter( 'the_content', 'nrelate_related_inject', 10 );
remove_filter( 'the_excerpt', 'nrelate_related_inject', 10 );
add_filter( 'the_content', 'nrelate_related_inject', 999 );
add_filter( 'the_excerpt', 'nrelate_related_inject', 999 );

You’ll notice that in the Signature function, you’ve set the ‘add_signature’ function to a priority of 1. Setting the related content to a priority of 999 will ensure it’s displayed below your signature.

If you use a different related-content plugin, you’ll need to Google the function name to use in this code snippet.

Well, this looked complicated, but it really isn’t too bad.  Give it a try and let me know how it goes!  Ask questions, share tips, I’d love to hear how it works for you.  Want to see more blogging tips?  Here on over to my Blogging Tips page to see more, or start with the ones below!