Creating Your Own Simple Shortcodes For Your WordPress Website
When I'm creating a new website I often find that I come across things I want to do but can't because there isn't a plugin for it, or maybe the plugin there is just offers way too much. Just recently I created a new Affiliate Website and I wanted to be able to do two things:
- Be able to quickly and easily insert two Google Adsense blocks around half way down the page, directly within the post content, on just SOME of my posts.
- Be able to quickly and easily insert a graphical "call to action" banner directly inside the post content, on just SOME of my posts.
Of course there are loads of Adsense plugins out there you can use for this and that but they were all just overkill, in other words they did far more than I actually needed and often don't do the EXACT thing I actually want. For the banner I would usually use Adrotate (which I use on this blog) but again it's just overkill, takes a long time to set up and for the sake of one banner it really isn't worth it. So what did I do? I just created a couple of simple shortcodes within my own WordPress theme which I could use to display the two things I needed.
You maybe thinking it's too complicated to start creating your own shortcodes, but actually you'd be surprised how quick and easy it is. In about 5 minutes I created two brand new shortcodes to enable me to do the two things I wanted to do just by inserting the following into a page or post:
- [adsense] for my Google Adsense ads
- [callto] for my "call to action" banner
This meant that I'm now able to achieve the above two things very easily anywhere on that site. In the content of this blog post I just wanted to give you a quick overview of how I did it, in case you wanted to create some shortcodes of your own on your WordPress Affiliate Websites.
Step 1 - Your Functions.php File
The first thing you need to do is connect to your site via an FTP program and download the functions.php file of your theme. If your theme doesn't have a functions.php file you can create a blank one using notepad on your PC.
Step 2 - Creating Your Function
Next you need to create the function which will display whatever it is you want to display in your WordPress pages or posts. In my case I wanted to display an some Google Adsense ads and my own specified point in the content and a graphical "call to action" banner.
The two functions I created looked like this:
function showadsense() {
return 'code to display Adsense';
}
function calltoaction() {
return 'code to display banner';
}Step 3 - Adding Your Functionality
Now that the base functions have been created we need to add our "display code" in. The display code will be placed between the opening ' and closing ' where it says "code to display XXX".
With the display code added the two functions now look like this:
function showadsense() {
return '
<div style="float:left;margin-bottom:10px;">
<script type="text/javascript">
<!--
google_ad_client = "pub-XXXXXXXXXXXX";
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = "250x250_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "000000";
google_color_bg = "FFFFFF";
google_color_link = "44A6BF";
google_color_url = "44A6BF";
google_color_text = "000000";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div style="float:right;margin-bottom:10px;">
<script type="text/javascript">
<!--
google_ad_client = "pub-XXXXXXXXXXXX";
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = "250x250_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "000000";
google_color_bg = "FFFFFF";
google_color_link = "44A6BF";
google_color_url = "44A6BF";
google_color_text = "000000";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
';
}
function calltoaction() {
return '
<a href="http://www.yourdomain.com/go/yourlink/"><img title="Your Image Title" src="http://www.yourdomain.com/images/banner.jpg" alt="Your Image ALT" width="600" height="80" /></a>
';
}The Google Adsense function displays two 250x250 Google Adsense blocks side by side within the post content, perfect for quick and seemless integration. The banner function displays a 600x80 "call to action" banner which encourages the visitor to click through and complete an action, again this fits seemlessly into the post content.
Step 4 - Creating Your Shortcode
The final thing you need to do before uploading your updated functions.php file is create the shortcode which you will actually insert into your post or page to display the code you've added into your functions, this is a lot more simple and straightforward than you may think.
For each function you simply add one small line of code to register your shortcode, they look something like this:
add_shortcode('adsense', 'showadsense');
add_shortcode('callto', 'calltoaction');The above two lines of code will create the two shortcodes "[adsense]" and "[calltoaction]", so now when either is placed in a page or post the function is executed and your Adsense or "call to action" banner displayed.
Step 5 - Upload Your Updated Functions.php File
The last thing you need to do is upload your updated functions.php file to your WordPress theme and overwrite the old one, your new shortcodes should now be active and functioning.
You can download the source code from above in plain text format here.
The above functions can be modified to do a load of different things, so you're not just limited to displaying Adsense or banners in the format I've set out above.
So just have a play around with the code, give it a try for yourself and hopefully you'll find it will come in useful when you're putting your next Affiliate Website together.
Wow! That’s how simple it is? You are the first person I’ve seen share this little tip, and it’s a great one. Thanks, Ben :)
@ Rochelle – No probs Rochelle. Yep really that simple.
Of course, it starts to get more complex once you add shortcode parameters into the mix but for a nice quick way of displaying certain content (such as Adsense/banners etc) it works really well :)
Ben
Hey, Ben, that’s a fantastic tip. I echo Rochelle’s comment — I believe you are the first person I’ve known who’s been willing to share this simple, but extremely useful tip. I’m far from a coding nerd, but I’m going to have a try at using this tip to set up some WP shortcodes myself. Could be a lot more fun than digging through all the plugins out there for just a simple task or two.
Thanks so much for sharing!
Gary
Gary Speer´s last [type] ..Civil War not especially civil- but what else would we call it
@ Gary – You’re welcome Gary. I’m all for not re-inventing the wheel but as my post said some plugins just do far too much or don’t do EXACTLY what you need them to.
I’m a big fan of digging around the theme code to make things easier to use. Shortcodes in particular are great to use because any future changes you make to the display code only has to be altered in one place and NOT in every single page or post.
Enjoy.
Ben
Ben,
As always, your tips are precise, well thought out and easy to follow.
I appreciate that you take time to share them with us.
Thanks,
Jack
@ Jack – No problem Jack, always happy to provide something useful :)
Ben
Ben this is one of the best “share” items that I have seen on the net for a long time and something that is really useful. Many Thanks
@ Martin – That’s great Martin, I hope you find it useful on some of your own sites.
Ben
Thanks Ben.
Awesome tutorial, thought I would state that acknowledgement of appreciation since I am having a theme built by a coder for creating facebook fan pages using drag and drop and need him to create shortcodes for easy embed of autoresponders, videos, etc. And knowing what he needs to do allows me to understand it better.
@ Azzam – No probs Azzam, happy to be of help.
Ben
Leave your response!
Most Popular Posts
Categories
Further Reading
Archives
Recommended
Copyright 2013 Affiliate Wizard Ltd. All rights reserved. | Design By Ben Johnson