[stephenwiggs]

stephenwiggs

#1665

Occasionally, I would like to display some text on a blog post in a slightly smaller size (like a footnote). That entails having to switch from the visual editor to the html editor and making the appropriate change.

It would be cool to have a shortcode that would change the displayed size of the text in the published blog post (similar to the message block shortcodes). I have tried to find a plugin that would accomplish this, but haven’t bee able to find anything.

[Kenneth John Odle]

Kenneth John Odle

#16725

Sort of figured it out.

I added this to child theme CSS:

#smalltext {font-size:85%;}

and this to child theme functions:

function smalltext_shortcode_handler( $atts, $content=null, $code="" ) {

return '<span id="smalltext">' . $content . '</span>';

}

add_shortcode( 'small', 'smalltext_shortcode_handler' );

It works, but I have to type [small] and [/small] myself. I haven’t yet figured out how to add it to the MCE editor.

[Syahir Hakim]

Syahir Hakim

#16726

You might want to use the class attribute instead of id for the <span> element. IDs are meant to be unique in a page, while classes are not. Just in case some of your posts/pages need more than one instance of the [small] shortcode.

[Kenneth John Odle]

Kenneth John Odle

#16727

Done. Thanks for the heads-up.

[raindance]

raindance

#16728

Ken-

I put this is another thread but just wanted to let you know this is how I did it…I wanted other style choices in a drop down on the visual editor too…

Styles in tiny mce visual editor

http://funroe.net/projects/super-edit/

Plugins: WP Super Edit, WP Super edit theme classes

Adds CSS classes from your themes editor.css file to the visual editor

From forum:

Installed WP Super Edit and the associated WP Super Edit Theme Classes plugin.
Then you have to go to settings on the left of the WP dashboard > WP Super Edit > Configure Editor Plugins > check the box for Advanced CSS / styles Plugin then go to the Arrange Editor Buttons link at the top and drag the Custom Classes button onto the left side toolbars somewhere.

Then go the file in the theme folder editor-styles > and add whatever styles you want to show up in the drop down for styles to apply using the visual editor.