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!
Did it! And it worked perfectly the first time! Thanks for sharing this awesome and super easy tutorial! Now I just have to go through and delete my old signatures 😉
Think of it as ‘spring cleaning’ 🙂
I did it!! Thank you Thank you Thank you!!! This is the only post on Pinterest that I could find of signature tutorials! It took me an hour to create the image, resize it, find the editor, copy paste left and right, and press update!!! It worked the first time. I did a happy dance in the living room! Again thanks so much for this tutorial! Definitely pinned 🙂
Yaaaay!! So glad to hear it worked for you! I would totally do a happy dance too 🙂
Thank you so much for sharing how to add signature on every page and post! I tried myself, it really works & looks so good! The info. you provide for us is so useful here! Very appreciated!
This is exactly what I needed. Total life saver. Thank you 🙂
Great job but the problem with this is that it doesn’t recognize the is_single() condition, so the signature appears on multiple post pageviews UNDER the “read more” feature, which is odd. Could you adjust the code and take that into account? Thanks!
Hi, sorry, but I can’t, as I’m not a PHP expert. I’m just sharing what worked for me.
It worked! Thank you for the instructions and code. This is the first time I’ve touched my function php file and I was nervous, but it put my signature in there perfectly. One more thing to cross off my list before launching my new site. 🙂
How can I show the signature on some pages but remove it from others?
Thank you 🙂 But how do I remove the custom signature from the BLOG excerpts? So it only appears in the full posts.
http://godisalwaysfaithful.com/blog/
Did you ever figure out how to do this? Or can someone help me please? My signature is at the bottom of each post but each post has a read more line through it on the home page and my signature is also showing up there which looks kind of messy. I need to figure out how to only make it show on the full post. Site is http://www.projectallendesigns.com
Amazing tutorial. I am terrible with code but dared to try this on my own and it worked!!! Thanks so much!
Wow! This tutorial is completely idiot proof! Thanks so much!
Thank you so much for this tutorial! It worked so seamlessly for me. One quick question, the signature shows up on the left hand side and all my text is centered, is there a way to make the signature centered as well?
Thanks for a great tutorial! 🙂
I am currently using a simple plugin called Optin forms which I found very simple, but thank you very much for this very educational post! I’ve learned a few new things and that’s never bad. 😀
Thank you for this amazing tip.. worked perfect! and to centre i inserted div align=”center” into the div 🙂
Thanks 🙂
Very Nice Jahbobclato!
Thank you,
Ed
Thanks for the help! I was looking something like that and it works great!
I was wondering if there is any way to deactivate in from specific posts? I have a sticky post on the top of my blog and I don’t want to be visible in that part.
Thanks again
Thank you so much for this post! It worked perfectly! I, unfortunately, didn’t find your post first. I read multiple others that did nothing. Your guide was easy to understand and did the trick! Thanks again!!
please tell me there is a way to fix this, i attempted this and now my dashboard is a blank white page with nothing, i can not access anything! please help! I did it just like you said!
Remarkable! Its truly awesome paragraph, I have got much clear idea concerning
from this paragraph.
Thank you for this post! I have added a signature two different times now due to updates deleting it. You’re instructions are fantastic!
You seriously saved my life! This was such a great tutorial!