Now that we’ve updated our style.css so that the caption text actually looks different than regular text, let’s move on. We’re going to add a “caption” button to our Quicktags that will let us highlight anything and put a caption around it. However, we don’t want to highlight just anything–we want to highlight an image we’ve already inserted into our post. What’s next?
Updating/Screwing With Quicktags.js
[ad#rightpost]That’s right. My favorite thing to hack around with: Quicktags.js. Now I freely admit that there might be a better way to do this. But in my hurry-and-get-it-done mode, this is what I came up with. Basically, it’s just a variation on my Quick and Dirty Amazon Links post.
So first things first–make a backup of your quicktags.js. Seriously: you will screw up your quicktags.js at least once during this process. So make sure you can back out gracefully. Got it? It should be in your wp-includes/js directory off of your main blog directory. Good.
1. Go to the edButton section. You’ll see it–there’s a bunch of things in it that…well, they look like this code below. ADD that code in there somewhere.
edButtons[edButtons.length] =
new edButton('ed_caption'
,'caption'
,''
,'[/caption]'
,'c'
,-1
); // special case2. Next you want to find the section that starts with this:
function edShowButton(button, i) {And you want to add this…I’m breaking it up so it doesn’t break my theme here, but you’ll get the gist. If you’re concerned about the lines being broken and you’d feel better cutting and pasting from a different file, I’m putting this all in a flat text file here. Feel free to save that to your hard drive and follow along here.
else if (button.id == 'ed_caption') {
document.write('');
}You want to add this before the end of that edShowButton section. The last bit of which should look like this:
else {
document.write('');
}
}If you put it below this, then you’ll screw yourself. So just don’t do that.
Below that you should see the section with all the functions in it. Here’s the one to add, just in between two existing functions. You’ll know you’re in the function section because the code will look like this and start with the word “function,” natch.
function edInsertCaption(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = '';
}
if (!edCheckOpenTags(i)) {
var width = prompt('Enter the image width', '');
var cap = prompt('Enter the Caption', '');
if (cap) {
edButtons[i].tagStart =
'';
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
}
Now when you use this, you’ll be asked to enter two things. First, the width of the caption area. This should be the same as the width of the image. If you’re using this to wrap some image code in a caption, the width will be right there. It occurs to me that if you’re using the TinyMCE editor that lets you edit in code, I have no idea how this will work. You might want to screw with it. Me, I hate that thing. If it works for you, rock on, but the first thing I always do when setting up a new WordPress install is turn that off.
Second, you’ll be asked for the caption. And that’s just whatever verbiage you want to go in the caption. As always, if you screw around with my code, just make sure that you’ve got opening and closing single quotes. Notice also that I use double quotes inside the single quotes for my HTML code. So don’t mix and match.
As previously stated, you will break your quicktags first try. So as long as you’ve got a backup, you’ll be fine and worst case scenario, only you and the people who post on your blog will see that there’s a problem–and the problem will be pretty damn obvious: your quicktags won’t be there. Check that your { and } are all where they should be, that your quotes match up and that you haven’t inadvertently called a variable edCaption in one place and edInsertCaption in another.
Also, if you make this change and wonder why it’s not showing up–clear your browser cache (in Firefox that’s Tools > Options > Advanced > Network > Clear Now) then refresh your edit page. If you still aren’t getting it, clear your cache, restart your browser and try again. If you then still aren’t getting it, you might have screwed something up. Check your code.
If you find any problems with my code here, let me know in the comments. And if you have any questions or, more likely, know how to do this better, please comment as well.
