Green code on black screen

Custom Quicktag Buttons and WordPress upgrade

You can add your own custom Quicktag Buttons by editing file quicktags.js (it’s one from many tutorials on the Web). File is located at folder /wp-includes/js/ (form WP versin 2.0 +). But here appears a problem – your modification exists only to next WordPress upgrade. In this short article, I will show you two alternative fixes.

Handy method: Quicktags.js in WordPressa theme folder

Copy /wp-includes/js/quicktags.js to /js/ into your theme folder, then add new buttons and put this code to functions.php :

function fc_load_quickatags_js()
{
	wp_deregister_script('quicktags');
	wp_register_script('quicktags', (TEMPLATEPATH. "/js/quicktags.js"), false, '1.0');
}
add_action('admin_enqueue_scripts', 'fc_load_quickatags_js');

Tips: When you register script ‚quicktags’ and then modify your copy of quicktags.js file, use your own versioning numeration, to avoid cache problem in some web browsers (in Chrome you have to refresh your edit form window a couple of times).

„Handy method” it’s not resistant for changes in original quicktags.js file made by WordPress team (yeah, it’s possible).

Method Small Brute Force – Add Quicktags Buttons by JavaScript

You don’t need to modify quicktags.js. Add this code to functions.php in your theme folder:

function fc_add_quicktags()
{
	?>
	<script type="text/javascript" charset="utf-8">
	// <![CDATA[

		if (edButtons && jQuery)
		{
			amount = edButtons.length;
			i = amount;

			var my_buttons = [
				['ed_space',	'Space',	"[space]\n",	'',		''],
				['ed_hr',		'hr',		"<hr />\n",	'',		'']
			];

			jQuery.each(my_buttons, function(index, button) {
				edButtons[i++] = new edButton(button[0], button[1], button[2], button[3], button[4]);
			});

			i = amount;
			jQuery(document).ready(function(){
				jQuery.each(my_buttons, function(index, button) {

					jQuery("#ed_toolbar").append('<input type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' + (i++) + ');" value="' + button[1] + '" id="' + button[0] + '"title="' + button[1] + '" accesskey="' + button[4] + '" />');
				});
			});
		}
	// ]]>
	</script>
	<?php
}
add_action( 'edit_form_advanced', 'fc_add_quicktags' );
add_action( 'edit_page_form', 'fc_add_quicktags' );

I think code is clear, but if you have some questions, ask me in comments. Oh, I know – there could be only one „each” statement ;)

Autor

Kamil Skrzypiński

Fullstack developer, programista aplikacji internetowych i mobilnych. Zna się m.in. na Ruby on Rails, JavaScript, Objective-C, PHP, HTML5 i CSS3. Instalacja i konfiguracja serwera z mniej i bardziej popularnymi usługami, to też dla niego nie problem. Niegdyś zapalony radiowiec - głównie od strony techniczno-informatycznej.

2 myśli na temat “Custom Quicktag Buttons and WordPress upgrade”

  1. Thank you for this! After my WordPress 3.1 upgrade, the quicktags for my theme stopped working. I don’t know why (did they rewrite the way quicktags work?). Luckily, I was able to use this javascript „brute force” method to get them displaying again.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *