Clean Markup Widget for WordPress

[ WP Clean Markup Widget ] When adding content to your sidebar, it’s nice to be able to output clean, well-formatted markup. There are several ways to do this, including adding HTML directly in the theme template, installing a plugin, or simply using a widget. Widgets provide a great way of customizing sidebars and other widgetized areas, but as you may have seen in the source-code, the HTML is treated with all sorts of additional attributes, elements, and classes. Sometimes, you just need a widget that outputs exactly what you tell it to, without adding or changing anything.

A widget for clean, well-formatted markup

So I created a “clean-markup” widget that I use around some of my sites. It’s great for adding straight-up HTML (lists, paragraphs, et al), but also for adding template code for advertisements and other 3rd-party snippets, where unmodified HTML is key to proper display and/or functionality. Really it’s nothing fancy, just a simple WordPress widget that outputs exactly what you tell it to. No fuss, no muss. Here is a screenshot of the widget in action here at Perishable Press:

[ WP Clean Markup Widget ]

How to install & use

Just add the following code to your theme’s functions.php file, no editing required:

<?php // Clean Markup Widget @
add_action('widgets_init', create_function('', 'register_widget("clean_markup_widget");'));
class Clean_Markup_Widget extends WP_Widget {
	function __construct() {
		parent::WP_Widget('clean_markup_widget', 'Clean markup widget', array('description'=>'Simple widget for well-formatted markup &amp; text'));
	function widget($args, $instance) {
		$markup = $instance['markup'];
		//echo $before_widget;
		if ($markup) echo $markup;
		//echo $after_widget;
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['markup'] = $new_instance['markup'];
		return $instance;
	function form($instance) {
		if ($instance) $markup = esc_attr($instance['markup']);
		else $markup = __('&lt;p&gt;Clean, well-formatted markup.&lt;/p&gt;', 'markup_widget'); ?>
			<label for="<?php echo $this->get_field_id('markup'); ?>"><?php _e('Markup/text'); ?></label><br />
			<textarea class="widefat" id="<?php echo $this->get_field_id('markup'); ?>" name="<?php echo $this->get_field_name('markup'); ?>" type="text" rows="16" cols="20" value="<?php echo $markup; ?>"><?php echo $markup; ?></textarea>
<?php }
} ?>

Once the widget code is in place and uploaded to the server, visit the Appearance > Widgets and you’ll see the clean-markup widget ready for use, just like any other awesome WP widget :)


I hope this helps anyone else out there looking for a good way to add clean markup via WordPress widget. As always, your suggestions and ideas are welcome!