However, it is possible to use WordPress Shortcode to output complex snippets in a simple manner so that people with no HTML/CSS background can output any pre-determined code snippet.

WordPress Shortcode has a wide variety of applications and can be extremely beneficial for website managers of all ranges of technical backgrounds.

What is WordPress Shortcode?

Example 1

[container]Lorem ipsum dolar sit amet[/container]

With that shortcode, you can output whatever you want on your WordPress website. You can build anything – any amont of HTML, CSS, Javascript, PHP, or anything else you may want. The possibilities are endless.

Example 2

The simplest, yet most overlooked, example of using WordPress Shortcode can be extremely complex.

This:

[donate]

Can output this:

<a href="/donate/" class="donate-button">Donate!</a>

This simple technique can output pre-built complex, or simple, code snippets. This one is great for having pre-built content areas that are used on multiple pages and/or articles. It’s less code to maintain and allows you to update all of the pages by editing a single code snippet. Very similar to WordPress’ file structure, but this format gives you more versatility and applications.

Example 3

The most common example of WordPress’ Shortcode can be derived from BBCode.

This:

[img title="Example Logo"]http://example.com/images/logo.png[/img]

Can output this:

<img src="http://example.com/images/logo.png" alt="Example Logo" />

BBCode, a different form of WordPress Shortcode, uses the above snippet to output an image. While this isn’t all that different than the tag, it is simpler enough that, as a general rule, website managers who aren’t very technically savvy have an easier time grasping this than html.

Even though it’s an extremely simple concept, the possibilities are endless and WordPress shortcode can open up a whole new world for your client work.

How to use WordPress Shortcode

Example 2 is the simplest version of WordPress Shortcode to execute.

Copy and Paste this onto your WordPress Theme’s functions.php file:

function donatebutton() {
    return '<a href="/donate/" class="donate-button">Donate!</a>';
}
add_shortcode('donate', 'donatebutton');

Use this in your WordPress post/page’s content:

[donate]

The HTML output will be this:

<a href="/donate/" class="donate-button">Donate!</a>

Using a simple “[foo-bar]” can output an entire content block across multiple pages, making it easy to update.

More of a blockquote style usage of WordPress Shortcode, like in the first example, requires a little extra, but is still extremely easy to execute.

Copy and Paste this onto your WordPress Theme’s functions.php file:

function postrecap($atts, $content = null) {
	return '<span class="recap">'.$content.'</span>';
}
add_shortcode("recap", "postrecap");

Use this in your WordPress post/page’s content:

[recap]A bit of text content[/recap]

The HTML output will be this:

<span class="recap">A bit of text content</span>

This exact code snippet was used on one of our client’s WordPress sites, AgendaWise, to great effect and made the blog a lot easier to maintain. This allows the client to use a pre-built-custom blockquote, and cite someone with unique and consistant styling. It automatically detects if there’s a name and/or url being referenced. If there’s a name and a url, the WordPress Shortcode adds a styled link at the end of the quote, and if there’s a name but no url, it just adds a styled name at the bottom of the blockquote.

Use any of these in your WordPress post/page’s content:

[blockquote]Test content.[/blockquote]
 
[blockquote cite="John Doe"]Test content.[/blockquote]
 
[blockquote cite="John Doe" url="http://example.com/"]Test Content[/blockquote]

Copy and Paste this onto your WordPress Theme’s functions.php file:

function bc($atts, $content = null) {
	extract(shortcode_atts(array(
		"cite" => 'Unknown',
		"url" => 'url'
	), $atts));
	if ( $cite == 'Unknown' ) {
		return '<blockquote class="bc-full"><p>'.$content.'</p></blockquote>';
	} elseif ( $url == 'url' ) {
		return '<blockquote class="bc-full"><p>'.$content.'</p><p class="bc-cite">- '.$cite.'</p></blockquote>';
	} else {
		return '<blockquote class="bc-full"><p>'.$content.'</p><p class="bc-cite">- <a href="'.$url.'">'.$cite.'</a></p></blockquote>';
	}
}
add_shortcode("blockquote", "bc");

The HTML output will any of these, respectively:

<blockquote class="bc-full"><p>Test content.</p></blockquote>
 
<blockquote class="bc-full"><p>Test content.</p><p class="bc-cite">-John Doe</p></blockquote>
 
<blockquote class="bc-full"><p>Test content.</p><p class="bc-cite">- <a href="http://example.com">John Doe</a></p></blockquote>

This technique could be very well combined with some of the concepts in example 2. Say, if you were to have a blog with multiple authors, you could use [twitter handle="brianpurkiss"] to output a custom styled Twitter follow button that plugs in the specified twitter handle. Again, the possibilites are endless.

Wrap Up

WordPress’ Shortcode has vast amounts of untapped possibilities. It is extremely beneficial in allowing clients to add more complex content areas with no technical knowledge and great ease. It can even be beneficial for those with lots of technical knowledge to better manage duplicate content areas.

Make website management easier – use WordPress Shortcode.

A New Age in Web Typography

With huge leaps in browser capabilities, beautiful web typography is finally a reality. Services like Typekit and free services like Google Web Fonts, Font Squirrel, and webfonts.fonts.com allow web designers and type enthusiasts to finally be able to use the fonts we want. CSS’s @font-face is where web typography is quickly headed. The web’s typographic future is certainly looking beautiful.

How to Use @font-face

@font-face is without a doubt the best option for web designers to create beautiful web typography. Not only is @font-face flat out amazing, is incredibly simple to use. It only requires a few lines of CSS and then declare the font-family just like you would any other font on the web.

body { font-family: web-font, fallback-fonts; }
strong { font-family: web-font-bold; }
em { font-family: web-font-italic; }
 
@font-face {
    font-family: 'web-font';
    src: url('web-font.eot?') format('eot'),
         url('web-font.woff') format('woff'),
         url('web-font.ttf') format('truetype'),
         url('web-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'web-font-bold';
    src: url('web-font-italic.eot?') format('eot'),
         url('web-font-italic.woff') format('woff'),
         url('web-font-italic.ttf') format('truetype'),
         url('web-font-italic.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'web-font-italic';
    src: url('web-font-bold.eot?') format('eot'),
         url('web-font-bold.woff') format('woff'),
         url('web-font-bold.ttf') format('truetype'),
         url('web-font-bold.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

Due to average @font-face font file sizes and to keep load time to a minimum, we recommend at the absolute most, only using five fonts via @font-face but three or lower is a more realistic and ideal number.

For full cross browser compatibility with @font-face, make sure you use each of the web font formats – .eot, .woff, .ttf, and .svg. The file formats required for @font-face can be generated on FontSquirrel.com’s @font-face Generator.

CSS @font-face in Action

Bold Perspective itself uses @font-face for Garamond, the serif font scattered about. Take a look at the Jokal Demo, Abberdein, or Lost World’s Fairs for other great examples of @font-face in action.

CSS @font-face Cross Browser Compatibility

@font-face is completely cross browser compatible with all major web browsers as well as most less popular web browsers. Surprisingly, @font-face has been around for a while and is even supported by old versions of IE. ^*

• Internet Explorer 4+
• Chrome 4+
• Mozilla/Firefox 3.5+
• Safari/iOS 3.1+
• Opera 10+

Obtaining Fonts to use with CSS @font-face

The main reason it took @font-face so long to become popular was not due to cross-browser compatibility, but was primarily due to licensing issues. Most type foundries were reluctant to release @font-face licenses for their very expensive font families. Now that type foundries have finally come around, there are a wide variety of inexpensive or free ways to obtain @font-face licenses.

Inexpensive Web Fonts: GeoCon Light, Font Squirrel, Font Deck, Font Spring, Typekit

Free Web Fonts: Jokal, Clumsy, Exljbris Font Foundry, Junction, Maven Pro, Google Web Fonts

Making your own Web Font for use with CSS @font-face:
Making your own font is an incredibly time consuming and difficult undertaking. But, if you persevere and make a web font, the wonderful boys at Font Squirrel have made it very easy to turn your font into the formats required for @font-face.
Make your own @font-face set

Optimizing Web Typography and @font-face

• Lettering.js – Kerning Type on the Web, great for fine tuning your @font-face fonts
• Fit Text JS – get your typography to fit full width within a container
• Using Text-Shadows to improve web typography
• Wordmark.it – Test Fonts in your Web Browser
• WhatFont Bookmarklet – Identify typefaces, font-sizes, and line height while browsing
• Typesetter – compare font family, font sizes, line height, color, and more side-by-side
• Google Web Fonts – a quickly growing free @font-face library

Wrap Up

We hope you have fount this article and these resources on CSS @font-face useful. If you have any questions or wish to add some tips, @font-face resources, or @font-face fonts, please contact us or hit is up on Twitter.

Looking closely, particularly at the PC-Firefox rendering, you clearly see that Mac-Chrome renders web typography the best. While there aren’t any magical hacks to fix Windows, we can add a little bit of non-intrusive CSS to improve the rendering of text across all browsers and operating systems, particularly on Windows machines. Unfortunately the always dated Internet Explorer (8 and below) doesn’t support text-shadow, so there’s nothing we can do to help IE. But a little help is better than nothing.

body { text-shadow: 0px 0px 1px rgba(0,0,0,.1); -webkit-text-shadow: 0px 0px 0px rgba(0,0,0,.1); -moz-text-shadow: 0px 0px 0px rgba(0,0,0,.1); }