The Basics You Must Know About a WordPress Theme

Posted on October 14, 2012 by Lorelle VanFossen

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

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 WordPress or WordPress.com. 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 →

Web Design: Tools, Color Wheels, Charts, Theories, and More on Color

Posted on October 5, 2012 by Lorelle VanFossen

Colored ball in a quilt of colors. Most business owners don’t consider the importance of color when thinking about promoting their business. They just want the colors to match their business cards or logo.

When it comes to choosing colors for your website, it can be as easy as planning the colors to paint the rooms in your house. It begins with some color theory, then pull out your old color wheel and give it a spin. Right?

Well, it would if colors on the web were that easy.

In order to understand how colors work in web design, you need to know some important concepts.

Web colors have three naming conventions.
Web safe colors are colors that will work across the most common machines and access devices for web viewing and usage.
Web accessibility influences colors based upon readability with tests for contrast and emotional response.
Colors stimulate emotional and reactive responses, making it critical to understand the theory and psychology of color choices.

I’ve put together this summary of resources to support these and included many online free tools, color charts, color wheels, and more to help you learn more about how web colors work and how to choose colors for your web design or WordPress Theme.
Continue reading →

How to Choose a WordPress Theme

Posted on October 2, 2012 by Lorelle VanFossen

When it comes to choosing the right WordPress Theme, there is a right way and a wrong way. And both may be right for you.

First, let’s look at what people look for and what influences them in the decision process with a WordPress Theme, and the myths of their reasoning.

Comparing the same 2011 WordPress Theme - the light and the dark version - totally different.

The default WordPress 2011 Theme has two versions, dark and light. By changing the background image, these two sites on the same Theme are completely different.

How much does it cost?

First of all, the majority of WordPress Themes in the WordPress Theme Directory are free. Before you start investing in a WordPress Theme, stick with free Themes so you can test drive them.

If you fall in love with one and lack the web design experience or time to modify it, contact the author and hire them to fix this to your liking.

A paid or premium WordPress Theme is no better or worse than a free Theme. Don’t believe the hype. You are usually paying for support or additional features you may or may not need. Price does not dictate quality. 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 →

Introduction to WordPress Class 18 – Troubleshooting WordPress

Posted on March 12, 2012 by Lorelle VanFossen

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 →

Introduction to WordPress – Special Guest Panel

Posted on March 6, 2012 by Lorelle VanFossen

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 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-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 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 beAutomated Randy 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 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 Homework – Class 13 – Theme Customization and Child Themes

Posted on February 23, 2012 by Lorelle VanFossen

In Class 13 of Introduction to WordPress, we covered:

WordPress Theme customization: Twenty-Eleven Theme analyzed
Child Themes

Homework

Update WordPress from within Instant WP on your thumb drive.
Create a Child Theme for 2011
- Customize Widgets, Header, etc., from Administration Panels
- Customize CSS with Child Theme stylesheet
Prepare article with screenshots of your Child Theme published on your blog by Tuesday with explanation

Continue reading →

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.

Introduction to WordPress Homework – Class 12 – Video, Audio, and Podcasts

Posted on February 16, 2012 by Lorelle VanFossen

In Class 12 of Introduction to WordPress, we covered:

Embedding audio and video into a WordPress post.
Introduction to Podcasting with WordPress.
Web Accessibility guidelines associated with audio and video.

Homework

Create a audio or video of yourself talking about anything you want and publish it on your site.
Install WordPress on a stick (USB). Thumbdrive (USB drive) required.
Familiarize yourself with the 2011 WordPress Theme template and style files
- Go to Appearance > Theme Editor or view with Text Editor.
- Follow the WordPress Loop path (The WordPress Loop in Action).
Check “Your Blog So Far” list and check EVERYTHING off the list.

Continue reading →

Introduction to WordPress Homework – Class 11 – Managing Multiple Authors

Posted on February 14, 2012 by Lorelle VanFossen

In Class 11 of Introduction to WordPress, we covered:

Managing multiple authors and contributors in WordPress.
Review of user permissions and authorities.
Tips on using “Writing Helper” WordPress.com feature for multiple contributors.

Homework

Practice adding another user and seeing what they see at different permission levels.
If your Final Project features multiple contributors, start planning for them.
Create a post template for Copy a Post.
Create an Editorial Calendar for your blog.
Write and publish a 3 post article series (due next Tuesday).
Install WordPress on a stick by next week.

Continue reading →

Introduction to WordPress Homework – Class 10 – Design, Template Files, Conditional Tags, Class Project

Posted on February 10, 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.
Presentation of Final Class Project teams and assignments.

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

Class Final Project: Connect with your teammates for your Introduction to WordPress Final Class Project Teams.
Continue reading →

How to Work with WordPress Theme Frameworks

Posted on February 7, 2012 by Lorelle VanFossen

WordPress Design Wordle graphic A 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 February 6, 2012 by Lorelle VanFossen

WordPress Design Wordle graphic Many 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.

How to Create a WordPress Theme Wireframe

Posted on February 5, 2012 by Lorelle VanFossen

WordPress Design Wordle graphic Wireframes are website mockups, prototypes, layouts, and doodles. For many, wireframes begin with with pen and paper, others use sticky posts and crayons. More technically inclined folks turn to graphic and design software and web apps to layout the look and feel of a site for themselves or a client.

Wireframes are essential in the process of getting ideas down and the site design fleshed out. They are also critical for working with clients to ensure the designer/developer and the client are on the same page.

However you make your wireframes, make sure they are flexible and easily altered as your site evolves.

A Google search for WordPress and wireframe images turns up some excellent examples.

Here are some articles featuring wireframe tips and resources.

Introduction to WordPress Homework Class 4 – Introduction to WordPress Themes

Posted on January 19, 2012 by Lorelle VanFossen

In Class 4 of Introduction to WordPress, we cover:

WordPress Theme introduction
Introduction to the WordPress Loop
WordPress Pageviews
Post Formats
Changing WordPress Themes
Basic WordPress Theme customization

Homework Assignment

Using Post Formats:
- Publish an aside post.
- Publish a status post
- Publish a link post
- Publish at least one other post format post.
Sort through the various WordPress Themes on WordPress.com and test them.
Make a list or draw an “ideal” WordPress Theme for your blog.
- Find a similar Theme on WordPress.com (as close as you can)
Publish a WordPress tip article using screenshots. If you need to publish code, use the sourcecode shortcode.
Find the first post on your blog, usually called “Hello World.” Edit the post slug to change the URL to a new title.

Continue reading →

Example of a Sandbox Post for Testing WordPress Themes

Posted on January 17, 2012 by Lorelle VanFossen

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 →

Introduction to WordPress Class 3 Homework

Posted on January 17, 2012 by Lorelle VanFossen

In Class 3 of Introduction to WordPress, we cover:

More on what can go into a WordPress blog post.
More on the differences between a Page and a post.
WordPress.com Shortcodes.
Uploading multimedia and publishing it.
Posts verses Pages

Homework Assignment

See Shortcodes — Support — WordPress.com and Shortcode – WordPress Codex for examples of how to use shortcodes in WordPress.com sites to add functionality.
- Add a contact form with shortcodes.
- Create a PollDaddy Poll.
- Create a gallery of images on a post.
Paste text file from Post Content Sandbox into blog post and preview it in the current WordPress Theme.
- Change WordPress Themes to test that post by going to Appearance > Themes > Activate
- Write a blog post describing which Themes you liked for your blog and why.
Publish a PRIVATE post with the password ctec280 as the password. Make it a funny story, cartoon, or graphic that will make the students laugh.
Add to your Policy Page another blog policy (comments policy, reprint policy, liability/hold harmless…).
Visit other student’s blogs and leave comments.

By January 24 You Will Have the Following on Your Blog

About Page
Contact Page
Policy Page
- Copyright
- Other polices
5 blog posts under each of 5-7 categories
Class assignment posts
- 1 with video
- 1 with three images and text wrapped around them
- 1 gallery post
- 1 list post
Comments from every student in the class.

REMINDER: The classroom is open for tutoring an hour before the WordPress class. Alex and Lorelle will be available to help you, so come on in early.

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
- Section VII – Lesson 27 – Overview of WordPress Themes
- Section 4 – Lesson 15 – Working with Image Galleries
- Section 5 – Lesson 18 – Managing Posts and Pages
- Section 5 – Lesson 20 – Managing Post Categories and Tags
WordPress All-In-One for Dummies
- Book 4 – Chapter 2 – Examining the Difference between Posts and Pages
- Book 4 Chapter 3 – Uploading and Displaying Photos and Galleries
- Book 6 Chapters 1-3 Customizing the Look of Your Site

Outcome

For those keeping track of overall outcomes, the goals of the third class were:

Learning the content management areas of WordPress.
Learning the difference and how to use the Visual and HTML Editors.
Learning how to include multimedia and galleries in a WordPress blog post.
Basic blog writing tips with WordPress structure and format.
Further exploration of the WordPress UI.

Developing WordPress Plugins and Themes for the Public

Posted on November 18, 2011 by Lorelle VanFossen

The following resources are for those who develop WordPress Plugins and WordPress Themes and wish to release them to the public and include them in the WordPress official directories, WordPress Plugin Directory and WordPress Theme Directory.

It is highly recommended that you read “A Love Letter to WordPress Plugin Authors” with tips for WordPress Plugin and Theme authors on how to ensure your audience finds your WordPress goodness.

WordPress Plugins Submissions

WordPress Theme Submissions

Working as a WordPress Developer

Selling WordPress Themes

Building WordPress Themes You Can Sell

What is WordPress?

Posted on November 3, 2011 by Lorelle VanFossen

WordPress logo WordPress is an open source publishing platform for the web. It allows easy content management and publishing via the web browser to the web. There are three versions of WordPress.

WordPress – Self-Hosted Version

WordPress, the self-hosted version of WordPress, is often called “dot org” or “full version.” It is the version of WordPress used by those with paid hosting services or “self-hosted.”

The is the most flexible of the WordPress versions as the user can choose from any WordPress Theme and customize it fully or create their own, and add any WordPress Plugin, script or custom code to their site. The self-hosted version of WordPress can be used by beginner or expert.

This version is appropriate for any individual or company.

WordPress.com – The Hosted Version

WordPress.com is the hosted version of WordPress, a blog hosting service where anyone can sign up for a free blog and have their say on the web. Millions of blogs are hosted by WordPress.com and many blogs host multiple authors.

WordPress.com is often called the “limited” or “free version” which is not completely true. WordPress.com is limited only in the fact that you must comply with the WordPress.com Terms of Service and cannot install WordPress Plugins or unapproved WordPress Themes, but much of the most popular WordPress Plugin features and needs of typical bloggers are provided such as integrated stats, social media integration, comment spam protection, writing and linking help options, and more through built-in options and optional WordPress Widgets. Users can pay a small annual fee to customize their WordPress Themes for original designs, breaking the template look many hosting services offer. A variety of custom options are available for a small annual fee such as domain remapping (having your own dot com and not subdomain URL), additional space, video uploading and storage, unlimited private users, etc.

WordPress.com is often thought of as the “baby” beginner version of WordPress as it requires no technical expertise to use, however do not underestimate its lack of code interaction. It is a WordPress blog with its own powerful abilities under the hood. It is exceptionally SEO-friendly and updated more frequently and faster than the self-hosted version of WordPress which requires administrative action to update. Thus it is a safe and secure publishing environment.

WordPress.com is also the demo and testing version of WordPress for the WordPress Foundation development team. New features are often tested in a limited or widespread across the WordPress.com network before they are included in the final release for the self-hosted version of WordPress.

WordPress.com also offers a VIP version where site owners can literally get hand-holding service from WordPress.com staff and developers. This doesn’t come cheap but for many companies, it’s cheaper than their current hosting plans and services. Examples include CNN, New York Times, Wall Street Journal, All Things Digital, Time Inc., People Magazine, Flickr, NFL, and many more. Free WordPress.com users benefit from the funding these companies provide as well as the code developed through those sites and services.

This version is appropriate for any individual or business.

WordPress MS or Blog Network Version

The third version of WordPress is called WordPress MS, Multisite, or Blog Network. Built into the self-hosted version of WordPress and the engine running WordPress.com, WordPress MS allows site owners to host more than one blog on their site as subdomains. This is ideal for businesses with different departments, schools, non-profits, and companies wishing to offer compartmentalized content run by different administrators and authors.

WordPress MS is not for those who wish to run or install multiple blogs from one interface. There are several WordPress Plugins that make this process easier. WordPress MS creates two levels of users. The Super Admin manages the entire network, controlling the various options and features each individual blog or the entire network has access. Individual blog “owners” or administrators control their own blogs and generally have no access to the other sites on the network. The Super Admin can set the site to look seamless between subdomains, or allow each subdomain administrator to design their own look and feel, much like WordPress.com blogs.

While the option to choose a single installation WordPress or the multisite installation is only a few click option during the WordPress install, choosing the multisite version is not for the faint-hearted and code-phobic folks. It requires familiarity and some expertise with WordPress, PHP, JavaScript, WordPress Plugins, WordPress Themes, and web hosting. Those using a blog on WordPress MS require none of that expertise.

Which WordPress to Choose

If you just want to have your say, choose WordPress.com.
If you want to play with code, choose WordPress.
If you wish to have ads and monetize your site, choose WordPress.
If you wish to have multiple authors and no wish for ads, choose WordPress.com.
If you wish to have an intricately designed site with a customized Theme, choose WordPress.
If you wish to have multiple authors with complete control over their independent blogs, choose WordPress MS.
If you wish to have various departments or agencies represented with their own sites within the network, choose WordPress MS.

How WordPress Boots Up: A Step-by-step Examination of the WordPress Loop

Posted on November 3, 2011 by Lorelle VanFossen

Theme.fm has a series of three articles on how WordPress boots up, how it moves through the process as a visitor lands on their first page on your site and a step-by-step look at the WordPress Loop.

As a visitor lands on a web page on a WordPress site, the browser begins the process of loading the visitor request to view a specific page. On that web page, there are codes that instruct WordPress to pull information from the site design files called WordPress Theme template files, from WordPress Plugins, from the database, and other code requests to literally build a viewable page instantly for the visitor. These articles dig deeply into how WordPress code works with all the various programs and options to generate that page.