For some time, I’ve wanted to add the ability to change the font size of a selected portion of a post, as if I were adding a footnote. Wil Wheaton does this a lot and it’s kind of cool and very handy.

I’ve had some small success doing this. I added this to my child theme CSS:

.smalltext {font-size:85%;}

and this to my child theme’s functions.php file:

function smalltext_shortcode_handler( $atts, $content=null, $code="" ) {
    return '<span class="smalltext">' . $content . '</span>';
}
add_shortcode( 'small', 'smalltext_shortcode_handler' );

It works. Here’s an example.*

It looks like this in the visual editor:

It works. [small]Here's an example.[/small]*

I have not yet figured out how to add a button to the TinyMCE editor in WordPress to handle this (that’s next), so I have to type the shortcodes by hand, but it’s easier than going back and forth between the visual editor and the HTML editor.

* Actually, it looks better if you use it for a bigger chunk of text, like this (pseudo-?) footnote, because then your eyes have more small text to compare to the “regular” text. After reading this, I’m sure you see what I mean.

About the CSS Code

I deliberately defined the smaller font size as a percentage, because if a reader uses their browser’s “view” function to increase the font size displayed on their computer, I still want that small text to be smaller than the rest of the text, but I want them to be able to scale it to a size they can easily read.