Tutorial on Creating Footnotes in WordPress

Featured

Footnotes are often requested in my workshops and classes. I’ve published “Creating Footnotes in WordPress” explaining how to do this in WordPress on .

Footnotes have been replaced by links, but there may be times when you wish to link to a footnote in a blog post.

Here is a list of the pros and cons of using footnotes from the article.

Links cover one or more words thus are easier to see and easier to click over a larger area. Footnote links are tiny, hard to see, and hard to click, especially if you have mobility issues.

Footnotes are familiar to academics, scientists, and researchers. If you are publishing such papers or writing for that audience, it would be natural to include traditional footnotes.

There are also times when you may need to cite a source that isn’t online. How would you site a paper or reference that is not online? A footnote serves to cite the source while not interrupting the natural flow of the content with explanations in parentheses.

Three techniques are described in the article.

You may use WordPress Plugins that make adding footnotes to posts easier, or you can create them manually.

The process of adding footnotes manually to WordPress involves using jump or page links with the footnote numbers within the content to “jump” down to the footnote list at the bottom of the post.

I’ve included an example of how to create footnote jump links to take the reader to the footnote list and not a specific item in the list, and how to create a footnote jump link to a specific footnote in the list if there are many footnotes in the article.

How to Add Images in Your Post Content

Round beach rocks in shade - photography by Brent VanFossen.Images, graphics, photographs, drawings, cartoons, badges…our websites are filled with imagery.

This article addresses the techniques used by WordPress for aligning images and image sizing and links in published content. Check your publishing platform for their methods.

Image Terminology in WordPress

There are several terms we need to develop to help you understand how images are used in WordPress. The most important terms describe the images within WordPress based upon how they are used and generated: original image, published image, media file, and attachment image.

The image uploaded to your site is called the original image or image file. When uploaded to WordPress, a minimum of three sizes are automatically created and stored in the wp-content/uploads/ directory on the server. The images are grouped by year then month by default.

The image sizes available for displaying in your content are thumbnail, medium, and full-size. Depending upon the image’s original size, large and x-large may be available. Full-size is the original uploaded image size.

When an image is used on a web page in WordPress, it is typically viewed within the content area of a post or Page. For the sake of this tutorial, we will called this the published image. WordPress makes available the three size options by default.

Image Sizes and Links

WordPress Media Uploader featuring multiple images - screencap by Lorelle VanFossen.

The WordPress Media Uploader redesigned in 2012 now features Attachment Display Settings options. They include setting the alignment of the image, the size of the published image, and the Link To feature. Continue reading

What is a Properly Formed Link?

Featured

I talk about properly formed links or proper HTML anchor tags in all of my articles, workshops, and classes. This article serves as a tutorial and reference guide on the proper formation of HTML links.

Links tie the web together, linking one site to another, one web page to another. They are critical to helping us find information and understand what is being written.

In “What You Must Know About Writing on the Web,” I describe a link dump:

Ugly is as ugly does. Don’t clutter up your site with ugly link dumps.

A link dump is when the blogger is lazy and just pastes the link into their post such as http://lorelleteaches.com/2012/10/14/what-you-must-know-about-writing-on-the-web/ instead of the properly formed What You Must Know About Writing on the Web.

Which is easier to read?

A properly formed link makes it not just easier to read the post, it is clean and presents professional looking content. It invites the reader to click.

How to Create a Properly Formed HTML Link

To create a properly formed link, you may use the Visual Editor toolbar button called link or Hypertext Link.
Continue reading

The Open Access Publishing Explained for Scientific Papers

Nick Shockey and Jonathan Eisen of PHDComics tackle the subject of open access for the publishing of scientific and research papers, helping us better understand how this all works, and publishing when publishing is not limited by professional journals.

How to Add HTML in a WordPress Blog Post

Featured

Most WordPress users spend their blogging life in the Visual Editor, the WYSIWYMG editor. Yes, it is the What You See is What You MIGHT Get editor.

While WordPress does what it can to make the Visual Editor emulate what your content will look like once published within your WordPress Theme, it has limits.

One of the limits is that is appears hard to publish HTML in a blog post. It isn’t. You just need to switch to the HTML or Text Editor on the Post/Page Panel.

Before you can publish code on your WordPress blog, there are some things you must know.

  1. WordPress automatically fixes poorly formed code. If you mess up a link or HTML element, WordPress doesn’t recognize it as properly formed code so it will “fix” it for you by replacing < with &lt; or change other code to make it appear as text.
  2. WordPress automatically strips out unwanted or broken code. If you are on , you are not permitted to publish JavaScript, PHP, or other code within your blog posts or elsewhere. But you can publish HTML if you have written it properly in the HTML/Text Editor.
  3. The WordPress Visual Editor expects everything within it to be publishable text or a shortcode, code that displays video and other media or features.
  4. The WordPress HTML/Text Editor expects everything within it to be HTML or something WordPress can use to generate HTML.
  5. WordPress recently changed the name of the HTML editor to Text editor in WordPress.com. This change may be in an upcoming release of WordPress.

There are 66 HTML codes permitted in WordPress posts, Pages, and widgets, codes you can use to make lists, links, blockquotes, images, headings, whatever content you wish to add to your site. Continue reading

Hot Podcasts You Need to Put In Your Ear

Many of my workshops and classes specialize in podcasting or include podcasting tips and techniques.

The following is a list of recommended podcasts to give you a taste of what is out there, the styles and techniques that have proved successful, and those you should add to your listening habit. Continue reading

Blog Writing: Imagine You’ve Been Blogging for the Past Five Years

Can’t think of anything to blog about?

When choosing your blog topics, realize you could be blogging about this topic for years, coming up with new ideas all the time, sometimes daily.

Two photographs of a cat looking out the window of a house, from Band of Cats site.I recently found Band of Cats, a site by an owner of 4 cats, stuffed with funny cat pictures of their own cats plus any other cats, and cat stories, they can find on the web. The first post was July 27, 2007.

While Band of Cats doesn’t publish daily, though they did through most of 2008, they continue to update their site with cat art, cat pictures of the month, holiday cat pictures and items, cat products, and more. While they publish irregularly now, that’s still a huge commitment to the subject of cats.

Think about your own subject matter and imagine you’ve been blogging about it since July 2007 (or pick another date). What would your blog have covered during the past five years?

Usually, we have to project into the future what topics we would blog about. Why not take this backwards and imagine what you would have blogged about if you had been blogging about something for the past five years.

What You Must Know About Writing on the Web

1975.

While that number might mean different things to you, like your birthday, an anniversary, graduation year, part of a lottery number – to me it represents a quota.

Several years ago, a fan counted up all the articles I wrote every year and came up with an estimate of 1,975 articles published annually across multiple sites.

I was stunned. No, staggered. I now had a number. I didn’t know what to do with it. It freaked me out. That’s 164 articles a month. Thirty-eight articles a week. Five and a half a day. That’s a lot.

Don’t even ask to add up the word count. I couldn’t. Yet, the same person estimated that I wrote 2,370,000 words annually.

It took a long time for me to come to grips with that number. I worried when I became smarter with my time and dropped some of the online columns and magazines to concentrate on more influential sites. What if I couldn’t keep up with the numbers?

After a while I gave up and realized it was just a number. Like a random phone number or birth date. Another number not to worry about. Much.

Along the way to generating all those words every year for many years on end, I learned a few things worth sharing. Continue reading

Web Page Annotation and Markup on Live Web Pages

Teaching web publishing with HTML, CSS, WordPress, etc., and working with clients, I long for the ability to just look at a web page or PDF and draw on it. Point out what works, what doesn’t, editing notes, and somehow share it or preserve it. Or make notes. To scribble a note that says “I need to remember this” or “this is cool!”

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

Layers is a tool that allows you to have a conversation on a web page with annotations and image shows the conversation and graphics.In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

How to Schedule Your Posts in WordPress

Example of the Publish Immediate, future or schedule post feature of WordPress.To schedule a post or Page to publish at a time before or after this moment, you may use the Schedule feature in WordPress.

  1. Edit or Add New post or Page.
  2. In the Publish panel of the screen, go to Publish immediately.
  3. Click Edit.
  4. Set the Month, Day, Year, and Time.
  5. Click OK.

WordPress Schedule future post feature allows you to set the date and time the post or Page will publish.If the post or Page is a draft, the Publish button will change to read Schedule.

If the post or Page was published, it will say Update.

Click this when you are ready to update or publish the post or Page. Continue reading

What is a Website Call to Action?

Call to action button called click me with quote that says go on, you know you want to.What is a “call to action” on a site?

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.
Call to Action Buttons: Examples and Best Practices by Smashing Magazine

It is literally a visual hint (or shout) that encourages a user to click or take some form of action.

Calls to action are used to:
Continue reading

Public Domain, Free Photography and Images for Your Blog

Originally published on Lorelle on WordPress and used here with permission. This list is for my classes and workshops needing public domain, royalty free images for their projects.

Colorful brain scan of a mouse - US Science Departments, public domain photographs

Colorful brain scan of a mouse.

I’ve been collecting a variety of resources for free photographs to use on your website and blog. These images are, for the most part, free to use, but may have copyright and usage restrictions. Some may require registration, use only on non-commercial sites, and/or a link back to the source. Others may require more. Check thoroughly for the specific usage rights before using any of these images.

Just because you select a filter for public domain and royalty free images on a Google Image search does not mean these images are actually public domain and royalty free. Check. Ask first, they might say yes.

is a major resource for images, but many of these have restricted use. Not every image on Flickr or the web is free to use. Check thoroughly for usage rights, and if in doubt, get permission or don’t use the image. Check out Flickr’s Public Domain Photos’ Photostream for images specifically marked as public domain.

Autumn Leaves - Morgue Files - public domain free photographs.The images featured range from people, places, wildlife, and space, as well as textures, patterns, and artistic graphic images. These free photos sites listed may have nude or violent images, though I did my best to exclude image sites which specialize in those.

One of the best, kept up-to-date lists for images and graphics in the public domain for free use is Wikipedia:Public domain image resources. I usually start my search from their list, which includes government collections and resources, special subject-based collections, and more.

Continue reading

The Basic Structure of a Blog Post

There are many ways to present a post or article on a web page. This tutorial will cover the basic formatting, styles, and structure.

Every WordPress Theme handles the basic elements in a post different, making the headings stand out in a variety of ways, adding borders around images or not, adding design elements to a blockquote…the list is long. I recommend that you test your own WordPress Theme by writing a test post following the examples in this article, or you may use the Sandbox Post for Testing WordPress Themes. It is a text file with HTML code representative of all the HTML tags found in a blog post.

Formatting the Post in WordPress

Before we begin, I will be making references to the formatting toolbar found on the post and Page Edit Screens. It is blow the post title area and directly above the content textarea where you will write your post.

The WordPress Visual Editor Toolbar featuring the Kitchen Sink Button which expands to feature a second row.

By default, you see only one line of buttons in the Visual Editor. The last button on the row is called the Kitchen Sink. If you click it, a second row will drop down. Continue reading

Copyright: How to Quote and Cite Sources

Reprinted with author’s permission from How to Blog Part 11: Copyright and Citations on Blog Your Passion.

There are two issues to cover as part of this ongoing How to Blog series: Copyright and Citation.

Copyright

In “What Do You Do When Someone Steals Your Content,” I wrote:

Having been the target of copyright thieves, and working with writers, authors, and photographers on copyright protection and laws for over 25 years, I thought I’d talk a little about what to do when someone steals your content.

First, you noticed that I didn’t say “if” someone steals your content. That was on purpose. With the glut of information on the Internet, it’s now a matter of “when” not “if”.

The first step in learning about what you can do when someone steals your content is to know that it will happen, so the more prepared and informed you are, the better your chances of prevention and having a plan in place when they steal.

There are many reasons people take and use content that isn’t their own. The two most common reasons are “I didn’t know any better” and laziness.

The “didn’t know any better” excuse doesn’t work with me. If you went to school in the last few hundred years, you would have learned from elementary school on that copying someone else’s work is not just bad, it can get you punished by being kicked out of school, lose your degree, or even your job.

The Internet is no different than the real world.

Learn how to link and quote from published material to stay safe and on the right side of International Copyright Laws.
Continue reading

Creating a Blogging, Social Media, and Editorial Calendar and Schedule

Nothing to blog about on picture of desert sandsSportsBusiness Journal has one. So does eSchool Media Marketing, GeneaBloggers Genealogy Blog, SheKnows Magazines, and REALTOR® Magazine. Not only do they have one, they redo it every year. What could these very diverse companies have in common? An editorial calendar.

An editorial calendar is critical for the online publisher and web worker today. In traditional media, an editorial calendar was the year planned out in advance on editorial topics, articles, themes, article series, and events. Today, the editorial calendar goes even further covering social media, marketing, advertising, and virtual and direct social interaction. Whether for the individual blogger or a company, an editorial calendar sets goals and deadlines to keep you on track.
Continue reading

2011 Prove It Campaign: Prove Yourself on Your Blog

In January 2012, I started a year long campaign on called Prove It!

I recently learned the true definition of the word “guru.” It means to lift someone up through knowledge and wisdom. It means to teach, to impart wisdom, “to dispel the darkness of ignorance” so that those who go after you will be better for it.

Too often the label is used with arrogance. It doesn’t mean to lord over others as an expert. A true guru probably wouldn’t call themselves a guru. Others would honor them with the title.

After years of being called a guru in WordPress, blogging, and multimedia web publishing and being embarrassed by it, I realized there was more to being a guru than a line on a promotional ad. It’s time to reconsider such self-proclamations without anything to show for it. It’s time to call myself on the carpet to prove my worth, and for others to step up to the plate and prove it themselves.

Here is the article series so far which focuses on proving your personal expertise and experience to back up what you blog about. I just published the last article which includes research on what elements of a website design and content inspire trust in their readers.

Future articles will focus on specific design and content elements with recommendations on WordPress Theme and Plugins to help “prove it” on WordPress sites. I’ll be writing about how to prove it through accuracy in writing, publishing, and interaction with readers, and how to measure the proof of your success through analytics and feedback. I’ll add more articles to this post as the series continues throughout the year.

Email Obfuscation Tools and Scripts

There are a variety of ways to protect and hide emails and other information from email harvesters or just to protect your privacy through obfuscation, a technique on the web that allows displaying of email and content within web browsers so browsers can understand them, but masks them from web crawlers and bots.

A typical email link would be:

<a href="mailto:fredsmith@gmail.com" title="Email Fred">email</a>

An obfuscated email address link would look like this:

<a href="mailto:&amp;#102;&amp;#114;&amp;#101;&amp;#100;&amp;#115;&amp;#109;&amp;#105;&amp;#116;&amp;#104;&amp;#064;&amp;#103;&amp;#109;&amp;#097;&amp;#105;&amp;#108;&amp;#046;&amp;#099;&amp;#111;&amp;#109;" title="Email Fred">email</a>

Free Online Tools to Obfuscate Email Addresses

Instead of doing this manually using HTML Character Entities, there are a variety of free online tools to obfuscate email addresses. The output can be set to be in HTML characters or use JavaScript or other code methods. NOTE: WordPress.com blogs are restricted to only HTML Character Entities.

There are a variety of WordPress Plugins that will handle the job for you automatically, too. Check the WordPress Plugin Directory for the latest versions and options.

For more information on obfuscation, see:

Publishing Responsibilities: I’m Responsible for What I Say

I am responsible for what I say. I am not responsible for what you understand.

This is going around the web and it’s a powerful statement:

I am responsible for what I say.
I am not responsible for what you understand.

It’s a simplified version of:

I know that you believe you understand what you think I said, but I’m not sure you realize that what you heard is not what I meant.
Robert McCloskey

Yet, it goes much further.

How does this relate to social media and web publishing?

Creating a Website Feed For a Feedless Site

Feed iconThere will be times when you will want to create a feed to add to your feed reader from a site that doesn’t have a feed so you can monitor the site for changes, updated, or new content. Here are some free, online feed creation services to try. Not all create feeds from sites without feeds equally, so experiment with these to find the right one.

In general, you will want to provide the “front” page or the page with the most active content you wish to follow. For example, if you wish to only follow the WordPress information from a specific site and not the rest of their content, then you would create a custom feed for their WordPress category, subdomain, or search results.

These are not meant to replace the feeds provided by websites but to use them on sites without feeds.