Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom HTML WordPress Shortcode - add any HTML tag in the WYSIWYG editor!
/**
* HTML MARKUP SHORTCODES
* by Nick Bair
*
* This is a nice little cheater shortcode for devs who don't want the WordPress
* WYSIWYG editor to strip out their HTML tags.
*
*
*
* USAGE
*
* Any HTML tag can be produced with a shortcode like so:
*
* [markup tag="abbr"]NASA[/markup]
*
* You can include any HTML attribute:
*
* [markup tag="abbr" title="Not A Space Acronym"]NASA[/markup]
*
*
*
* NESTING
*
* You can nest shortcodes, but you can't nest shortcodes with the same name.
* To allow for nesting, we've included some special-case shortcodes which you
* can use:
*
* [markup-a tag="blockquote"]
* Don't believe everything you read on the Internet.
* [markup-b tag="cite"]Abraham Lincoln[/markup-b]
* [/markup-a]
*
* We've set up letters A-D for this purpose. Honestly, if that's not enough
* nesting for you, why aren't you coding it into your template?
*
*
*
* SHORTCUTS
*
* We've included some shortcut codes to help with some commonly-used tags.
* They are as follows:
*
* - [div]
* - [span]
* - [link] (produces <a> tags)
* - [img]
*
*
*
* CUSTOMIZING
*
* You can add more shortcuts if you want by copying & pasting the
* add_shortcode() functions below and changing the first argument.
*
*/
function html_markup_shortcode($atts, $content = null, $tag) {
switch ($tag) {
case 'markup':
case 'markup-a':
case 'markup-b':
case 'markup-c':
case 'markup-d':
case 'div':
case 'div-a':
case 'div-b':
case 'div-c':
case 'div-d':
$markup_tag = (isset($atts['tag'])) ? $atts['tag'] : 'div';
break;
case 'link':
$markup_tag = 'a';
break;
default:
$markup_tag = $tag;
}
unset ($atts['tag']);
$attributes = '';
foreach ($atts as $k => $v) {
$attributes .= " ${k}=\"${v}\"";
}
$output = "<${markup_tag}${attributes}>";
$output .= ( ! is_null($content)) ? do_shortcode($content) : '';
$output .= "</${markup_tag}>";
return $output;
}
add_shortcode( 'markup', 'html_markup_shortcode' );
add_shortcode( 'markup-a', 'html_markup_shortcode' );
add_shortcode( 'markup-b', 'html_markup_shortcode' );
add_shortcode( 'markup-c', 'html_markup_shortcode' );
add_shortcode( 'markup-d', 'html_markup_shortcode' );
add_shortcode( 'div', 'html_markup_shortcode' );
add_shortcode( 'div-a', 'html_markup_shortcode' );
add_shortcode( 'div-b', 'html_markup_shortcode' );
add_shortcode( 'div-c', 'html_markup_shortcode' );
add_shortcode( 'div-d', 'html_markup_shortcode' );
add_shortcode( 'span', 'html_markup_shortcode' );
add_shortcode( 'link', 'html_markup_shortcode' );
add_shortcode( 'img', 'html_markup_shortcode' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.