Business Blogging 101 — Free WordPress Tutorials — New to This Site? Start Here:

Welcome to Free WordPress Tutorials – Business Blogging 101! This video is an introduction to the Business Blogging 101 website, a site dedicated to free tutorials and support for WordPress created by Mark McLaren of McBuzz Communications.

Free, Easy WordPress Tutorials

These are all easy WordPress tutorials and they are all free! Whether you have a WordPress blog or a WordPress website, most of the tutorials are for beginners, but there are intermediate-level tutorials and discussion about advanced techniques for WordPress including how to customize a WordPress theme, recommendations about the best WordPress plugins and themes, hacks and workarounds for WordPress using Cascading Style Sheets (CSS), PHP and HTML – and much, much more! 😉

There are a few advanced tutorials. The tutorials’ degree of difficulty is determined by the amount of skill and experience you need with HTML, CSS and in some cases PHP code. If you don’t have experience with these, don’t worry! That’s the beauty of WordPress.

On this site, you will learn about WordPress, Blogging and Online Marketing, including Search Engine Optimization. Ask questions, comment and connect with other WordPress users.

You can use the video player control bar buttons to watch in HD and to watch in full screen mode.

You can become a fan of Business Blogging 101 on Facebook. And follow Mark McLaren and McBuzz on Twitter.

Advertisements

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 Add Flickr Photo Widget to WordPress Theme Sidebar

This Intermediate-level WordPress Tutorial shows how to add Flickr Photo Widget to your WordPress blog’s sidebar so that you can display thumbnails of your Flickr photos. The Flickr Widget comes with WordPress 2.5+ on the WordPress.com hosting site. Your WordPress theme also must support Widgets. If you have questions about Widgets, send me a comment by clicking on the Comments link (or using the form) at the bottom of this post.

If you google something like “wordpress photo sidebar widget”, you will find many ways to display photos in your WordPress sidebar. If there’s one you already use that you like, let us know! The nice thing about using WordPress.com for your blog/website is that things like the Flickr Photo Widget are installed automatically – or Automattically, if you prefer (a little WordPress pun, there). Check out the Automattic website if you have a minute to learn more about what the creators of WordPress are up to.

Before you can add the Flickr Photo Widget, you need to first create a Flickr account at Flickr.com and upload photos to the account. If you need a tutorial on how to do that, send me a comment.

After you create your Flickr account, this tutorial shows you how to add the Flickr Widget to your WordPress sidebar and insert the RSS address to display Flickr thumbnail images in your sidebar. The thumbnail images link to the full-size image in your Flickr account. Pretty cool!

More About Changing Fonts and Font Size Using WordPress

This WordPress tutorial video (below) shows you how to change a font in a heading or a paragraph. This is something you can do for a specific heading or paragraph.

If you want to make a “global” change to the fonts used by your WordPress theme, you have to edit the style.css file that is part of your WordPress theme files.

One example of a global font change would be to change the font that is used for the title of each page and post. The Business Blogging 101 site has titles that use the Arial font and are a size of 16 pixels in height, with a medium blue color, and a light blue underline. By changing the style.css file, I could make the font a different family, like Times, and I could increase the size to 20 pixels; I could make the font color red; and I could remove the underline. That change would apply to every page and post on the site.

See the previous tutorial, Changing Fonts and Font Size Using WordPress for an overview of how to make a change to the style.css file. If you haven’t edited the files in your WordPress theme before, it can be a little challenging, so send me a comment if you have questions.

When you change a font – either globally or in a specific case – it’s a good idea to specify a group of fonts instead of just one. That way, if the first font is not installed on the computer of someone visiting your site, their browser will use the second one. If the second one is not installed, it will use the third, and so on.

Here are some suggested options for the font-family property. This will make sense when you watch the video below.

font-family:Verdana,Geneva,sans-serif;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;


Here are code samples that go with this video tutorial.

<p style="font-family:'Times New Roman',Times,
serif;">This is a paragraph</p>

This is a paragraph

<h1 style="font-family:'Times New Roman',Times,
serif;">This is a heading</h1>

This is a heading

(You can find a discussion of “Web Safe Fonts” on Safalra.com.)


Changing Fonts and Font Size Using WordPress

This is a reply to a reader who asked about how to change fonts and font size in WordPress in the comments to the “How to Position an Image and Wrap Text Around an Image Using WordPress” tutorial. The reader asked if there is a way to create a special font format to use for captions under photos.

The “quick and dirty” way to change the font is to use the same “inline” Cascading Style Sheets (CSS) technique used in my tutorial for image position and padding.

See the video tutorial at the end of this post, and the video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it. They walk you through the steps discussed here.

I am borrowing from the examples at w3schools.com such as these CSS Examples. In particular, look at the explanation and examples of the CSS font family property, and look at this font formatting example which includes a handy tool you can use to experiment by making changes to the CSS code and seeing the results instantly.

Here is the inline technique to change a font from the default that a blog or website uses to the “serif” font “Times”. Fonts like Times or Times New Roman are serif fonts. Examples of “sans serif” fonts are Helvetica, Arial and Verdana.

Here are some options you can try for the font-family property (thanks to Safalra.com):

font-family:Verdana,Geneva,sans-serif;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;

Insert the CSS information using the Code editing window (now called the “HTML” editing window in WordPress 2.5) just as you did in the “How to Position an Image…” tutorial. You have to add the p style=”…” and /p along with the left and right brackets on either side of the text as shown.

That’s the quick and dirty way. Again, check out the video below, and the next video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it.

What I say next really deserves a separate video tutorial (that hasn’t been made yet). If you would like me to make one, just send me a comment.


If you want to use something like a caption throughout your site, making an addition to the style.css file that is part of your WordPress theme is the way to go. (Note that on WordPress.com you have to pay an additional fee each month to be able to make changes to your theme files. If you don’t pay that fee, you can’t use the following technique.)

Again, check out the very cool examples at s3schools.com noted above.

To make a reusable format for something like a caption, what you would need to do is add the style information that appears between the style and /style tags in the font formatting example into your style.css file. That is, you put

p.sansserif {font-family: sans-serif}
or
p.caption {font-family: Helvetica, sans-serif; font-size: 10px; font-weight: bold; width: 300px;}

into your style.css file.

If you have third-party hosting for your WordPress site, you’ll need to use FTP software to download and upload the style.css file from you web hosting server. Your web hosting provider should be able to give you more infomation about FTP software. After adding the new code to your style.css file, save the file and upload it to your web hosting server using FTP. (If your blog is hosted on WordPress.com, you don’t have to worry about FTP. Just save the modified style.css using the WordPress dashboard.)

Then you need to add class=”sansserif” — or class=”caption” — to the p tag using the HTML Code editing window, just as you did to add padding to an image. Except in this case, you are assigning a class instead of a style to the paragraph.

I’m sorry if this is thoroughly confusing, but note that you have already used CSS to position and pad an image. The quick and dirty font change uses the same CSS style technique.

The second, more difficult font technique just goes one step further by placing the CSS code in the style.css file that is part of your WordPress theme as well as putting the p class=”…” into the HTML using the Code editing window.

Let me know if you have questions. I have a feeling you will!


Click on the video screen once to watch the tutorial here on the Business Blogging 101 page. Click again to view a slightly larger screen on the YouTube website.


The following are examples from the video tutorial.

This is a paragraph

Grapes in vineyard - free from iStockphoto.com

This is a caption

WordPress Tutorial – Make a Link to a Specific Place in a WordPress Page or Post

This Intermediate-level WordPress Tutorial by Mark McLaren of McBuzz Communications shows how to make a link that takes you to a specific location in a WordPress Page or Post. It is an Intermediate-level tutorial because you will use the WordPress Dashboard Code editing window to insert HTML to make the link work. Put one or more of these links at the top of a page. When you click on them, they take you further down the same page. This is good for a list of Frequently Asked Questions, for example. Or put a link on a different page. When you click on it, it takes you to the spot you want on the target page.

WordPress Tutorial – How to Download, Install and Activate a New WordPress Theme

This Intermediate-level WordPress tutorial shows how to change your theme in a blog/website hosted on wordpress.com. It also shows how to find new themes using sites like themes.wordpress.net and install them on a blog/website that uses third-party hosting. By third-party hosting I mean a web host that you pay for, like GoDaddy.com or Yahoo! or pair Networks hosting. Once you find a theme you like, you can download it, unzip the file, upload the theme to the wp-content > themes folder for your blog/website, and then activate it in the Dashboard.

%d bloggers like this: