Updated Method to Create WordPress Child Themes

Twenty Ten Child Theme Mods

Once upon a time all that a WordPress Child Theme needed was to use an @import rule to bring in all the styles from the parent theme stylesheet. Evidently, that method still works as I’ve been using a couple of “old” child themes on live sites, until now.

Even so, it would be better to use updated and preferred methods for creating WP child themes. When The Codex says something is no longer best practice, we should pay attention.

Using @import to bring in other files costs us time. Nobody appreciates a slow site so any way that we can speed things up for our visitors is a good thing.

The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

A child theme requires one file, style.css, declarations in which will override those of the parent theme, but now we need a second file, called functions.php, to enqueue the new stylesheet. Continue reading Updated Method to Create WordPress Child Themes

Section 508 Standards Improve Site Accessibility

Interested in improving site accessibility for all site visitors? The section 508 standards were written to assure that everybody can see your site, including people with vision and cognitive disabilities. Once you’re familiar with these standards, it’s not too hard to abide them. Why wouldn’t we want to have the broadest audience possible anyway?

What are these 508 standards and why do they exist? The United States Federal government put out an edict – ok it’s a law – that states that any federal website must be created in such a way as to allow everyone to “see” it or otherwise consume the information.

The main idea was to make sure to include folks with disabilities who might use alternative means of navigating the Web and to assure that anyone and everyone has equal access to the government. Every web page created by the federal government is checked against the following standards for compliance before being published.

Here are some suggestions on how to meet the standards (a – p) of Section 508 of the Rehabilitation Act, ยง1194.22. Be aware that the standards have been paraphrased for the most part and that this is only one interpretation on how to meet these standards.

Section 508 standards and how to meet them

a. Provide a text equivalent for every non-text element.
Use the alt attribute for every image or embedded media to explain what the media is portraying. Complex graphics may require a link to a new page for full explanation. Images that allow for interactivity must have their functionality explained, too. Audio content needs to be captioned or have transcripts provided. Graphics used for decoration, like borders or background color gradients, can have empty alt tags.
b. Multimedia presentations need to have their captions or transcripts synchronized with the presentation.
Videos without audio tracks should have audio descriptions created. Caption synchronizing can be accomplished with any media player using MAGpie, the “original free caption- and audio-description authoring tool for making multimedia accessible to persons with sensory disabilities.” It can also be used to create caption files for YouTube videos.
c. Information that is communicated with color must also be communicated without color.
Color cannot be the only means of communicating information. People who are color blind may not see links if they’re not underlined or highlighted in some other way. Contrast must be high in order for others to see the message.
d. Webpages need to be readable on their own, as if the stylesheet was missing.
Even though most web pages would look very plain without their associated stylesheet, they should be organized so that they’re readable without the stylesheet.
e. Text links should be provided for each active region of server-side image maps.
Use client-side image maps instead of server-side image maps. Each active region should be described in alternative means.
f. Client-side image maps should be used instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
Use client-side image maps instead of server-side image maps. Each active region should be described in accessible text.
g. Data tables need to have row and column headers described.
Use <th> in data tables. Don’t use tables for layout purposes.
h. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Use the scope attribute to tell the browser or screen reader that everything under a column heading is associated with that column or that everything to the right of a row header is associated with that row. Complex tables should use ids or headers. Avoid spanned rows and columns and instead present the data in more simple terms.
i. Frames should have text for identification to describe the navigation.
If you can’t avoid the use of frames, make sure they have descriptive titles.
j. Assure that images do not flicker at a frequency greater than 2 Hz and lower than 55 Hz.
Avoid using flickering images.
k. If there is no way to provide accessible or alternative content for your message, a text-only page must be provided.
Keep things simple, but if that’s not possible make available text-only pages. Keep each text-only page up-to-date.
l. When using scripts to display content or create interface elements, assure that the same information is provided via functional text that can be read by assistive technologies.
This is going to require some thought for every instance of jQuery or other javascript components on a page.
m. When a web page requires a plug-in to interpret the page content, an accessible link for downloading each plug-in must be provided.
Download links must be provided for the plug-ins required to read PDFs or to view Java applets, for example.
n. Help people using assistive technologies to fill out your online forms.
Use <label> tags with the for attribute for each element of a form. Use descriptive titles and provide instructions on how to properly fill out the form.
o. A method should be provided that allows users to skip a series of navigation links.
Use skip links to let users pass the navigation menu and go directly to the content. A skip link is a link at the top of the page that plainly states that it ‘skips navigation’ or ‘skips the link list’ and jumps the reader to an anchor at the beginning of the content.
p. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
Allow the user to have control over the timing of inputs.

So, the bottom line is to keep things simple. Use text to describe things on the page and to identify things that aren’t text. Be careful with scripting actions so that information is accessible to all.

In an effort to improve the status quo I’ll be taking a look at all my web properties with an eye for improving their accessibility. Do you have any hints on how you’ve accomplished the same?

Learning Code Resources to Beat the Summer Heat

People love the summertime with all its heat and sunshine. But not everyone likes to bask in the sun, so instead they turn to cooler activities than baking their skin to a crisp. Count me in as one of those people who hibernate away from the heat or in a word, estivate.

What can we do to avoid the scorching sun in the middle of the day? We could take a nap to avoid the heat, or go to a movie or take the time to learn something cool. How about learning to code? It’s not that hard to pick up a new tip or trick, you just have to want to. With that, here’s a few resources to get you started on your way to learning something new this summer.

Free Online Learning Tools

  • CodeAcademy– sign up for an account to track your progress
  • CourseHero– check out the Web Programming path
  • W3Schools– complete with references, quizzes, examples and a certification path

Need more? Take a look at this great list of online learning centers.

CSS Resources and Tools

Here’s a small collection of resources and tools for learning CSS, Cascading Style Sheets. It’s through links like the following that our collective CSS skills are improved. Read more, learn more.

Links for CSS

To get an idea of what CSS can do for your site visit the CSS Zen Garden, a site for inspiration in designing with CSS. Studying the style sheets for the different themes presented here can teach you a lot about style and positioning.

Introduction to CSS by Dave Raggett at W3C. Even though it’s a bit dated this is a good place to start to see how CSS works. Get the basics about linking to a separate style sheet and setting link colors.

CSS Reference and Tutorial from the Mozilla Developer Network could be a one-stop shop for learning CSS. Pick the getting started tutorial if you’re not very familiar with using style sheets. If you already know the basics, you might want to bookmark the exhaustive CSS reference. It has browser support tabulated for all the CSS 3 properties.

SitePoint CSS Reference uses categories to organize pages into CSS-properties, CSS-selectors, at-rules, styling concepts and layout examples. Play around in the “live” area (you get there by selecting the “Play” tab) where you can post CSS rules or HTML markup in the left pane of the window and see the immediate effects in the right pane.

Interested when a particular feature showed up in the history of CSS? Check the CSS Properties Index for an alphabetical list of properties. Properties are tabulated for CSS1, CSS2, CSS2.1, and CSS3. Clicking on any property name will bring you a definition of that property along with its acceptable values, which elements it can be applied to, and whether it can be inherited.

Font stacks might be of interest in studying site designs and learning the underlying CSS. Each font stack is like a mini-library. Learn how to create your own font stack through examples of Eight Different Font Stacks. Extend the idea to include basic page design via 960 Grid, a CSS library.

Great tutorials on specific CSS topics include:

Once you start writing your own CSS you’ll want to know if everyone can see your site the way you intend it to be seen. Validating CSS will assure that your style sheet is valid and therefore understood by browsers that people use to see your site. Check your CSS style sheets with the W3C CSS Validator. Tip: change profile to CSS3 and change vendor extensions to warnings, until CSS3 properties are more widely in use.

Keep reading, people. It’ll make you better at what you do.