Eigen knop toevoegen aan de editor

  • HTML
  • PHP
  • Snippets
  • Wordpress

Hieronder een kleine snippet hoe een knop toe te voegen naast de Media toevoegen knop in de editor van berichten/pagina’s

///////////////////////////////////////
// Media button
///////////////////////////////////////

class Insert_Atomicon_Button {

	public function __construct() {
		add_action('admin_init', array( $this, 'init' ) );
		add_action('media_buttons_context', array( $this, 'button' ) );
		add_action('admin_footer', array( $this, 'dialog' ) );
	} // end of construct

	// Initialize the thickbox (modal dialog)
	public function init() {
		add_thickbox();
	} // end of init

	// Add button next to the 'Insert media' button on a post page
	public function button( $context = '' ) {
		$context .= '
		<a href="#TB_inline?width=400&inlineId=insert_atomicon_dialog" class="thickbox button-secondary" title="Insert Atomicon">
			<span class="wp-media-buttons-icon dashicons dashicons-feedback"></span> Insert Atomicon
		</a>
		';
		return $context;
	} // end of button

	// Add the dialog to the bottom of the admin page
	public function dialog() { ?>

		<div id="insert_atomicon_dialog" style="display:none;">
			<h2>Insert Atomicon dialog!</h2>
			<p>Press <strong>OK</strong> to insert <strong>Atomicon</strong></p>
			<p class="submit">
				<a href="#" onclick="tb_remove();" class="button-secondary">Close</a>&nbsp;
				<a href="#" onclick="tinymce.activeEditor.execCommand('mceInsertContent', false, '<h1>Atomicon</h1>'); tb_remove();" class="button-primary">OK</a>
			</p>
		</div>

	<?php
	} // end of dialog
} // end of Insert_Atomicon_Button

// Create the button
new Insert_Atomicon_Button();

Met wat kleine aanpassingen kun je de bovenstaande code hierboven in je zelfgemaakte plugin of thema gebruiken.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *