Welcome to the new design! Please report any bugs or issues, thanks :)
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.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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
Playing the long game.
They have weaponized the idiots.
Good software never steals focus from the user. Even during startup.
After 10 years running my own business, I still manage schedules and tasks using old school post-it notes, sometimes simple sometimes very elaborate.
You know those sites, where you're trying to just grab a quick bit of information but the page is shifting all over the place as it loads up 3 million advertisements.
Selling two of my top WordPress domains, wp-zen.com & zen-wp.com $300 for both. Aged 9 years. Drop a line if interested.
Never force your users to type out a password (or any long string of characters) by blocking the paste function. Typing long strings leads to MORE errors than simple copy/paste.