Just a quick tech post this week on a topic that will only interest those of you who are bloggers. While I love the template that I based this blog’s look on, it has one quirk that drove me to learn out how to create…

Custom WordPress Buttons

One of the nice things about this WordPress template is that via its CSS, it gives all images a “float: left” property. That is, all images will automatically stay to the left side of a post, letting nearby text wrap around them to the right and underneath. It allows for quick and easy posts with small images… most of the time.

However, there are many times when I don’t want text to wrap around an image, but simply start on the next line. In these cases, I have to clear the float property that the CSS assigns to all images by default. This meant adding either manually “float: none” to every image that I didn’t want text wrapping around or simply putting “<div style=”clear: both;”></div>” below such images. I got very tired of typing these out, so I poked around Google looking for an answer.

And I found one. The solution was to add a custom button to the HTML portion of the WordPress post editor that would quickly and easily insert a block of code wherever I need it to go. As it turns out, the quicktags.js file, located under wp-includes/js/ in any WordPress installation makes it very easy to add buttons.

Inside that file, beginning on line 36, all of the code for the existing buttons is listed in an easy-to-understand format:

edButtons[edButtons.length] =
new edButton(‘ed_buttonname‘
,’openbuttontext‘
,’<openbuttoncode>‘
,’</closebuttoncode>‘
,’closebuttontext‘
);

buttonname: Any arbitrary name for your button.

openbuttontext: The text that will appear on the button initially.

openbuttoncode: The code that will be inserted on the first click of a button.

closebuttoncode: The code that will be inserted on the second click of a button (for closing HTML tags).

closebuttontext: The text that will appear on the button after it has been clicked once.

So in my case, to make a button that inserts ”<div style=”clear: both;”></div>” wherever I need it, I used this code:

edButtons[edButtons.length] =
new edButton(‘ed_div’
,’div’
,’<div style=”clear: both;”></div>’
,”
,’div’
);

As you can see, I didn’t include any closing code as this is application doesn’t require it.

Again, I originally found this handy tip here, so that’s where credit goes. I’m simply reposting the information here to hopefully make it easier for future WordPress custom button seekers to find.