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

How to Link to Posts, Pages, Categories, Tags, Authors, and Feeds in WordPress

Featured

WordPress code logo thumbnailThis is a tutorial on how to link to the various features found on a typical WordPress site.

Wish to promote an author your site? Need the link to their author pageview? Wish to link to a specific category? Want to share the link to your WordPress site feed?

There are many times when you may wish to link to a feature or function on your site. Here is a list of the various areas you may wish to link to from posts, Pages, Widgets, and in emails and social media posts to help people find information on your site.

How to Copy a Link

We call them “links” but the proper names are hypertext link and the link is created with an HTML Anchor Tag.

A well-formed link in HTML looks like this:

<a href="http://lorelle.wordpress.com/" 
title="Lorelle VanFossen of Lorelle on WordPress.">
Lorelle VanFossen</a>

It features the link to the destination, the title selector to describe the destination of the link, and the anchor text, the words visible on the page to the reader.

This is called a well-formed or properly formed link as these three items are required by US and international law for web standards and web accessibility.

To copy a link, there are two methods. The first is the most commonly used technique.
Continue reading

WordPress Site Models

Featured

WordPress serves as a web publishing platform and Content Management System (CMS). There are a variety of layouts and site organizational structures to choose from when setting up a WordPress site. These are known as site models.

There are three core site models: blog, static, and hybrid.

There are pros and cons to each one. Let’s look at each one.

The Static Site Model

Site model example of a static website, each page on the site a separate web page - graphic by Lorelle VanFossen.In the old days, websites consisted of static web pages, one web page for each article. Today’s CMS platforms like WordPress offer the same static feel and structure as a design decision.

The challenge of using WordPress as a static site takes a little thinking around the whole posts verses Pages and categories verses tags content organization options. In general, most static sites will never use posts only Pages.
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

Exploring the New WordPress Media Manager

WordPress 3.5 is due December 5, 2012, and brings with it the new Media Manager, a much anticipated improvement to the Media Uploader and Media Library in WordPress.

Check Out the New Media Manager in WordPress is an extensive article and review I’ve published on . It features a step-by-step tutorial on using the new Media Manager for uploading and managing your images, video, and audio on WordPress, as well as a few of the unusual quirks in the new feature.

If you have a WordPress.com site, you will be able to test drive the new WordPress Media Manager. Those with the self-hosted version of WordPress will need to wait until December 5 when WordPress 3.5 is released or become a beta tester.

How to Add HTML in a WordPress Blog Post

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

The Basics You Must Know About a WordPress Theme

code wordle - group of words that are synonyms and types of code.In 2005, WordPress became modular separating the design and architecture from the core programming code.

Today, a WordPress Theme contains files called template files that hold the architecture of the site and template tags, code that initiates actions within the site and data from the database. The design is applied through a stylesheet, holding the instructions for the colors, images, and look and feel of the entire site.

This tutorial covers the basics of the structure of a WordPress Theme and standard customization options.

The Structure of a WordPress Site

WordPress Example site featuring the layout basics of header, content, sidebar, and footer.Like all websites today, a WordPress site contains a background area, header, sidebar(s), content area, and footer.

The background area is considered the canvas that the site’s structural and design elements rest. It is usually a solid color, pattern, texture, or a design that does not overwhelm the rest of the content and design elements.

The header area content is set from within the WordPress Administration Panels through the Settings > General for the site title and site tagline.

The header art image is set from within the Appearance > Custom Header Image. WordPress now permits a wide range of images and image sizes to be used as the custom header image, and permits some level of cropping and positioning.

The sidebar(s) contain navigation, information, and design elements that complement the site’s purpose and content. In WordPress, this information is held in WordPress Widgets, modular content elements that can be moved around in the various sidebars, footers, and occasionally the header area. These are accessed and modified in Appearance > Widgets.

The footer is located at the bottom of the site. It usually features the name of the WordPress Theme and its author to give them credit, and the words “Powered By WordPress” with a link to or . It may also feature footer Widgets accessed through Appearance > Widgets > Footer.

The content area holds the content of the page depending upon the request of the user to view the front page, a Page, a single post, a search, categories, tags, author posts, archives, and other multiple post pageviews. Continue reading

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

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

WordPress Links and Blogroll Feature Gone in WordPress 3.5

With the release of WordPress 3.5 soon, expect to see the WordPress Links feature, also known as the Blogroll, gone.

I’ve written more about this in “Blogrolls Gone in WordPress. How to Save Your Links” on .

The article includes an explanation of why as well as tips and techniques for exporting and saving your WordPress links, and how to display them in new ways within WordPress.

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