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?

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.

Site Loading Speed, Caching and Validation

• Pingdom Tools tests the load time of URL, analyzes it and helps to find bottlenecks. Click on down-arrows for each file/path under the waterfall tab to see the headers and again for each recommendation under the Performance Grade tab for specifics.
• Yslow, a browser plugin analyzes web pages and suggests ways to improve their performance.
• W3 Total Cache is a superior caching plugin for WordPress sites.
• Firebug Web Development Tool check Net tab for page element loading times.
• Check out your site’s speed with this handy speed test.
• Page Speed test online or via browser extensions for Firefox and Chrome. Results include minified HTML, CSS and JS files saved to configurable directory.
• Caching Tutorial explains web and proxy caches and http headers.
• REDbot checks the server clock and caching for a site, hover over each line of the response for full explanation.
• WP Tutorial on Boosting Site Speed excellent step-by-step tutorial showing how to use plugins to improve speed of WordPress sites.
• WebPageTest checks page loading speed, can select various browsers with screen shots reported. Advanced settings allow selection of connection speed for DSL, Cable, FIOS or 56K dialup.
• W3C HTML Validator finds out if your pages don’t validate, which can make them slow to load.
• W3C Link Checker
• Test Mobile Readiness of web pages.

Since web developers don’t need to adapt the coding of sites for the majority of us to see the content, it may not come natural to them to include those who do need special consideration. It does take a little bit of extra time and thought to accommodate – or dare I say be helpful to – people with vision difficulties or those who use screen readers to use the Internet.

To get an idea if your sites pass muster, visit the accessibility links below for a little help.

Links for Accessibility

HERA accessibility testing provides reports that show exactly where a site should be improved. If any errors are found when your site is scanned, they’re clearly highlighted so that you can take corrective action. A really helpful part is the ‘Navigate by guidelines’ feature, where results are categorized by the accessibility guidelines. Stepping through the results under each guideline will show you exactly which parts of your site aren’t accessible, and it will help you learn more about the guidelines.

WAVE Accessibility test shows icons on the test results page where the guidelines weren’t met. Icons were extremely helpful in determining what parts of the page weren’t up to snuff. One feature to highlight is the ‘disable styles’ button in the upper right of the results screen. Click that button to see your site without style sheets applied. If your content can be read without too much trouble, then it’s probably ok.

Readability test provides results of three algorithms in judging the readability of text on the page. If your site deals with a technical subject, or if your content is too complex for the average Joe to easily understand, your site may not fair well on the readability tests. Keep in mind that Joe Public only reads at an 8th grade level. Sad, but true .

CSS Analyzer won’t give output until all CSS errors are corrected. It’s just not possible at this stage with WordPress sites due to partial implementation of HTML5.

UI Test Enter your URL at Site Test for handy direct links to accessibility and validation checkers. Very helpful when modifying a page to meet accessibility guidelines.

The guidelines we’re talking about are the Web Content Accessibility Guidelines (WCAG) and the portion of U.S. Law for Section 508 which requires that information technology is accessible to people with disabilities, at least in federal agencies.

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 CSS 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:

• MaxDesign Listamatic tutorials on lists, selectors, floats and CSS presentations
• CSS3 @media queries – excellent slideshow

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.

If we keep the overall design the same, we just need to do two things to modify the slider. First, we need to upload the images for the pause and resume buttons and add a couple of lines to the HTML markup for positioning the buttons. We’ll fit the pause and play buttons in between the previous and next buttons. Each button will use an anchor tag, an id for CSS and script targeting, and a title for a user-friendly tooltip.

HTML Markup for Slideshow Controls:

Second, we need to add a couple of lines to the script to manage the action when someone clicks either button. Here, we’re assigning Cycle’s pause or resume option to the click function of the selected id, in this case #slide_aft. Adding a ‘return false’ line assures that the site visitor won’t be taken to another page when the buttons are clicked.

jQuery script portion for pause and resume buttons:

$('#pauseButton').click(function() {
	   $('#slide_aft').cycle('pause');
		 return false;
 });
 $('#resumeButton').click(function() {
	   $('#slide_aft').cycle('resume');
		 return false;
 });

The above script portion was placed in the document.ready function($) so that the buttons are able to be used as soon as practical.

Here’s the full slideshow example with button controls for pause, resume or play, previous slide, and next slide.

Now, that looks a little better. This slideshow looks more complete having the pause and play or resume buttons, as well as the prev and next buttons.

If you haven’t checked out the simplicity of the jQuery Cycle plugin, you should because there’s a whole lot you can do with it. It’s a very versatile plugin and quite popular, which speaks to its usefulness — and cool factor, too. Previous posts here covered the basics about the Cycle Plugin, how to make slides look like Polaroids, using image captions with Cycle, and discussions about a transition effects problem with certain fx.

Let’s get into the example for making previous and next buttons for a slider in jQuery using the Cycle plugin.

Before writing any code it would be a good idea to sketch out the design for the slideshow. The photos or slides will be held in a container div that can be targeted for CSS styling and javascript. Captions and their container paragraph would also be placed inside the container div. In this example we’ll do away with the captions for simplicity and place the previous and next buttons inside the container div.

It turns out that Cycle has two options for creating the functionality for going to the next photo or the previous slide in a sequence. These options are appropriately named ‘next’ and ‘prev’. The values to give for each are the locations of the next and previous buttons. To specify each location, create an id.

Here, we’re using #next2 for the next button and #prev2 for the previous button. Since we’re having only one next/previous button set for this slideshow, an id for each makes sense. If you have more than one slider on a page, a class would be more appropriate. When somebody wants to see the previous slide they’ll click on the ‘previous button’, so the best HTML tag for the slideshow controls is an anchor with a href of ‘#’. We don’t want to leave the page when clicking the previous button, we just want to see the previous slide in the show.

HTML Markup:

Slideshow example using jQuery Cycle plugin with previous and next buttons.
  

    
    
    
    
  

  
  

We’ll use a couple of small images to accommodate the previous and next slide functionality. One could use the words ‘prev’ and ‘next’ instead of images, if desired. In case a site visitor needs help, we’ve included a tooltip for each button by the way of a title for each anchor.

We want to hide all the images except the first image whenever the document is ready. Else, we’ll use the window load function for the slider action.

jQuery:

// jQuery Cycle options for slideshow with next/previous buttons

$(window).load(function() {
  $('#slide_afta').cycle({
     fx: 'fadeZoom',
     timeout: 2000,
     next: '#next2',
     prev: '#prev2',
     slideExpr: 'img'
   }); 	 
});

// hide all but the first image when document is ready

jQuery(document).ready(function($) {
  $('#slide_afta img:gt(0)').hide();
});

Of course, there are many different ways to style your slideshow. Here’s our example Cycle slider with next and previous buttons.

Slideshow example using jQuery Cycle plugin with previous and next buttons.

What if you want two sliders on the same page?

The first thing to recognize is that more than one id with the same name won’t work on the same page, so parts of the document for the second slider with an id will have to be changed over to a class or a different id name. CSS will have to be updated to reflect the changes, as will the javascript.

However, using the same class names for the next and previous controls for two sliders on the same page will result in both sliders being controlled by the same set of control buttons. That’s probably not what you’d want, nor what your site visitors would expect. Rename the action buttons (prev, next) and the container for the slides to different class names in order to be able to control the second slideshow. Of course, a second Cycle script would be needed to target the new container for the second slideshow.

The term ‘taxonomy’ makes me think back to high school biology class where we learned about Carolus Linnaeus. He was a botanist from the 18th century who devised a classification system for naming species that is still being used in the 21st century. This Linnaean classification system organizes species of plants and animals into hierarchical levels including Kingdom, Phylum, Class, Order, Family, Genus and Species.

With respect to biology taxonomy is the naming system used to identify millions of different creatures, both living and extinct. All species are classified according to their characteristics into broad groups containing similar organisms. Each broad group, like a kingdom or class, is subdivided into distinct sets, like family or genus. Being a member of a certain group means that you have certain characteristics in common with other members of the same group. Each organism can then be described according to the groups that it belongs to.

So, a taxonomy is a way to describe, identify, name and classify individual species. If we extend this idea to WordPress, a taxonomy becomes a way to organize and classify blog content.

Assigning a post or a page to a category or giving your article a couple of tags classifies and organizes the content. It helps the reader and search engines, too. Same with the link categories, they help us to organize links into meaningful groups.

Categories can have a hierarchy and can be divided into subcategories, but tags cannot. In describing categories we can use the term ‘parent category’ for a larger category that has been divided into smaller groups or ‘children categories’.

Category hierarchy is useful when presenting information about large groups of things. For example, a site about muscle cars can have the broad categories of Chevrolet, Pontiac and Plymouth. Within the Chevy parent category, there might be subcategories of Chevelle, Camaro and Nova. LeMans and GTO could be child categories of the Pontiac parent category, and the Plymouth parent category might list Barracuda and Road Runner as subcategories. You get the idea.

By filing a post in a child category, it is not automatically a member of the parent category as well, so make sure to tick the parent category if that’s what you want.

Taxonomies are searchable so they are a way to help your site visitors find your information. Choose category names wisely at the start. You can still add or subtract categories as your blog develops, but if possible refrain from changing categories, especially if your permalinks, and therefore the URLs of your posts, use categories. It could be a nightmare to update all those links!

Tags are like keywords that describe a post, so they’re not thought out as part of the site structure like categories should be. Tags don’t have hierarchy and are described as having a freeform and one-dimensional nature. Basically, tags are used to further describe or classify a post or page. The same tag can be assigned to any number of posts or pages in any combination of categories.

Using taxonomies is a means for connecting posts together by relationship or similar characteristics. Grouping similar posts into categories and tagging them will help visitors to navigate and use your site.

But WordPress doesn’t stop there, it lets you to create special taxonomies for any of your sites. Custom taxonomies can be defined for custom post types, posts or pages, and have been around since WordPress version 2.3, but they didn’t gain the full capability for hierarchical structure until WP 3.0.

Interested in creating a new, custom taxonomy for your site? Study the codex examples for registering taxonomies.

Categories, tags and custom taxonomies are enlisted as some of the post meta data. Post meta data includes the information about a post that helps to identify it. Examples of post meta data include the date and time it was published, the author’s name, the categories or tags assigned to the post, and the associated RSS feed.

To handle various levels of user privilege, a system was developed in WordPress that was originally called the User Level System. In this system many capabilities were identified and these capabilities were classified according to the level of authority required or the privileges needed to perform certain tasks.

For example, a higher level of privilege was deemed necessary to edit another writer’s post. Accordingly, a user level that is now called Editor was given a variety of capabilities ranging from edit_others_posts to delete_published_posts. A lower user level, now called Author, was awarded a slimmer set of capabilities and it doesn’t include modifying others’ work.

Make Sure Site Visitors Can Register

To make sure your visitors can sign up to your blog, see the General Settings page under “New User Default Role” for a spin box that has the options of subscriber, administrator, editor, author and contributor. Default role is subscriber.

If you want people to be able to register on your blog, tick the Membership box next to “Anyone can register”, then click on the Save Changes button at the bottom of the page to make it so.

User Levels Supplanted by Roles

WordPress introduced user levels in version 1.5, but quickly replaced them in version 2.0 with Roles and Capabilities. User levels are deprecated since WP 3.0, but we may see them used in older plugins or themes, so it’s worth knowing about them. Basically, higher user levels have more privileges and can write, edit, post, publish and manage more than their lower-level counterparts.

The lowest user level equates with the subscriber role. Subscribers can sign in, see and modify their own profile, and besides that they can read posts and pages and comment.

The highest user level is reserved for the site administrator or blog owner and that would include level_0 up through level_10, the highest user level.

Prior versions of WordPress had 11 levels from level_0 to level_10, with level_0 being the lowest level and least capable, while level_10 users were able to do anything and everything with the WordPress blog.

WordPress defines users as the blog visitors who register and login to the web site. The Administrator is created during installation of the WordPress software. The Admin level has absolute power over all other users being able to add or delete users, edit their writings and promote or demote anyone to a different role.

Roles correspond to the old user level system like so:

• Subscriber = level_0
• Contributor = level_0, level_1
• Author = level_0 to level_2
• Editor = level_0 to level_7
• Admin = level_0 to level_10

Many blog owners don’t need any special roles as they are the Admin and they control everything with their personal online spaces. Beyond the Admin there is a new level called Super Admin that comes into play when a network of sites needs to be administered. Multisite WordPress installations came into use as user levels were being deprecated, so there is no equivalent user level number for the Super Admin.

Capabilities for Standard Roles

The standard roles in WordPress are Administrator, Editor, Author, Contributor and Subscriber, in order of decreasing privilege.

The Admin user is created when WordPress is installed. Administrators have all capabilities, including the privileges to install, activate, edit and delete plugins, install, delete, edit or switch themes, edit or delete any post or page whether published or private, edit the dashboard, manage users, categories, links, options, comments and files, and import or export parts or all of the WordPress blog.

Editors have fewer privileges than admins, but they have the powers to manage their own and other’s posts. They can edit and delete pages or posts whether they’re published or private. Editors have the capabilities to manage categories, links and comments, and they can upload files. Editors can post code in pages, posts and comments, so make sure you trust your editors because they can post HTML markup or even JavaScript to your blog.

Authors have fewer privileges than editors and they all center around writing posts. Authors can publish, edit and delete the posts they create, even published ones. However, they cannot edit or delete other’s posts. Authors cannot create or alter Pages. They can upload files to add new media, and of course, read and comment on posts.

Contributors have even fewer privileges than authors. Contributors can edit, delete and read their own posts. Posts created by Contributors will be held in moderation for an Editor to approve and publish.

Finally, Subscribers have but two capabilities. They can read posts and they can view and update their own profile.

Modifying and Managing Roles

Several WordPress plugins exist for managing roles and capabilities. The plugins listed here get very high marks at the WordPress Plugin Directory.

Members Plugin

Members plugin is described as an “extensive role and capability management system” that allows you to create, edit and delete roles and capabilities for those roles. Using shortcodes, this plugin lets you control access to your content, including the ability to make the entire site and its RSS feed private.

Role Scoper Plugin

Role Scoper plugin is a complete solution for assigning permissions and roles to specific pages, posts or categories. Independent of WP roles, users of any level can be elevated to read or edit any content. Alternatively, content can be restricted from any user regardless of their WP roles or capabilities.

User Access Manager Plugin

User Access Manager plugin lets you “manage the access to your posts, pages and files”. Reading and editing permissions for pages and posts are assigned via user groups. Registered users are placed into user groups for which appropriate access rights have been created. User groups can supplement or take the place of WP roles for providing or preventing access to pages and posts.

Advanced Access Manager Plugin

Advanced Access Manager plugin is a “powerful and flexible Access Control tool” that supports single and multisite WordPress installations. Roles can be created and capabilities assigned per role. The Dashboard and Admin menu can be filtered to show only the important bits for each role.

User Role Editor Plugin

User Role Editor plugin allows you to create new roles and customize their capabilities. Options include setting the default role for new users, removing capabilities from users, deleting roles no longer needed, and changing capabilities on a per user basis.

Gary’s ultimate guide for assigning user levels to roles and capabilities is most useful for those wanting to modify or create plugins and themes. Many code snippets are shared in this post for assigning capabilities, testing whether a user has a certain capability, and adding new roles and capabilities.

If all you want to do is highlight some text that includes code-related words like filenames, function names or plugin names, use <code></code> around those phrases in your text. Using <code></code> turns text into a monospaced font so that it appears differently in your posts than “normal” text. However, using <code></code> around an HTML tag doesn’t do anything except change the presentation of the tag, so the opening and closing angle brackets are interpreted to enclose an actual HTML tag. The result will be a mess and definitely not what you were hoping to see.

To make WordPress show code in a post without interpreting it, you have to do ONE of three things:

1. Use special character codes to replace angle brackets of tags.
2. Use the HTML tag <pre></pre> around the code.
3. Use a plugin to highlight the code syntax.

1. Special Character Codes

Angle brackets, < or >, are what WordPress uses to identify code, whether it’s HTML, inline styles of CSS, or PHP. Content inside angle brackets is interpreted as code by virtue of placement inside the brackets. Instead of interpreting this code we want WordPress to show the code to the site visitors and we can use special character codes to do that.

Character codes are special sequences of letters or digits that are used to represent textual characters. Every character that we see on the screen, including uppercase letters, lowercase letters, numbers, and symbols like <, >, #, $, %, ^, & or *, can be represented by character codes, sometimes called character entities.

Using character codes in posts looks a little strange in the editing panel, but when a browser comes across these codes they are interpreted and their textual equivalent is shown on the screen.

ASCII (American Standard Code for Information Interchange) character codes were developed to represent text in electronic devices and they follow a specific format. The format is that each character entity starts with an ampersand and ends with a semi-colon. The codes are a couple to a few letters or numbers. Numbered character codes always have a hash symbol right after the opening ampersand. Some entities can be represented by either numbered or named codes.

Examples of special character codes:

If you need to find a code for language sets other than English, try the unicode site for all the code charts you’ll ever need. There, you can find numeric codes for fun game pieces, like chess, mahjong or checkers, horoscope symbols, smiley faces, weather symbols, music notes, and much more.

Take caution: Just because you can enter a special code to represent a symbol, that doesn’t mean your computer will let you see it. Many operating systems will not have the proper fonts installed to make use of all of these codes, especially if they represent symbols that aren’t on your keyboard. Stick to the ASCII codes as many of the unicodes won’t be seen by your site visitors.

2. HTML tag: <pre>

Perhaps you’d like to show a block of HTML code on your post and have it shown as text. To make sure that your block of code is not interpreted as actual code, wrap it with <pre></pre> tags. The <pre> tag will change the appearance of the code into a monospace font, just like <code> does, but the difference is that <pre> also illustrates the code exactly as it was typed. All text, characters, spaces and line feeds will be reproduced exactly how they were entered. No code will be run when it’s protected inside the opening <pre> and closing </pre> tags.

3. Syntax Highlighter Plugins

A final way to illustrate code in a WordPress post or page is to use a plugin to highlight the code. Several plugins are available for syntax highlighting purposes.

One that I have been using lately is called Crayon Syntax Highlighter. It’s a great plugin that will colorize or highlight code that you wrap with shortcodes. There are lots of options if you want fine control over the color scheme. Themes come with the plugin so you have several choices for making your code look good.

There are two modes where you can highlight code differently using shortcodes, [crayon][/crayon] and [plain][/plain]. Use [plain] shortcodes when the colorized crayon is overkill or when you just want to show a small section of code. Crayon Syntax Highlighter supports a wide range of languages, including HTML, CSS, PHP and JavaScript, for starters.

The colorful [crayon] shortcode is controlled by options where you can pick the colors that you want for representing different sections or purposes in your code. Inline crayons are supported so you could put a line of code within a line of text and the code would be colorized.

Some other popular code-highlighting plugins include SyntaxHighlighter Evolved, WP-Syntax, and CodeColorer. I don’t have any personal experience with these plugins, but they are listed high in popularity at the WordPress Plugin Directory.

Need to Execute Code in a Post?

If what you’re really after is to put executable code in a post or WordPress Page, check out this post on executing PHP in WordPress blogs.