Clean Markup Widget for WordPress

Squeaky clean. 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:

How to install & use

Just add the following code to your theme’s functions.php file (or add via plugin), no editing required:

<?php // Clean Markup Widget
// @ https://perishablepress.com/clean-markup-widget/

class Clean_Markup_Widget extends WP_Widget {
	
	public function __construct() {
		
		$id = 'clean_markup_widget';
		
		$title = esc_html__('Clean Markup Widget', 'custom-widget');
		
		$options = array(
			'classname' => 'clean-markup-widget',
			'description' => esc_html__('Adds clean markup that is not modified by WordPress.', 'custom-widget')
		);
		
		parent::__construct( $id, $title, $options );
		
	}
	
	public function widget( $args, $instance ) {
		
		// extract( $args );
		
		$markup = '';
		
		if ( isset( $instance['markup'] ) ) {
			
			echo wp_kses_post( $instance['markup'] );
			
		}
		
	}
	
	public function update( $new_instance, $old_instance ) {
		
		$instance = array();
		
		if ( isset( $new_instance['markup'] ) && ! empty( $new_instance['markup'] ) ) {
			
			$instance['markup'] = $new_instance['markup'];
			
		}
		
		return $instance;
		
	}
	
	public function form( $instance ) {
		
		$id = $this->get_field_id( 'markup' );
		
		$for = $this->get_field_id( 'markup' );
		
		$name = $this->get_field_name( 'markup' );
		
		$label = __( 'Markup/text:', 'custom-widget' );
		
		$markup = '<p>'. __( 'Clean, well-formatted markup.', 'custom-widget' ) .'</p>'; 
		
		if ( isset( $instance['markup'] ) && ! empty( $instance['markup'] ) ) {
			
			$markup = $instance['markup'];
			
		}
		
		?>
		
		<p>
			<label for="<?php echo esc_attr( $for ); ?>"><?php echo esc_html( $label ); ?></label>
			<textarea class="widefat" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( $name ); ?>"><?php echo esc_textarea( $markup ); ?></textarea>
		</p>
		
<?php }

}

// register widget
function myplugin_register_widgets() {
	
	register_widget( 'Clean_Markup_Widget' );
	
}
add_action( 'widgets_init', 'myplugin_register_widgets' );

?>

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 :)

Enjoy!

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!

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.