A Simple Guide to customizing WordPress Text Widget

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.

In this short guide I will be covering following topics.

1. How to add HyperLink inside Text Widget
2. How to add Image to the Text Widget and How to link the image.
3. How to add a Youtube Video to Text Widget
4. How to add Link to Widget Title
5. How to Style the Text Widget
6. How to add and style a List in Text Widget
7. How to add ShortCode to a WordPress Widget

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 = "http://yourwebsiteaddress.com" target= "_blank">This is a sample text </a> This is more sample text.

Refer to the following ScreenShot

 

 

 

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 = "http://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. Refer to the screenshot

You can similarly add videos form other sites like Vimeo etc.

 

How to add link to widget title

We will use the Widget Title Links Plugin add hyperlink to Widget Title. Just activate the plugin and it will add an extra “Title Link”  field.  Just fille it up, it will make the Widget Title clickable. Have a look at the screenshot

 

How to Style WordPress text Widget.

We will create a Notice Box out of the Plain Jane Text Widget. Here is how it will look.

We will use 2 plugins. Widget CSS Classes and Simple Custom CSS.

The Widgets CSS Classes Plugin gives us the ability to add custom CSS classes to widgets.   We will add custom css class to our widget and then add the style through Simple Custom CSS Plugin.  Refer to the screenshot

Now add the following CSS Rules to style the Widget.

Use simple custom css plugin to add the following style rules. The CSS is self explanatory.

.my-class {background-color: #fefabc; } /* Add the BackGround Color */
.my-class .widget-title {color:Red;
text-align: center;
font-size: 14px;} /* Style the Widget Title */
.my-class .textwidget {color:black;
padding: 0px 4px 4px 4px;
text-align: center;} /* Style the Widget Text */

Quite simple.. isn’t it. This little bit of CSS adds some flair to an otherwise boring text widget :-). You can try adding rounded corners and shadow effects to make it more appealing.

Add A list of Links

We will now add a list to Text Widget. Here is how it will look

 

We will again use 2 plugins;  Widget CSS Classes and Simple Custom CSS.  We will add a custom class “my-links’ to our widget and use the following style rule

.my-links {background-color: #fefabc; } /* Add the BackGround Color */
.my-links .widget-title {color:Red;
text-align: center;
font-size: 14px;
margin-bottom :4px;} /* Style the Widget Title */
.my-links .textwidget li {font-size:16px;} /* Style li */

Thats it.  We now have  good looking list 🙂

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. (Thanks to James for the suggestion)

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 🙂

In coming days I will be publishing some code snippets to customize the text widget. if you have any question then let us know in the comments. Till then Happy Website building 🙂

If you like this post then I would suggest you to subscribe to the blog. I regularly publish practical WordPress tutorials.