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 , , the online manual for WordPress Users, Learn WordPress, and the for the self-hosted version of , and the WordPress.com Forums for hosted sites.

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

Tutorial: Tidy Your HTML and CSS Code

Posted on by
Reply

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.

Example of Tidy HTML cleaner before and after

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 by
1

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 by
2

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

WordPress Summer Class at Clark Announced

Posted on by
Reply

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:

  1. 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
  2. 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.
  3. 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 by
1

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.

WordPress Codex PHP and Programming References

Other WordPress and PHP References and Resources

Class Images

Gallery

Posted on by

This gallery contains 204 photos.

The following images are public domain and royalty free and you may use these in the class assignments. Header Images featured below. Non-header Images Header Images Please note that these images may be used for header art but the size … Continue reading →

Testing Broken Posts

Posted on by
Reply

The following is a test for my students to detect code errors. It features Lorem Ipsum based upon the cult television show, Arrested Development.

Let ‘Em Eat Cake

No… but I’d like to be asked! I’m half machine. I’m a monster. Get me a vodka rocks. And a piece of toast.

Meat the Veals

I’m half machine. I’m a monster. I don’t understand the question, and I won’t respond to it. It’s called ‘taking advantage.’ It’s what gets you ahead in life. Really? Did nothing cancel? Whoa, this guy’s straight?

  • I’m afraid I just blue myself.
  • Steve Holt!

Meat the Veals

There’s so many poorly chosen words in that sentence. He’ll want to use your yacht, and I don’t want this thing smelling like fish. But I bought a yearbook ad from you, doesn’t that mean anything anymore? Well, what do you expect, mother? I’m afraid I just blue myself. No… but I’d like to be asked!

Good Grief!

Really? Did nothing cancel? Michael! We just call it a sausage.

  1. We just call it a sausage.
  2. I’m afraid I just blue myself.
  3. We just call it a sausage.
  4. I’m afraid I just blue myself.

Mr. F

There’s so many poorly chosen words in that sentence. Whoa, this guy’s straight? That’s what it said on ‘Ask Jeeves.’ We just call it a sausage. No… but I’d like to be asked! I care deeply for nature.

Exit Strategy

Well, what do you expect, mother? I’m afraid I just blue myself. I don’t criticize you! And if you’re worried about criticism, sometimes a diet is the best defense. Bad news. Andy Griffith turned us down. He didn’t like his trailer. Bad news. Andy Griffith turned us down. He didn’t like his trailer.

Guy’s a pro. Get me a vodka rocks. And a piece of toast. I’m a monster.

Really? Did nothing cancel? There’s only one man I’ve ever called a coward, and that’s Brian Doyle Murray. No, what I’m calling you is a television actor. It’s a hug, Michael. I’m hugging you. Not tricks, Michael, illusions. No! I was ashamed to be SEEN with you. I like being with you. There’s so many poorly chosen words in that sentence.

Welcome to Introduction to WordPress Spring 2012

Posted on by
Reply

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 – Special Guest Panel

Posted on by
Reply

Our Introduction to WordPress class is honored tonight with five fascinating business people, each one using WordPress in different ways. This is the time to get all your WordPress questions asked and answered by WordPress users, designers, and developers, especially questions associated with your final class projects. The group represents all levels of WordPress expertise.

Kim GreenhouseKim Greenhouse is the producer of It’s Rainmaking Time!™ — Amazing Breakthroughs, Conversations, and Discoveries for Everyone, a multimedia publishing company focused on new and ancient knowledge, solutions, and discoveries – uncovering the “truth behind the news.” Recent podcast episodes include Finding Light in the Thick, Dark Fog about social inequality and cultural oppression for a small group of Native Americans, Is Something Fishy About Fish Oil? on the true impact of the fish oil supplement, A Real Life Da Vinci Code about the Chinese arriving in the Americas before Columbus, Healthy & Safe Dentistry, and New Hope for the World on Internet privacy, freedom of speech, and economics in Iceland.

dan portis-cathersDan Portis-Cathers of Deep Sea Music is an award-winning composer for film and television and a specialist in music production and sound design, and developer of computer music applications. His original music is exceptionally diverse ranging from country-western to jazz, from children songs to alternative rock and roll and funky sports themes. He’s released more than 30 albums in traditional and digital formats. Intimate Guitar Suites is his music catalog store featuring his own work and fellow artists from around the country. Dan is in the digital design, development, and marketing program at Portland State University and converting his sites over to WordPress, integrating custom JavaScript, jQuery, and AJAX scripts.

Scott KritzerScott Kritzer is a classical guitar artist and performer, touring world-wide, and a popular teacher in Portland with a large social community and fan club. He created the Kritzer Method, a master program for integrating physiology and guitar technique to promote long-term playing and hand and body health. Scott is the founder of the successful Classical Guitar Immersion Conference (CGI) bringing 20-40 guitar students and professionals from around the world together for an intensive week-long conference annually. He also developed the unique Performance Anxiety Rehab (PAR) workshop to help guitarists overcome stage fright and performance anxiety. Scott converted his static site and active forum to an integrated WordPress site (maintaining the forum) a year ago, making it easy to promote his concerts, classes, and social events as well as share his innovative teaching techniques.

Randy Sandberg of beAutomatedRandy Sandberg is the Software Test Engineer of beAutomated, a web development company specializing in building custom WordPress Plugins for the enterprise market. Their customers are small to large ecommerce and online businesses eager to automate the business process online, especially within the WordPress environment. Examples include custom email and subscription handling, database integration, ecommerce/store integration, migration, and conversion, directory development and management, and other website automation. They’ve created several popular free WordPress Plugins including Benchmark Email Lite emailing management program and beCounted, a unique Plugin that counts up (or down) annual statistics for anything you wish to count such as animal kill statistics, CMS downloads, mobile phone shipments, and the number of mythological created created since arriving on the web page.

Jeff BrockJeff Brock of Jeff Brock Studio is a long-time web designer specializing in designing on WordPress for small businesses, celebrities, and innovative enterprises around the country. He is also a professional photographer, integrating photography with digital arts. He works with beAutomated as a partner, focusing on custom wireframes and frameworks with WordPress. His company offers WordPress installation and upgrades, WordPress Theme and template design and development, WordPress Pluguin creation and modification, content customization, third-party integration, optimization, and graphic design.

Introduction to WordPress Class Featured on Blog Herald

Posted on by
Reply

In Clark College Offering WordPress Development Classes on The Blog Herald, author James Johnson describes our class as possibly not necessary.

In the meantime while I applaud Clark College for realizing the importance of content management system design and implementation, the truth is the WordPress Codex is more then capable of teaching even a non-programmer how to fully work with a barebones framework to create vastly interesting WordPress pages without paying by the credit hour.

Do you think a WordPress class is a good idea or would you rather learn from the Codex?

As students of the first WordPress college course, how about you have your say. Head to the Blog Herald article and let them know if you think a WordPress class is important. Tell them why you choose to take it, and how learning in a college course is different than learning from the WordPress Codex.

Thanks!

Have WordPress on a Stick Installed

Aside

This week we are working on WordPress Themes. Make sure you have WordPress installed on a USB or portable hard drive. As the machines in the class are Windows, use Instant WordPress. For information on other alternatives for your laptop or home computer, see How to Install WordPress on Your Computer or USB.

How to Work with WordPress Theme Frameworks

Posted on by
5

WordPress Design Wordle graphicA framework is literally a frame upon which a web designer adds the design elements. A WordPress Theme frameworks is a skeletal frame set with HTML and CSS with all the WordPress code embedded within it, upon which a designer can paint the website walls.

Most WordPress designers and developers either create their own WordPress Theme frameworks or use one already created for every WordPress site they develop. It’s important for them to be familiar with all the HTML and CSS design elements so they can quickly apply the design elements, whether from scratch, wireframe, or from a Photoshop to WordPress conversion. The more you understand how a Theme framework functions, the faster the design work can be applied.
Continue reading →

How to Convert a Photoshop Wireframe to a WordPress Theme

Posted on by
2

WordPress Design Wordle graphicMany use Photoshop to create their WordPress wireframe as part of designing their WordPress site. Converting the Photoshop graphic to a WordPress Theme is fairly easy if you have some basic HTML, CSS, and web design familiarity.

Simply described, each core design element such as the header, background, and design details are segmented into graphics and then used as background images or direct images where appropriate on a WordPress frameworks, a WordPress Theme with the core design elements you need to flesh the site out with a strong stylesheet.

A Photoshop (PSD) Plugin, Divine, is very popular and available for a thirty day trial. Add it to Photoshop and it will automatically help you export the graphic elements for a WordPress site. Familiarity with WordPress functions, features, and Theme structures and styles are required to complete the process, but it does help with the export of the graphics for the Theme. It works with Windows XP, Vista, and 7. Currently, there are no free programs for the Mac, but some alternatives are available with free, limited trials. [NOTE: Since 2009, all marketing about the Divine Photoshop Plugin explicitly says it is “absolutely free.” I just learned it has a thirty day trial and then it is expensive to purchase. While it might seem to be the ideal thing to try, unless you are making a living as a web designer, it’s not worth the cost.]

In general, while the Divine Photoshop Plugin is helpful, you can generate the graphics yourself. For more information on how to take a wireframe Photoshop image and convert it to a WordPress Theme, try these resources.