Video Tutorials vs. Text Tutorials

Do you prefer video tutorials or text tutorials? There’s a discussion on the blog of Jaap Haitsma with participants expressing an overwhelming preference for text tutorials. Business Blogging 101 is mostly video tutorials. Although, when I started making tutorials for WordPress in 2007, I used text instructions and screen captures.

When I found inexpensive video-making software, I quickly switched to tutorials using that format. It seemed to me that – especially for beginners – using WordPress is a process that involves moving from one part of the Dashboard to another. It was much more helpful to be able to show where a button is located in the Dashboard and what happens when you click on it without having to make individual screen images of every step. Continue reading

Text Widgets, Digg 3-column vs. Blix 2-column WordPress.com Themes

A reader commented on the tutorial “How to Use a Text Widget to Customize a WordPress Sidebar” today to ask if the Blix theme supports text widgets. It looks to me like it definitely does. Has anyone else had trouble with this?

The same reader asked about adding a custom header to the Blix theme. The custom header can be changed in the WordPress Dashboard under Appearance > Custom Header. Not all themes support a custom header, but the Blix theme does. I have not created a tutorial showing how to do this yet. Sorry! But it looks pretty straight-forward. Hopefully not too hard to figure out.

One other thing I should mention: BE CAREFUL ABOUT SWITCHING THEMES.

If you have a 3-column theme like the one I use on Business Blogging 101 (Digg 3 Column) and you are using widgets in both sidebars – especially custom text widgets like I show you how to create in the “How to Use a Text Widget to Customize a WordPress Sidebar” tutorial – then you should be aware that, if you switch to a 2-column theme, all of your widgets from the second sidebar will be moved into the one sidebar.

If you plan to keep the 2-column theme, that’s fine! You would want to move them all to the one sidebar so that they don’t disappear. However, if you are just “trying out” the 2-column theme to see how it looks, you will have to manually recreate your text widgets when you switch back to the 3-column theme. Otherwise, they will all remain in the left sidebar.

How do I know this? I just did it myself! Oops! It took about 15 minutes of copying and pasting text widget content back into the second (right side) sidebar to put everything back to the way it was.

How to Put Text On Top of An Image in WordPress

A reader asked if it’s possible to put text on top of an image in WordPress. Actually, the reader asked if it is possible to set an image behind text in WordPress, which is another way to put it.

Either way, the answer is yes! You can do it if you use the WordPress HTML editing window and a little bit of HTML and Cascading Style Sheets (CSS) code. You can watch the video tutorial for this below.

Here’s the code for this example. Paste this into your HTML editing window. Replace the image URL in the example with a URL for an image you want to use, and BOOM!

Text on top of image code. Right click to open or save the file.

This HTML and CSS code is basic stuff that works on any web page, not just a WordPress page or post.

You can increase or decrease the height, width and padding values to work with your image. You may need to change the color of the text so it’s readable over the image. This sample text is colored black using the CSS “color:black;” as shown above.

For more about background images and Cascading Style Sheets, see w3schools.com.

This is a Sample Headline

This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.

How to Put Text on Top of an Image – or Set an Image Behind Text

WordPress Tutorial –  How to Use a Text Widget to Customize a WordPress Sidebar

Create a custom sidebar with text, an image and a badge

WordPress Text Widget: Create a custom sidebar box like this with text, an image and a badge.

RELATED POSTS:
How to Use the WordPress Gravatar Widget to Create an About Me Box in Your Sidebar

How to Add a Flickr Photo Widget / Badge to WordPress Sidebar

This Intermediate level WordPress tutorial shows how to use a text widget to customize a sidebar in WordPress. The final product of the tutorial can be seen here in the Business Blogging 101 website’s right sidebar. The HTML code used in this example is below.

NOTE: this video tutorial uses version 2.5 of WordPress. The latest version of WordPress is now 2.7.1. The only difference in this case is that in version 2.7.1 Widgets are now located under Appearance > Widgets (using the navigation buttons in the left side of the WordPress Dashboard). Here is a screen shot of the WordPress 2.7 Dashboard highlighting the new Text widget interface. In version 2.5, Widgets are located under Design > Widgets. Everything else is exactly the same. Use the comment form at the bottom of this post to ask a question if you get confused.

Widgets are a useful feature of most new WordPress themes. These themes are called “widget enabled” or “widgetized” themes. They allow you to add custom content to your sidebars with little or no knowledge of HTML or other code.

In an earlier tutorial, I showed how to add Flickr photos to a WordPress sidebar using the Flickr photo widget.

The example I use in this tutorial shows how to create a custom text box with a short biographical note. Part of that text is a link. In PART TWO of this tutorial, I show how to insert an image into the same custom sidebar box, along with a LinkedIn profile “badge”. You can use these Text Widget techniques to put whatever you want into your own WordPress sidebar.

HTML code used in this tutorial example:

<img src=”https://mcbuzz.files.wordpress.com/2008/08/3058dc0.jpg&#8221; /><br />

I’m an <a href=”https://mcbuzz.wordpress.com/about/”>online marketing consultant</a>, specializing in Web 2.0 social media marketing, search engine optimization, pay per click advertising and WordPress websites for business.

<a href=”http://www.linkedin.com/in/mcbuzzmarkmclaren”><img src=”http://www.linkedin.com/img/webpromo/btn_viewmy_120x33.gif&#8221; border=”0″ alt=”View Mark McLaren’s profile on LinkedIn” width=”120″ height=”33″ /></a>


How to Use a Text Widget to Customize a WordPress Sidebar (Part 1)


How to Use a Text Widget to Customize a WordPress Sidebar (Part 2)

WordPress 2.5+ Tutorial – How to Position an Image and Wrap Text Around an Image

How to Wrap Text Around an Image

Want to Wrap Text Around an Image Using WordPress? Take the Plunge

This tutorial shows how to wrap text around an image using WordPress version 2.5 or later. It also shows how to insert an image and align it (position it to the left, right or center). In earlier versions of WordPress, you had to use the Code (HTML) editing window to insert a bit of HTML (using cascading style sheets) to get the text to wrap properly.

Wrapping text around an image has been improved in WordPress 2.5 or later. You no longer need to use HTML code. Instead, you can use the Add an Image dialog box to specify image alignment, and this does a good job of wrapping text.

If you have already inserted an image, and you decide you want to wrap text around it, you can use the Image Editing dialog box to set image alignment, which has the same nice effect on text wrap.


How to Position an Image and Wrap Text Around an Image Using WordPress 2.5+

WordPress 2.5+ Tutorial – How to Upload and Insert an Image Using WordPress

My Sample Caption for This Image

My Sample Caption for This Image

Related post: WordPress 2.5+ Tutorial – How to Position an Image and Wrap Text Around an Image

Inserting an image using WordPress version 2.5 or later is slightly different than inserting an image using WordPress version 2.3 or earlier. Versions 2.5 and 2.6 are essentially the same. Version 2.6 is the latest version as of July 2008.

Inserting an image that you have already uploaded to WordPress but haven’t used in a particular post or page is actually a bit confusing in version 2.5 or later. You need to be able to find the elusive “Insert into Post” button. It’s not obvious.

There are many other settings and features in the “Add media” tools in the WordPress editing interface. This tutorial covers only the most basic aspects of uploading and inserting an image.

So check it out.


How to Upload and Insert an Image Using WordPress 2.5+

Does WordPress Version 2.5 Use Different Code to Wrap Text Around an Image?

A reader of the popular WordPress tutorial post “How to Position an Image and Wrap Text Around an Image Using WordPress” suggests that the code to wrap text around an image is different in WordPress version 2.5.

HERE’S AN UPDATE: Wrapping text around an image in WordPress version 2.5 or later is much easier than in earlier versions. You may not need to use any HTML code to make adjustments to alignment. Padding around the image is added automatically. See the tutorial “How to Position an Image and Wrap Text Around an Image Using WordPress 2.5 or Later” for more.

Still, the idea that WordPress uses different code to wrap text around an image doesn’t make sense to me. It’s possible that the improvements to text wrap are in version 2.6, not version 2.5.

I do notice that WordPress inserts some new CSS class information with the image, like “alignnone size-full”, but this does not effect the inline CSS I am using to position the image and wrap text around it. The text above wraps as it should around the right side of the image. I don’t see any difference. So hopefully our reader will tell me more about what he means by the “‘edit image’ extra space issue” in WordPress 2.5.


Just for the heck of it, here’s the text wrapping around the left side of the image.

What does everyone think of the new WordPress 2.5 admin panel organization and look-and-feel?

%d bloggers like this: