Pootle Button

pootle button is a wonderful lightweight TinyMCE plugin to add buttons in WordPress editor.

What does pootle button do?

pootle button makes it incredibly easy to add buttons to WordPress editor. It allows setting background, border radius (for rounded corners), text color an much more!

What’s cool about pootle button?

pootle button allows adding custom hover color which because of the complexity in implementation is not implemented in any button building/adding plugin for WordPress, It also offers adding beautiful custom gradients just pick 2 colors and bingo your button has a beautiful gradient as background! It also has an option to choose icons for buttons which come from WordPress’ dashicons for making professional looking buttons without a single line of code!

Any challenges with pootle button?

Hover color was an issue for button because inline styles don’t allow styling hover states, that’s why none of the button builders have not implemented this… So to solve this issue we add hover color as a data attribute to button and and set it as background on hover using jQuery.

Also, gradients were a very interesting implementation, taking into consideration that some browsers don’t support gradients, we added a fallback to first color as background in case browser does not support gradients.

How is pootle button developed/structured?

pootle button has following components:

  • PHP to register tinyMCE plugin components and scripts.
  • TinyMCE plugin written in JS.
  • Dialog rendering PHP code.
  • Dashicons selecting jQuery plugin.

Can I see pootle button User Interface?

Aye! Check this video out 😉