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

Refer to the following ScreenShot

 

Add Hyper Link inside 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

Copy Image URL from Edit Screen

 

Image inside Text Widget

 

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

Youtube Video inside Text Widget

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

Widte Title Link

 

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.

Styled Text Widget

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

Custom CSS Class in Widget

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

Text Widget List of Links

 

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

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.

Did you enjoy this article?
We regularly publish WordPress related Tutorials and Tips on this blog. Signup today and receive free updates straight in your inbox.
I agree to have my personal information transfered to Mad Mimi ( more information )
About Ankit

Founder of SpiceWp. We share useful Wordprss Tips and Tricks.

I have also released 17 Wordpress Plugins till date .

I regularly publish Wordpress related Tutorials and Tips on this blog.
If you like the content then consider subscribing to the blog here.

Comments

  1. Nice.. There is an octopus in your sidebar.. 😀

  2. Instead of doing this tough stuff you can use this plugin , it will replaces the default functionality of Text Widget editor with the WordPress visual editor, allowing you to use HTML in Widget and write them in rich text.

    https://wordpress.org/plugins/visual-text-editor/
    try it once

  3. Good day folks,
    Great article!…thank you for sharing. I tried to change the title size in one of the text widgets following your suggestions (using use 2 plugins, Widget CSS Classes and Simple Custom CSS) but nothing happened!…Do I have to pre-define it in the widget css classes first?…any suggestions you may have will be greatly appreciated.
    I am using zerif pro theme for the website by the way.
    In advance, thank you for help and interest.
    Cheers,

Trackbacks

  1. […] A Simple Guide to customizing WordPress Text Widget […]

  2. […] will utilize the all powerful WordPress Text Widget to display the business Hours.  Since the Text Widget Supports HTML , it is a matter of pasting an […]

  3. […] Text Widget a really awesome. If you know a bit of CSS you can really make them sing. Here is a  short guide on customizing the WordPress Text Widget. It covers various use cases like adding Google Maps to Text Widget , adding images to widget […]

Speak Your Mind

*