WordPress Site Structure and Organization

This article supports my recent presentation at PDX WordPress Meetup titled “Organizing Your WordPress Site.”

Please note that I’ve included articles from ClarkWP Magazine, the student run and managed site for my Clark College WordPress classes, as reference material throughout this article.

Before beginning to structure and organize, or reorganize, your WordPress site, there are some WordPress terms you need to know.

Whiteboard with site structure.

Continue reading

Web Writing: The Editorial Article

Editorial writing consists of writing and publishing an article that takes a stance on a topic. The position must be supported with documentation, reference material, and quotes.

Editorial writing for the web is based upon the fundamentals of traditional editorial writing, similar to op-eds but slightly different, modified by the needs of the web reading audience.

An op-ed piece is an opinion. It is distinguished from other articles in a magazine and newspaper as they may be well written but they do not represent the rules and guidelines required by journalists and reporters. The writers are typically not reports, nor educated in journalism.

An editorial article may be an opinion piece, but it is one that argues a specific point or perspective. On the web, an editorial article may be written by a reporter, journalist, professional writer, or anyone with a defensible opinion.

This article explores the specifics of editorial articles written and published on the web, specifically on blogs. It covers the basics of a web-based editorial article with tips, techniques, guidelines, and references. It is used by the students at Clark College in the web publishing courses taught by Lorelle VanFossen, and may be used by other educators. Continue reading

Lorelle Presents Writing with WordPress Workshop in Salem, Oregon

If you live in the Salem, Oregon, area, don’t miss this special event and workshop.

I’ll be leading a workshop in Salem, Oregon, specifically designed for writers and authors using WordPress. The event is part of the great work the Salem Chapter of the Willamette Writer’s Group, a regional group of writers and authors in the Pacific Northwest area.

The events begin with a presentation on Wednesday, March 12, 2014, at 6:30PM at Macey’s Salem Center. I will be talking about the challenges of a writer and author site, and introducing members to the different types of sites for writers and authors and how to build a community and audience around a site or book. The meeting is free, I believe.

Sunday, March 16, is a half-day workshop from 1-5PM at the Salem Public Library. We will dive deeper into customizing a WordPress site specifically for the needs of the writer, be it for the author and their books, to support a book or book series, and other alternative site types. This is a highly interactive workshop.

Participants in the workshop will need to bring their laptops or tablets. WIFI will be available. If participants do not have a current WordPress site, they will be led through the process of setting up their own free WordPress.com site.

The workshop will be customized based upon the needs of the attendees, so here is a general list of topics covered during the four hour workshop: Continue reading

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?

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

This is an Example of a Blockquote

According to Lorelle:

We are all born with two ends. One is used for sitting. The other is not. Success in life depends upon which one you use the most. Heads you win. Tails you lose.

This is great wisdom of the ages, applicable to everyone, especially students.

I’m reminded of the old Hillbillies television show. There was an episode with the son, Jethro, where he decided, after jumping into the cement pond and bashing his head on the bottom, that he had a light bulb idea. He wanted to go to a fancy universiteee and become a world-famous neurosurgeon. His dad took one look at his son, trying to find a reason to feel pride and stay politically correct, and said, “Ain’t hope wonderful.”

Don’t be a Jethro.

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

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

Tutorial: How to Inspect, Edit, and Save a Web Page

This tutorial from the HTML Fundamentals Class I taught at Clark College in Vancouver, Washington, is a guide that will show you how to:

  • View the source code of a web page.
  • How to save a web page to your computer
  • How to view a saved web page on your computer
  • How to open a web page in your text editor
  • How to view the CSS/Stylesheet for a web page
  • How to inspect the HTML and CSS of a web page
  • How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

  1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
  2. Right click on an empty space on the web page and choose View Page Source or View Source.
  3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
  4. You may save this to your hard drive or go back and save the entire web page to your computer.

Continue reading

Links and the Anchor HTML Tag

This is a tutorial from the HTML Fundamentals Class I taught at Clark College in Summer 2012. It applies to HTML and WordPress.

There are five basic forms of links on a web page.

  1. External Links
  2. Internal Links
  3. Jump Links
  4. Image/Multimedia Links
  5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>
  1. a: The HTML Anchor tag.
  2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
  3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
  4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

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.

Example of a Sandbox Post for Testing WordPress Themes

This is the H1 Heading

This is an example of a sandbox post for testing WordPress Themes and web page designs to ensure every design detail within the content area of a Theme meets with your design needs.

To use this sandbox post for your own testing, right click the following link and save the file as a text file. Open it within a text editor and select all of the text and paste it into your WordPress site with the HTML/TEXT editor – not visual editor. Save the post or publish it to view the post content designs.

This is the link to the sandbox post text file.

This sandbox post is available for free. Use as you wish.

At the top of this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.

If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.

Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.

This is the H2 Heading

Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.

However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.

This is the H3 Heading

Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.

For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.

Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.

This is the H4 Heading

In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.

Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.

Continue reading