Tip of the Week: Easy HTML Code


Create HTML code using the Post Editor.

Wait! Don’t stop reading! This isn’t as nerdy as it sounds.

Twenty years ago anything you saw on the Internet was created by someone who knew how to write computer code. That has changed to the point where you can create anything on the Internet without lifting a code finger. Well, almost anything. There are a few places where knowing a bit of code can be helpful and one of those places is WordPress.

I don’t like to write code because, well, I don’t know squat about code and I’m not very good at what I do know. But there are a few niches in WordPress where writing code comes in handy.  I have a free program called Compose that helps me create needed code, but you still have to have an inkling about what you are doing. But there is a much easier way to create code in WordPress without having any coding skills. Perfect for me. Here’s how.

Let’s say you want to put a picture of your handsome mug in the left-hand sidebar of your WordPress site. To do that you’ll need to add a widget then create the HTML code in that widget to show the image. Follow these 5 steps to accomplish the same thing without knowing a lick about coding:

This is assuming you know how to upload an image to WordPress. If not, read through Adding Images in WordPress.

1. Go to your Dashboard and go to Posts > Add New. You are going to create a new post but not really post it. You’ll see why in a minute.

2. Put the cursor in the post window and click on the Add Media button just at the top left of your WordPress post window and upload an image (or select an existing image).

3. If the image is large. drag the bottom right-hand corner of the image toward the upper left-hand corner to shrink it to the width of your sidebar (about 150 pixels). *If you want to resize it to the exact size of 150 pixels wide, click on Edit just below the image after you upload the image, then click on Edit Image(upper right) and enter the width of 150 in the left hand box. Click on Scale then on Update.  Now you are ready to copy the HTML code you’ve created and paste it into the sidebar widget.

4. Click on ‘Text” in the upper right-hand corner of your post window and you’ll see all the HTML code that WordPress created for you without you lifting a finger. Highlight and copy all the code text and then delete the post.

5. Finally, go to Appearance > Widgets in your Dashboard and click on the little triangle next to Primary Widget Area (or Secondary Widget if you have two sidebars). Drag a Text Widget to that sidebar. Paste the code you copied into the Widget area and save it at the bottom of the widget. View your front page and, voila, you have “written” computer code!

One Response to Tip of the Week: Easy HTML Code

Leave a Reply

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