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

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

What is the Difference Between a Website and a Blog

Colorful text says blog versus website.We live in a world of ever changing terms and jargon. Let’s see if this will add to the confusion or clear things up when it comes to what to call a blog and what to call a website.

A website, or site, is a collection of web pages.

A site is designated by its domain name, the part of the address or URL that defines the site such as WordPress.com, WordPress.org, or lorelle.wordpress.com.

A web page is any page on the web, usually found within a website.

A web page’s address is an extension of the domain name such as example.com/article-title.

A blog is a site with content displayed in reverse chronological order.

These are the facts. A site can be a blog and a blog is a site. 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

Summer WordPress Intro Homework: Podcasts

Outcomes

  • Complete audio and video "podcast" within the class and publish one each on your blog.
  • Analyze the different presentation styles of design and show notes related to a podcast.
  • Explore syndication options through feeds.
  • Introduction to Statement of Work and Final Project

Homework Assignments

  1. Complete the audio and video posts with "show notes."
  2. Read articles on Statement of Work, Interviewing Clients, WordPress Theme checklists, and Web Practitioner.
  3. Complete all tasks on Your Blog So Far.
  4. Contact the members of your team for the Final Project
  5. Start planning and strategizing your Final Project.

Continue reading

Announcement: Introduction to WordPress Final Class Project Teams

Clark College WordPress Intro Class ProjectFor the final project, the WordPress Introduction class at Clark College was divided into teams to create a small business site on WordPress.com. This gave the students a chance to put into practice what they learned and find creativity within the limitations of WordPress.com. The small business sites are hypothetical, giving them a chance to use their skills in web design, content strategies, and WordPress to serve a variety of business “clients.” The business types were chosen from lists of the top 500 most popular small businesses in the United States representing potential future clients.

The following are the teams for the Introduction to WordPress Final Class Project:
Continue reading

WordPress Intro Summer: Design, Template Files, Conditional Tags, and Child Themes

In Class 10 of Introduction to WordPress, we covered:

  • Design elements considered the “most hated” in web design.
  • What design elements make you trust a website.
  • CSS in WordPress revisited: How to find your CSS styles in WordPress.
  • The WordPress body_class() template tag.
  • The WordPress Theme Template File Hierarchy.
  • WordPress Conditional Tags.

NOTE: On Thursday, August 2, we will be doing video and audio. Bring your digital cameras and recording devices and be willing to share if you have extras.

Homework

Read the following:

Create a Child Theme on your portable WordPress install and change one design element to change the look of the Parent Theme.

Write and publish an article with screenshots to show how you used the Child Theme to change that design element.

Get your blog’s updated per the list below. Remember, your class site represents a large part of your final grade.

Continue reading

WordPress Intro Summer: Themes, Interactivity, Social Media

Outcomes

  1. Basics of managing multiple authors and contributors (user permissions).
  2. WordPress Theme customization for changing header art, background colors, links, etc.
  3. WordPress Theme customization with customized template files and conditional tags.
  4. Interactivity within WordPress with comments, trackbacks, and pings.
  5. Social Media integration with WordPress.

Review

Review the following assignments:

  1. Introduction to WordPress Homework Class 4 – Introduction to WordPress Themes | Learning from Lorelle
  2. Homework: Introduction to WordPress Class 5 – Interactivity and WordPress | Learning from Lorelle
  3. Homework – Class 6 – WordPress Hybrid Themes and Widgets | Learning from Lorelle
  4. Introduction to WordPress Homework – Class 7 – Feeds, Subscriptions and Social Media Integration | Learning from Lorelle
  5. Introduction to WordPress Homework – Class 10 – Design, Template Files, Conditional Tags, Class Project | Learning from Lorelle
  6. Introduction to WordPress Homework – Class 12 – Video, Audio, and Podcasts | Learning from Lorelle
  7. Introduction to WordPress Homework – Class 13 – Theme Customization and Child Themes | Learning from Lorelle

Continue reading

WordPress Intro Summer 2012: Homework for Week Three

In Class 5 of Introduction to WordPress, we cover:

  • Introduction to how to comment on WordPress.
  • Overview of Comment Spam and introduction to Akismet WordPress Plugin.
  • How to monitor, manage, and edit comments in WordPress.
  • Introduction to creating a Comments Policy.
  • Introduction to security and privacy concerns within WordPress.

Homework Assignment

  • Profile updated and accurate, and display name set to be “human.”
  • Write a blog post about one of your fellow student’s blog posts to create a trackback.
  • Comment on blogs everywhere, especially fellow students. See if you can get them to come to your site and comment.
  • Add a Comments Policy to your Policies.
  • Present a 3 minute presentation on some feature on the WordPress.com Administration Panels next Tuesday!

Continue reading

WordPress Intro – Summer 2012: Week Two Homework Tuesday

In Class 3 of Introduction to WordPress, we covered:

  • More on what can go into a WordPress blog post.
    • WordPress.com Shortcodes.
    • Uploading multimedia and publishing it.
  • Organizational structure of Posts, Pages, Categories, and Tags
  • WordPress Theme introduction
    • How to use a sandbox post text file for testing WordPress Themes and post content HTML.
    • Introduction to the WordPress Loop
    • WordPress Pageviews
    • Post Formats
    • Changing WordPress Themes
    • Basic WordPress Theme customization

Continue reading

WordPress Intro – Summer Quarter: Week One Class Two Assignments

The following is the homework assignments for day two of the first week of the class.

  1. Edit your blog posts based upon the new class information, if necessary.
  2. Write and publish:
    1. 5 posts using multimedia
    2. 2 posts with blockquotes (in HTML)
    3. A list post
    4. Create a Policy Page. Add a copyright policy. Add Creative Commons license and image.
  3. Read assigned reading material on lorelleteaches.wordpress.com or Moodle. Start an article To Do List with ideas for blog posts.
  4. Goal: By the end of the next week you’ve published a minimum of 5 posts in every category.

Assignments are due Thursday, July 12.

WordPress Intro: Week One Assignments

Welcome to the first week of the Summer Quarter of the Introduction to WordPress course at Clark College. Here is the homework for the first week.

Outcomes

  • Understand the core content elements of WordPress.
  • Introduction to WordPress semantics and nomenclature.
  • Introduction to content conception and generation.
  • Introduction to WordPress dynamic web pages and WordPress Themes.
  • Introduction to WordPress content organization and navigation.
  • Basics of setting up a WordPress blog.

In Week 1: Day 1 Introduction to WordPress, we covered:

  • What is WordPress
  • Basic Semantics/Glossary/Terms
  • Create a WordPress.com blog
  • Categories and Tags to organize content navigation
  • Blog Title and Tagline
  • Introduction to Basic Content Formats: Posts and Pages

You will create your test blog during the class, add a Page and a Post, set up your profile, and start thinking about what you are going to publish on your blog during this course.

It is important that you choose a topic on which you have something to say in addition to the topics and assignments covered in class. We will all be reading your blog and looking for thoughtful content, so be ready.

A well designed and structured site is built around content. I call it "content with intent." You cannot make framework or design decisions without understanding your content, audience, and specific needs that support that content. So we start with content and build from there.

Homework Assignment

  • DUE TUESDAY NEXT WEEK.
    • Group brainstorm words into categories (no more than 7)
      • Title the categories
      • Write 3 blog posts minimum, one per category, 200 word minimum each
    • Complete your About Page
    • Create a Contact Page
    • Complete your Profile
      • Set your Gravatar
  • PREP FOR THURSDAY’S CLASS:
    • Create or find 5 copyright free photographs, graphics or images and bring them to class on a thumb drive/flash stick.
    • Find 3 YouTube videos and bring the links to their pages to the class.
    • Read the material in the Reading Section.
    • Watch the video on Moodle: Web Browser Tips Resource.

Reading

The following are recommended reading assignments from the WordPress books in the 24×7 Book program. Please note the notes on book naming conventions and confusion in the class preparation post.

  • WordPress 24-Hour Trainer
    • Lesson 1: Thinking Like WordPress
    • Lesson 2: Planning Your Site for WordPress
  • WordPress All-In-One for Dummies
    • Book 1 – Chapter 1 – Exploring Basic WordPress Concepts
    • Book 3 – Chapter 3 – Section on Creating Your Personal Profile
    • Book 3 – Chapter 7 – Creating Categories and Tags
    • Book 4 – Chapter 1 – Writing Your First Post
    • Book 4 – Chapter 2 – Examining the Difference Between Posts and Pages

Class Images

The following images are public domain and royalty free and you may use these in the class assignments.

Welcome to Introduction to WordPress Spring 2012

WordPress word wordle artWelcome to the second “Introduction to WordPress” class at Clark College this spring, the second ever in the world. The first course was a resounding success with no students failing nor dropping the class. Amazing. You can read more about it

Introduction to WordPress is focused on the core features and functionality of WordPress right out of the box – specifically out of the WordPress.com box. We’ll explore the full features of WordPress and WordPress.com and concentrate on content building and strategies. The extra features that come with free WordPress.com blogs are based upon popular WordPress Themes and Plugins, giving us experience using the extensible and customization features available for the self-hosted version of WordPress.

If time allows, we’ll work our way towards some basic WordPress development, planning website layouts and content support for a variety of business needs.

I’ve summed up most of what you will learn in this Introduction to WordPress course in WordPress Credit Course at Clark College in Vancouver, Washington.

You will learn:

  • What is WordPress?
  • How to setup a WordPress.com blog.
  • Categories, tags, and content organization and navigation.
  • Web publishing with the visual editor, HTML editor, QuickPress/PressThis, mobile, and alternative publishing tools.
  • Publishing multimedia with WordPress.
  • Content development and management.
  • Introduction to basic core site customization (header art, widgets, etc.).
  • Introduction to dynamic web page generation.
  • Introduction to dynamic web design.
  • Introduction to WordPress Themes.
  • How to use Post Format Types.
  • Comments and spam management.
  • Multiple users and authors (permissions/authorities).
  • Managing multiple contributors.
  • Basic analytics and statistics with WordPress.com Stats.
  • WordPress and SEO.
  • Introduction to WordPress hybrid sites.
  • How to create and manage custom menus.
  • WordPress Widget functionality and customization.
  • Understanding WordPress interactivity through trackbacks, pingbacks, and pings.
  • WordPress feed management, integration, and customization.
  • Integration of social media to and from WordPress.
  • Managing a private or restricted access WordPress site.
  • Introduction to WordPress Plugins.
  • WordPress installation options.
  • Troubleshooting WordPress.
  • Introduction to WordPress development for employers and clients.

The program is fairly flexible based upon student abilities and learning process. We will explained into more technical aspects in WordPress as much as time permits.

The class requires are competency with computers and web browsers, as well as basic writing skills. See Class Requirements below for details. It is highly recommended that you have HTML Fundamentals and Introduction to PHP if you wish to pursue WordPress towards a career. Check with Clark College’s course catalog and counselors for more information on the various programs you will need for a WordPress and web practitioner degree program.

Be ready to:

  • Create your own blog.
  • Have something to say and share on your blog, enough for ten weeks.
  • Use social media networks (Twitter, Facebook, Reddit, and Google+).
  • Interact with fellow students.
  • Interact with fellow bloggers.

Continue reading

Introduction to WordPress Class 18 – Troubleshooting WordPress

In Class 18 of Introduction to WordPress, we covered troubleshooting WordPress including:

  • Determining what exactly is breaking or not working within WordPress.
  • Identifying where to get help.
  • Troubleshooting methods for post content, WordPress Themes, WordPress Plugins, and servers.

Below is also the criteria for the Class Project presentations this week.
Continue reading