Online Tips for Web Developer/Designer

Often time when you edit the content, you would like to add a custom class or div/span to wrap your text. How do i add this QuickTag to the html editor in wordpress. WYSIWYG function in the wordpress include all the basic functions such as bold, italic, link and etc. WordPress refers thess buttons set as Quicktags.

HTML view on your WYSIWYG Editor

Visual view on your WYSIWYG Editor

In this tutorial you will see how easy it is to add a Quicktag bar within your editor. You basically have a editor custom as your like. I am going to add 2 buttons that create a span and div tag which ask you or your editor for a class to the HTML eidtor Quicktag.

The file you need a change is under

wp-includes/js/quicktags.js.

On the new wordpress included file you will have two file quicktags.js and quicktags.dev.js. quicktags.js is a compressed file which it is hard to custom. Basically I just copy and paste all the code from quicktags.dev.js to quicktags.js

quicktags.dev.js

The below code is basically adding the code to the HTML editor.

edButtons[edButtons.length] =
new edButton('ed_span_class'
,'span'
,''
,'</span>'
,'p'
); // special case

edButtons[edButtons.length] =
new edButton('ed_div_class'
,'div'
,''
,'</div>'
,'p'
); // special case

Adding the button action

function edShowButton(button, i) {
	if (button.id == 'ed_img') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_link') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_span_class') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertSpanClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_div_class') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertDivClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
	}
}

Below the function list add this code

Where is the function list you are talking about? Search the following codefunction edInsertLink. Basically for easy tracking, I put the code right below the edInsertLink function.

function edInsertSpanClass(myField, i, defaultValue) {
	if (!defaultValue) {
	defaultValue = '';
	}
	if (!edCheckOpenTags(i)) {
		var CLASS = prompt('Enter the CLASS name for your SPAN' ,defaultValue);
		if (CLASS) {
			edButtons[i].tagStart = '<span class="' + CLASS + '">';
			edInsertTag(myField, i);
		}
	}
	else {
		edInsertTag(myField, i);v
	}
}

function edInsertDivClass(myField, i, defaultValue) {
	if (!defaultValue) {
	defaultValue = '';
	}
	if (!edCheckOpenTags(i)) {
		var CLASS = prompt('Enter the CLASS name for your DIV' ,defaultValue);
		if (CLASS) {
			edButtons[i].tagStart = '<div class="' + CLASS + '">';
			edInsertTag(myField, i);
		}
	}
	else {
		edInsertTag(myField, i);v
	}
}

Resources

Edit Quicktags Tutorials by tamba2.org.uk
Colour your Quicktags by tamba2.org.uk

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!