Working with WordPress, we all have to agree that Widgets, among other factors, are the key to make WordPress powerful. And among all those widgets, my favourite one is Text Widget. This is also one of the most commonly used WordPress widgets.
Text Widget is amazing in term of functionality: it supports HTML, shortcode, embeds & JavaScript, adds text, audio, video, images and a lot more. The widget can be placed anywhere on your site as long as that area allows widgets.
In this tutorial, I will walk you through all the main functions that you can do with Text Widget.
1. Use of HTML
Thanks to HTML, Text widget allows you to do many things such as:
Add Audio or Video
So you want to have an audio and video play on your site? Since Text widget supports HTML, you only need to copy and paste in the embed code from Audio and Video site and adjust the code to make it look good on your site.
- Go to sites like Soundcloud or Youtube
- Choose an audio or video that you want to display
- Look for the embed code or iFrame code
- Copy and paste into Text Widget
- Adjust the dimension as you want
Here is the results:
Add Words or Links
You can create a website introduction, about us information, welcome words/message and so on with or without links by adding text and paragraph directly to the widget. With help of HTML, you can add effect for your text like font size, color and stuff.
Add Images
Besides video or audio, you can also add images to Text widget. Similar to video and audio, you will need to use HTML to add images, so if you already have your image URL (for example: posted to cloud services) then just copy and paste and you are good to go.
If not, you will need to open Media > Add new, upload your image files to the Media Library first. The go to Media Library, find and open the file you have uploaded, you will find the file URL on the right hand side of the window.
2. Use shortcodes
You read this right, we can use shortcodes even for Text widget. Introduced in WordPress 2.5, shortcodes come in handy and allow us create any special kinds of content.
Of course, having shortcodes for widgets is not the default of WordPress, but nothing is impossible, so this is how we do it:
Allow Text widget to support shortcodes:
There are 2 ways you can do it:
1. You can do it manually by opening functions.php file and add the following code line to the file (pretty much anywhere in the file):
add_filter('widget_text', 'do_shortcode');
This only allows you to use shortcodes for Text widget, not other areas.
2. You can do it in a modern way: use plugin
Here is a good plugin I would recommend: Shortcodes Everywhere.
Installing the plugin and shortcodes are ready to be used inside widget, comments, experts, category, tag and taxonomy description.
Add shortcodes to Text widget
The tough part is done, and now you can freely use shortcodes for Text widget. To illustrate, I will use Gallery shortcode to display a gallery using Text widget:
- Upload your images and have your collection ready
- Drag and drop Text widget into your sidebar
- Insert this gallery shortcode into Text widget:
[ gallery ids="images ID" columns="4" ]
And here is the result:
Note: “ids” contains number of your image ID
3. Use JavaScript
Who would add JavaScript to a Text widget? Anyone knows WordPress would never do that, as it does not bring much value to your site, thus it slows down your site. As in this article, I will just point it out to show you what all Text widget can do, including crazy JavaScript support.
I have here an example of time displayed on sidebar using JavaScript for Text widget:
Here is the script that I used:
<div id="txt"></div>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
startTime();
</script>
Are you Impressed with all the functions this little Text widget can do for you? Have you used all of them or do you have any inspiration to improve WordPress theme using this widget? Do share please as we would love to hear all about that.
