Customizing WordPress Themes Text Widget
What’s Text Widget
The Text Widget allows you to add text or HTML to your sidebar. It’s the most popular widget because of its power and flexibility.
You can use a text widget to display text, links, images, HTML, or a combination of these.
Note: Text Widgets fall under the same code security restrictions that posts and pages do, so if you use any code that isn’t allowed, it won’t be displayed.
Here’s an example of what the widget looks like when you just add simple text:
In this post I will share a few techniques to customize the WordPress Text Widget . Though the Text Widget looks basic, it actually is quite powerful. If you are willing to learn a bit of CSS, you can customize it in a lot of ways.
How to Add Hyperlink inside the Text Widget.
The text widget supports HTML. So adding a hyperlink is as simple as pasting some html. Use the following snippet in case you want to insert hyperlinks in text widget.
<a href = "https://yourwebsiteaddress.com" target= "_blank">This is a sample text </a> This is more sample text.
How to add Image inside a Text Widget
Use the following snippet to insert image inside a text widget
<img src="Enter the Image URL" alt="alt text here">
First you will need to get the URL of the image. Here is how you can get the Image URL.
Go to Admin->Media->Add New and upload the image you want. Once it is uploaded, click on Edit and Copy the Image URL. Now Paste the URL inside the img tags and you are good to go. Refer to the following screenshot
One can also add an external link to image using the following snippet
<a href = "https://link to the image here"><img src="Enter the Image URL" alt="alt text here"> </a>
How to add Youtube Video in Text widget
Adding a Youtube video is simpler than adding Images :). Just get the video embed code and paste it in the widget. The embed code will like below, change the width and height you like.
You can similarly add videos form other sites like Vimeo etc.
Add a ShortCode to WordPress Text Widget
Add a ShortCode to WordPress Text Widget Simply add the following snippet to your themes functions.php file.
/* This snippet will enable you to add shortcodes in widget areas */ add_filter('widget_text', 'do_shortcode');
That’s it, you can now you can insert a shortcode in text widget, just like you insert it in a Page / Post.
For example, Use the codes like below in Mageewp’s wordpress themes Onetone.
1
11111111
How to Make Text Widgets More Colorful and Less Boring
Text widgets allow you to add extra information to your blog’s sidebar or any other widget area. Mostly people use text widgets in WordPress to add a little introduction about themselves, the website, or they use it to add shortcodes inside widgets. Text widgets are usually very dull looking and boring because they blend in with the other sidebar element. In this quick article, we will show you how to make text widgets more colorful and interesting. The goal is to make them prominent in the sidebar, so your visitors pay more attention to it.
First thing you need to do is install and activate the Colorful Text Widget plugin. Upon activation, go to Appearance » Widgets. There you will see Colorful Text Widget in the available widgets panel. Drag and drop Colorful Text Widget to your sidebar (aka widget area).
The widget settings are really simple. You would use it like any other text widget. The only extra thing you have to do is add the widget style in the last option. The widget comes with a few built in styles of some basic colors. Copy the color style you want to use and paste it. You can also create your styles in style.css file of your theme.
If you don’t know CSS and just want to add a custom color, then there is an easier way to do that. Just copy and paste the following in your theme’s style.css:
</pre>
<pre>//** Replace background-color and border with your own values **//
.ctw-custom {
background-color: #cccccc;
border: 1px solid #1b1b1b;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
color: #000;
}
Now to use this style in your widget use .ctw-custom in the Colorful Text Widget’s widget style option. You can create multiple custom styles of your own. Just copy the css, rename .ctw-custom to something else and change the background-color and border values. We hope this quick tip will help you make text widgets more fun and prominent.
Conclusion
As mentioned before, the WordPress Text Widget is quite powerful and versatile. You can literally make it sing to your tunes if you know how to use CSS.
