bavotasan.com » quicktag http://bavotasan.com by c.bavota Tue, 07 Feb 2012 15:42:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Magazine Columns Free WordPress Plugin http://bavotasan.com/2009/magazine-columns-wordpress-plugin/ http://bavotasan.com/2009/magazine-columns-wordpress-plugin/#comments Sat, 28 Mar 2009 20:05:38 +0000 c.bavota http://bavotasan.com/?p=523 screenshot-1I have been spending a lot of time developing my Magazine Basic theme so I guess I have magazines on the brain. While speaking with a colleague, I got the idea to create a plugin that would create columns in posts or pages, similar to a magazine article. Thus, Magazine Columns was created.

All you need to do is download the plugin and add the <!--column--> tag to your post or page with the column quicktag in the HTML editor or manually. You can create up to five columns.

]]> http://bavotasan.com/2009/magazine-columns-wordpress-plugin/feed/ 102 Adding a Simple Quicktag to the HTML Editor in WordPress http://bavotasan.com/2009/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/ http://bavotasan.com/2009/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/#comments Wed, 14 Jan 2009 16:01:19 +0000 c.bavota http://bavotasan.com/?p=158 When you are editing a post or writing a new post in WordPress, you might have noticed those buttons above the editing box. They add WYSIWYG type functionality to the WordPress editor for common functions such as bolding, italics and linking. WordPress refers to these buttons as Quicktags.

They should look something like this if you use the HTML editor.

quicktags

If you use the Visual editor they should look something like this.

quicktags2

If you have a function that you use often it is very simple to add it to the Quicktag bar. For this example, I am going to add a button that creates a span tag and asks for a class to the HTML editor Quicktag bar.

The file we need to work with is under wp-includes/js/quicktags.js.

First we need to create the button, so go to around line 36 and enter the following.

36
37
38
39
40
41
42

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

Then we need to add the part that actually makes it call the function that asks the user to enter a class name. Find this part around line 166.

166
167
168
169
170
171
172
173
174
175
176

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 {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And make it this.

166
167
168
169
170
171
172
173
174
175
176
177
178
179

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_class') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertClass(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 + '"  />');
}
}

And it needs one last part, the actual function, to work properly, so go to the end of the file and add this.

403
404
405
406
407
408
409
410
411
412
413
414
415

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

When it comes down to it, this might actually be a little bit more complicated of a Quicktag to create but there you go.

]]> http://bavotasan.com/2009/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/feed/ 5