WordPress Canada

Customizing WordPress Text Editor Toolbar

A topic I used to see frequently on BloggerForum and now appearing on the WordPress support forums is how to get text to wrap around an image. This is easily accomplished via CSS but I'll show you an even easier implementation for WordPress.

I currently use a padding of 8px for images included in posts. First, add this to your style sheet,

.alignleft{
float: left;
border: none;
padding: 8px;
margin: 0;
}
.alignright{
float: right;
border: none;
padding: 8px;
margin: 0;
}

Then, when you upload an image to use in a post add the particular class to the image tag as such,

<img src="image.gif" class="alignleft" /> or right as the case may be. All images will now inherit that property automatically. But what about that easier implementation for WordPress I talked about? I'll show you how to add a couple of buttons to your text editor toolbar.

All of the current buttons on your text editor toolbar can be found in wp-includes/js/quicktags.js. Open the file in a plain text editor like Notepad and look for,

edButtons[edButtons.length] =
new edButton('ed_strong'
,'b'
,''
,''
,'b'
);

Somewhere below that add the following,

edButtons[edButtons.length] =
new edButton('ed_leftpic'
,'Photo Left'
,' class=\"alignleft\"'
,''
,''
);

edButtons[edButtons.length] =
new edButton('ed_rightpic'
,'Photo Right'
,' class=\"alignright\"'
,''
,''
);

This will install 2 custom buttons on your toolbar - one called Photo Left and one called Photo Right. The next time you write a post and upload an image you won't have to manually add the 'class="alignleft"' attribute to your image tag - just click the button and it will be done automagically.

One thing to remember. Since you are altering core files the changes will vanish the next time you upgrade WordPress since the new files will overwrite your customizations.

• RSS
• Digg This
• Tweet This
• Stumble It
• Add to Delicious