New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Clean Markup Widget for WordPress

[ WP Clean Markup Widget ]
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:

[ WP Clean Markup Widget ]

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!

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
The Tao of WordPress: Become your own WordPress guru.

9 responses to “Clean Markup Widget for WordPress”

  1. Knut Sparhell 2012/06/20 8:25 pm

    If I add this code to my functions.php file, and later I update my theme, this is gone. Add it again. No way, no “enjoy”!

    I can make a child theme for myself, or I can create a simple plugin with this code.

    Why do you recommend adding raw code to functions.php when better solutions are available?

    • Jeff Starr
      Jeff Starr 2012/06/20 8:37 pm

      Hi Knut, thanks for the feedback. It’s just a piece of code, really. It works 100% awesome in functions.php for me, but if it makes more sense for you to use as a plugin or child-theme, then go for it — that’s why I took the time to share it with you :)

  2. I wonder if there is a remove_filter()-way to do it globally for all existing widgets similiar to the wpautop-hack on the_content()?

    @Knut: In a way, adding raw code to functions.php in your theme is what functions.php was made for.

    • Jeff Starr
      Jeff Starr 2012/06/21 1:03 am

      Yes good point — I believe there is a way to disable it globally, but quite a few widgets rely on auto-formatting for output, so in general.. risky.

  3. Really great widget – I’ve been struggling with some issues revolving around having all kinds of junk passed to the “text” widget and didn’t know where to start to do this.

    Thanks for this!

  4. I like it!
    :)

  5. Jadwal Training 2012/08/06 3:20 pm

    Hi Jeff, Thanks for usefull post… :)

  6. can you please create this plugin so that we can download it!?

    • Jeff Starr
      Jeff Starr 2012/12/05 2:53 pm

      Hi arron, it’s actually meant to be added to a theme’s functions.php file.. if such file doesn’t exist, you can create a blank PHP file named “functions.php” and add the code directly.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
LOL @ “weekly” support: “Your request has been received and will be reviewed soon. Neil (your support guy) checks support requests weekly. Rest assured we’ll get to it!” — Gotta be kidding with this.
After several days of work, finally taking a break. If anyone needs me, I'll be in Zora’s Domain, working thru Mah Eliya shrine.
Never ever call the client a useless idiot. Even if it’s true.
Inevitable that Google shuts down Feedburner. Maybe this year? Who knows. Here is a nice summary plus alternatives.
There is no way that Marvel can serve up anything better than what they've already done with Infinity saga/Endgame. Knowhere to go but down, sadly.
I built a new search launchpad to make my life easier. So I can search multiple engines quickly and easily.
Updating all muh plugins for WP 5.5 imminent release! Wut August :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.