• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Add Content to WordPress Widgets Without Writing Code

Add Content to WordPress Widgets Without Writing Code

Posted: February 26, 2015 Updated: January 4, 2018 by Claire Brotherton
8 Comments

The Visual Editor widget in use

This is Day 23 in the 30 Day Blogging Challenge. You can read Day 22’s post here.

Adding sidebar widgets is common task to do on a WordPress site. WordPress has a number of default widgets built in. When adding text, the obvious one to use is the Text widget.

The WordPress Text Widget

The Text widget is found in your list of widgets in Appearance > Widgets. To add one,  you simply drag an instance of it into the widget area. You can then add your own content.

Here’s an example:

The Text widget in Appearance > Widgets

This is the result in the sidebar. In order to display each line in our list separately, we need to tick the Always add paragraphs box in the widget.

Text widget on website

This is fine for plain text, but what if we want to add some text formatting?

Suppose we want to add some bold text and bullet the list items. We can add some HTML code to the Text widget, like so:

I hope you enjoy your stay here. You will find <strong>lots of exciting things</strong> such as: 
<ul>
<li>Photos</li>
<li>Fun</li>
<li>Games</li>
<li>Music</li>
</ul>

This code produces the following result in Twenty Fifteen theme:

Text widget with HTML formatting

This is fine if you know HTML code, but what if you don’t? Well, there is an easier way.

Introducing Black Studio TinyMCE Widget

BlackStudioTinyMCE Widget download page

Black Studio TinyMCE Widget is a plugin which when installed and activated, adds a new widget, Visual Editor.

And guess what that does? It allows you to use the WordPress Visual Editor to create your widget content! This means that you can use the post editor which you already know to add text, bulleted lists, links, headings etc. without knowing the code. (You can still switch over to the Text view if you want to see the code.)

Best of all, the widget allows you to add images too, as you would add them to any post. Here’s an example, where I’ve added the bold text, a right-aligned image and a link.:

The Visual Editor widget in use

This is what it looks like in the sidebar:

The sidebar view of the Visual Editor widget

So that’s a really easy way to add content to WordPress widgets without writing code.

I find this a super useful plugin and widget. I hope you do too!

If this post helped you, please share or comment below.

Related

Category: WordPress Tags: 30 day blogging challenge, plugin, widget

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Rachel says

    February 26, 2015 at 7:16 pm

    I’ll definitely be trying this. Thanks!

    Reply
    • Claire Brotherton says

      February 27, 2015 at 12:48 pm

      Thanks Rachel!

      Reply
  2. Mark Pridham says

    February 26, 2015 at 7:56 pm

    This is a really great post Claire. Thanks for sharing the plugin info. I’ll have to add this to my growing list of plugins. 🙂

    Reply
    • Claire Brotherton says

      February 27, 2015 at 12:49 pm

      Thanks Mark. I’m sure your plugin list would make a good blog post. 🙂

      Reply
  3. Troy Wagstaff says

    February 26, 2015 at 10:23 pm

    Wonderful, thank you for sharing. I assume I can place any HTML code in the widget? I’m going to try it.

    Reply
    • Claire Brotherton says

      February 27, 2015 at 12:51 pm

      Yes you could put any HTML in the widget, though you can do that with the Text widget as well.

      Reply
  4. Susan Wilkinson says

    February 26, 2015 at 10:26 pm

    This is a handy one to know about – thank you Claire.

    Reply
    • Claire Brotherton says

      February 27, 2015 at 12:53 pm

      Cheers Susan, I’m glad it helps.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map