Category Archives: WordPress

Lorelle VanFossen is one of the leading experts and evangelists on WordPress. She offers a variety of educational programs, workshops, trainings, and keynote presentations on WordPress. This category is dedicated to all things WordPress to support her educational programs.

Check out the extensive list of WordPress information and resources including:

WordPress Tips

WordPress Cheat Sheets, Checklists, and Infographics

WordPress Under the Hood

WordPress Theme Resources

WordPress Plugin Resources

Also check out all the articles Lorelle offers on WordPress in her WordPress courses including WordPress Tips, WordPress Themes, and WordPress Plugins, as well as specific classes and workshops such as the Clark College Introduction to WordPress Class and its Assignments.

For more comprehensive coverage of WordPress topics, see Lorelle on WordPress, WordPress Codex, the online manual for WordPress Users, Learn WordPress, and the WordPress Support Forums for the self-hosted version of WordPress, and the WordPress.com Forums for WordPress.com hosted sites.

————————————————————————————————————————

Tutorial: Tools for Evaluating and Testing Web Pages

Posted on September 12, 2012 by Lorelle VanFossen

There are many online tools, web browser extensions, and add-ons to help you evaluate and test web pages. We will be talking about web page validation later, but you can use these tools now to become familiar with such tools and how to integrate them into your web browser.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

Go to the page or site for your browser’s extensions or add-ons:
Follow the instructions.

Continue reading →

How to Log Into WordPress

Posted on September 10, 2012 by Lorelle VanFossen

How to Log Into WordPress from Lorelle VanFossen

There are many ways to log into your WordPress or WordPress.com site. Here are some of the standard techniques.

Login from WordPress.com

Go to http://wordpress.com/
Click the LOGIN button.
If you have forgotten your password, use the forgotten password feature to let WordPress automatically reset it to a temporary password. They will email it to your registered email address.

Once you have logged into WordPress.com, you will be on the Global Dashboard panel.

From there, you can view your blogs, write a fast post, and access your various blogs.

From the URL/Address Bar

From the address bar in your browser, you can quickly log into your WordPress site by typing in one of the following:

The latter, “login” is the fastest way.

This will bring you to the login screen where you can login or request a forgotten password.

Once you have logged in, you will be on the Dashboard panel of the WordPress Administration Panels.

From the WordPress Sidebar

If you have enabled the WordPress Widget called “Meta” and dragged it to a spot on your site’s sidebar, you and members, contributors, and authors may log into your site through the front door, so to speak.

Scroll down the sidebar to look for the WordPress Widget Meta, or whatever you may have renamed it.
You will see “log out” if you are logged in, and “log in” if you are logged out.
Click it to access the login panel.

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

Posted on September 8, 2012 by Lorelle VanFossen

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

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.
Right click on an empty space on the web page and choose View Page Source or View Source.
The resulting popup window (or tab) will show you the underlying HTML structure of the page.
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

Posted on September 3, 2012 by Lorelle VanFossen

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.

External Links
Internal Links
Jump Links
Image/Multimedia Links
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>

a: The HTML Anchor tag.
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.
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.
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 →

Cleaning Up Your HTML and CSS Code

Posted on August 27, 2012 by Lorelle VanFossen

Teaching HTML Fundamentals at Clark College in Summer Quarter 2012 was a step back into history and a good learning lesson for me about teaching but also about HTML.

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”
Continue reading →

Tutorial: Tidy Your HTML and CSS Code

Posted on August 27, 2012 by Lorelle VanFossen

The following is a tutorial for the HTML Fundamentals Class for Clark College. The information pertains to all web design, development, and WordPress fundamentals in WordPress Theme and Plugin development.

There programs designed to "tidy" your HTML and CSS into a format that meets typical standards for code layout. These take hard-to-read markup (code) and clean them up into a consistent format.

These tidy programs will not fix your broken code, but they may identify errors to help you fix it yourself.

Tidy programs were originally created by Dave Raggett to help clean up the HTML code. HTML TIDY now supports HTML5 and HTML exported from Google Docs, Word, and other publishing programs.

There is now a community supporting TIDY and you can learn more on TIDY Sourceforge Project.

There are also CSS TIDY programs. These work the same as the HTML versions. They include: CSSTidy and CSS Formatter and Optimiser/Optimizer (Online).

TIDY is available for cleaning up online or offline, and is incorporated into many text editors and programming editors. it is available for a variety of operating systems and in different programming languages such as Java, Perl, and Python.

To use these, follow the instructions provided by the developer. Always save a backup of the original file, called "about.bak" or something similar, just in case.

For online versions, it is as simple as uploading the file to be cleaned or pasting the file contents into the form. Copy the cleaned code and paste it into a copy of the file name or create a new version of the file and rename it to the desired name.

Learn More About TIDY

HTML and CSS Basics Tutorial [Video]

Posted on August 27, 2012 by Lorelle VanFossen

The following video is for Clark College’s HTML Fundamentals Class and covers the basics of HTML and CSS you need to know for building and fixing web pages. It also applies to understanding the underlying architecture for WordPress Themes.

CTEC 122 HTML and CSS Basics You Need to Know from Lorelle VanFossen on Vimeo. Continue reading →

Web Browser Tips for WordPress, HTML, and Web Design

Posted on August 27, 2012 by Lorelle VanFossen

The following video contains useful web browser tips to help you speed you your browsing, WordPress, and web design work.

Basic Web Browser Tips by Lorelle VanFossen for Clark College from Lorelle VanFossen

Please note that the video refers to the Windows keyboard shortcuts using the CTRL key. This is the equivalent to the CMD key on Mac.

For mobile devices, long presses usually activate the equivalent of keyboard shortcuts and right clicks, though not all of them may be available in the apps you are using.

Here are some of the specific tips covered in the video.

Editing (just like in a word processor)
- CTRL+C = Copy
- CTRL+X = Cut
- CTRL+V = Paste
- CTRL+Z = Undo
CTRL+T = Open New Tab
F5 = Reload/Refresh Page
Zoom in and out of a web page (magnify): CTRL+Plus and CTRL+Minus
Right click on links on the page brings up the right click menu to access link specific options and features.
Right click on blank or empty spaces on a web page brings up the right click menu for page specific options and features.
Learn to open web pages in tabs not windows. This saves on computer memory issues and speeds up your browser process.
- Use Mouse and Keyboard shortcuts: CTRL + Left Click on Link = Opens Linked Page in New Tab
Fast Navigation through Browser Tabs
- CTRL+T = Opens New Tab
- CTRL+1 = Goes to Tab #1
- CTRL+ 2, 3, 4, etc. goes to that tab number
- CTRL+Arrow = moves focus to next and previous tab
Working on web page design or WordPress? Refresh and you don’t see changes? You need to clear the cache and do a "hard" clearing page reload. F5 or SHIFT+F5 OR do a Cache Refresh
- CTRL+F5 (Firefox and Chrome)
- CTRL+Shift+R (Firefox)
- CTRL + R (Chrome)
- (You may have to repeat a couple times)
To view the source code of a web page: Right Click > View Page Source
Web Developer Tools
- Use Built-in Web Developer Tools plus Firebug:
- Measure It: Measure It for Firefox or Measure It for Chrome
- Color Pickers: Colorzilla for Firefox and Chrome
- Copy Link as Proper HTML Link: CoLT for Firefox or Chrome Create Link or Chrome Copy Link Text
- For preserving and sharing code snippets on your site, in comments, forums, and social media use PasteBin: Pastebin for Firefox and Chrome

Summer WordPress Intro Homework: Podcasts

Posted on August 6, 2012 by Lorelle VanFossen

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

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

Continue reading →

Announcement: Introduction to WordPress Final Class Project Teams

Posted on August 6, 2012 by Lorelle VanFossen

Clark College WordPress Intro Class Project For 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

Posted on August 1, 2012 by Lorelle VanFossen

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

Posted on July 26, 2012 by Lorelle VanFossen

Outcomes

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

Review

Review the following assignments:

Continue reading →

WordPress Intro Summer 2012: Homework for Week Three

Posted on July 19, 2012 by Lorelle VanFossen

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

Posted on July 11, 2012 by Lorelle VanFossen

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 →

How to Sign Up for WordPress.com Blog

Posted on July 5, 2012 by Lorelle VanFossen

CTEC 280 How to start a WordPress.com site from Lorelle VanFossen on Vimeo.

This video contains instructions and screencasts for registering for a WordPress.com blog. It includes tips for new users and already registered users.

We will be starting with a WordPress.com blog whether or not you have another WordPress site.

Trust me. You will be making mistakes, experimenting, messing things up. The class also needs to be all working on the same thing for the first few weeks of the class – no arguments. Once you learn how this all works, you can go mess up your own site at will.

Here is what you need to know about creating your WordPress.com site:

Create a temporary blog domain name such as myclassblog1234.wordpress.com or myname987.wordpress.com. You will NOT change this. Pick right the first time.
Even if you have a WordPress site, you will only use the above WordPress.com site for homework and class assignments. You may transfer content over to your site later.
You will choose the Twenty-eleven WordPress Theme. Everyone will be using it for the first few weeks of the class.
Homework assignments are to be stored in the “Class Assignments” parent category.
While you can publish whatever you want on your blog, it is recommended you publish your homework and work with content related to the site’s intent.
The Privacy Settings for the site must be set to visible and “Ask search engines NOT to index this site.”
During the class, Clark College teachers and the students in this class will be reading the blog, therefore your content must be work/family appropriate during the course.
Homework assignments may be copied and used for future classes by the teacher and college.
Plagiarism will not be tolerated. Homework assignments are not to be copied and published publicly on your blog.
It is your responsibility to keep the blog maintained or delete it no sooner than 6 weeks after the class grades are posted.

For information on installing the self-hosted version of WordPress, see Installing WordPress on the WordPress Codex.

For more information on using WordPress, check out:

Lorelle Teaches
WordPress Resources – Lorelle Teaches
WordPress Codex, the online manual for WordPress Users
WordPress Cheat Sheets, Checklists, and Infographics
WordPress News (official)
WordPress.com News (official)
Lorelle on WordPress
Blog Your Passion

WordPress Intro – Summer Quarter: Week One Class Two Assignments

Posted on July 5, 2012 by Lorelle VanFossen

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

Edit your blog posts based upon the new class information, if necessary.
Write and publish:

5 posts using multimedia
2 posts with blockquotes (in HTML)
A list post
Create a Policy Page. Add a copyright policy. Add Creative Commons license and image.

Read assigned reading material on lorelleteaches.wordpress.com or Moodle. Start an article To Do List with ideas for blog posts.
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

Posted on July 3, 2012 by Lorelle VanFossen

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

WordPress Summer Class at Clark Announced

Posted on June 4, 2012 by Lorelle VanFossen

The Summer Quarter at Clark College starts in July and now is the time to register for the Introduction to WordPress course, the world’s only full-credit college course on WordPress. There are only 15 slots left.

The 4 credit class runs Tuesdays and Thursdays from 6-8:30PM July 3, August 23 at Clark College in Vancouver, Washington.

Registration for the Public is June 6 – June 14. Current Clark College students can register now.

INTRODUCTION TO WordPress CTEC 280 ITEM# 1867

New students must apply as a TRANSFER student to allow for a more direct and streamline registration process.

Here are the specific instructions and I recommend you print them out so you have them with you through the process:

Register at the college as a TRANSFER student by June 14.
1. Clark College Admission Information
2. See Clark College Tuition rates for a four credit course, plus $10 fee for the class. (Note: Rates will be increasing in the Fall.)
3. Register Online
4. Register in Person
Within 24 hours you should receive an email confirmation from Clark that will assign you a student ID number. Use this number to register for the class.
To register for the class:
1. Email to prof.tech.adv@clark.edu with your name, contact phone numbers, student ID number, and any follow up questions you may have. In the subject line, indicate you are interested in registering for the CTEC 280 Intro to WordPress class.
2. You will receive another email or phone call within 2 business days from Clark Advising with instructions on how to register for the class and complete the process.

If you have additional concerns or questions regarding this process contact John Maduta in Advising 360-992-2327 or Reesa McAllister in the CTEC office or call 360-992-2106.

The number of seats is limited to 20. The course is ideal for any business professional, small business owner, web designer, web publisher, or anyone who needs to get WordPress on their resume or learn how to create their own website or blog, so hurry.

Here are some of the lesson specifics and you can learn more on my Learning from Lorelle (Lorelle Teaches) site:

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.

For more information, see the first announcement about the Clark College Introduction to WordPress class, the Spring Quarter announcement, and Clark College Course Catalog (CTEC is the department).

WordPress and PHP

Posted on May 22, 2012 by Lorelle VanFossen

I had the honor of being a guest speaker for the PHP class at Clark College in Vancouver, Washington. The following is the slideshow presentation and references and resources mentioned during the presentation.