• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles, Widgets & Plugins

Add HTML – Images and Links – to Text Widgets Without a Plugin

October 7, 2014 Updated on December 2, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

WordPress posts and pages use the TinyMCE editor, so you don’t have to write HTML in your posts and pages, unless, of course, you want to. But the Text Widget is still, well, text.

This tutorial will show you how to use the WordPress WYSIWYG editor from a Page to add HTML to a Text Widget without actually writing the code or using a plugin.

sidebars with image genesis and twenty fourteen

Suppose you want to add a thumbnail image, some text, and a link to a Text Widget, like this. Genesis Sample theme sidebar is on the left and Twenty Fourteen sidebar is on the right. No additional styles were added; this is the theme default for both.

Use Page TinyMCE Editor

An easy method to do this without writing HTML yourself is to use the TinyMCE editor for a post or page. You can save it as a Draft to use it again, if you like.

  1. Open an Add New Page. While you are in the Visual tab, add your text.
  2. Create a link – highlight your link text, and then use the link icon to link to another page in your website.
  3. Insert a left-aligned thumbnail image. Put your cursor at the beginning of the text, and use the Add Media button. Choose Alignment > Left, and Thumbnail size.
  4. You can Save Draft at this point.
  5. Now click on the Text tab; you will see the HTML for your image, text, and link.
  6. Select all of it, and Copy.
page editor with html for text widget

This is the HTML in the Add New Page editor.

Add HTML to Text Widget

Now add the HTML that you copied to your Text Widget.

  1. Go to Appearance > Widgets. Drag a new Text Widget to your sidebar.
  2. Paste in the HTML that you copied from your draft page.
  3. Give the Text Widget a Title.
  4. Be sure to check the box “
  5. Click the blue Save button.

For the Twenty Fourteen theme, this is what you’ll see. First the HTML code that you added to the Text Widget is on the left, and how it looks is on the right.

text widget with image html

Use a Plugin for your Sidebar Widgets

If you need to add HTML to a lot of Text Widgets, you may actually prefer to use a plugin for your sidebars. The Black Studio TinyMCE Widget is a really nice addition to your widget plugins. It adds a WYSIWYG editor that can replace the default Text Widget; you can use it many times in your Appearance > Widgets screen.

Note that the WordPress Text widget now has a WYSIWYG editor, so you no longer need a plugin. Updated 12/02/20.

So what will you create in your sidebar?

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Brad says

    Do you know of a widget to allow some one on my side to text over a picture … so they can see their message on a potato?

    Reply
    • Marcy Diaz says

      Thanks for your comment, Brad. I have no idea about a plugin to write on an image. Good luck finding something though.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!