dyadica.net

With my ongoing theme revamp I have decided that I would like to have the numeric’s of my ordered lists to be a separate color from the content. Though there are methods for achieving this with newfangled css this causes some browser compatibility issues so I believe.

grr have lost the link….worked fine in FF3 but not IE..

The easiest method therefore is to wrap the content in an additional tag for standard css styling. For this purpose I have chosen to use span tags, however as this functionality might be quite commonplace I also decided to add a new quicktag to wordpress to cater.

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.

If you have a function that you use often it is very simple to add it to the  HTML editor Quicktag bar. For this example, I am going to add a button that creates a span tag and I’m going to expand upon this a little by adding facility for a css class within the tag, just in case it might be needed.

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:

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

At this stage we could stop, the quicktag should now look like the following image and provide you the standard span functionality:

However we want it to ask for a css classification so next we need to create a function that will create the starting <span> tag with the class=”" included add the following to the end of the file:

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

finally we need to replace the edShowButton function with the following to actually enable our new function to be called:


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 + '"  />');
}
}

This function is usually found around line 136 of the same file.