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 😉

Pootle Pagebuilder

pootle page builder has been a great plugin to develop a pleasant UI. And we still add new features to it and do new version in about every quarter.

What does pootle page builder do?

pootle page builder helps create beautiful multi column pages in WP admin end with multiple rows with parallax, background videos and much.

What’s cool about pootle page builder?

pootle page builder is a work of art, elegant user-friendly user interface, very well integrated with WordPress and designed with a subtle color scheme to match WordPress admin and to make users feel like home while using the pootle page builder. It’s very extensible and comes with tons of hooks to add or remove stuff as needed. Code is beautifully written, optimised and secure and rated ppb-quality-score by scrutinizer code inspector.

Any challenges with pootle page builder?

In pootle page builder we wanted to display all paid add ons to add more features to the pootle page builder in an admin page. Initially we did it by parsing RSS from pootlepress website but they wanted to make their RSS feeds private, so we used github gh-pages branch to store add ons data served on request.

Also, we were initially using jQuery UI tabs, dialogs and sliders etc. but because of it’s widespread use and wide range of themes, we kept getting styling issues in beta versions, So we devloped our own jQuery widgets to handle dialogs, tabs and slider with custom prefixes and it works like a charm till date. 🙂

How is pootle page builder developed/structured?

pootle page builder has following components:

  • User can create multiple rows in pages.
  • There is row setting panel with setting arranged in tabs, here are the settings to set background video, background images, parallax and even full width rows in all themes.
  • Row settings tabs and controls can be filtered by hooks.
  • In rows one can have as much as as 10 columns.
  • These columns can contain multiple content blocks.
  • Each content block has a tiny MCE editor to edit the contents in content block, also there are other settings organised tabs that allow setting transparent background, text color, curved corners and much more.
  • Content settings tabs and controls can be filtered too.

Can I see pootle page builder User Interface?

Aye! Check this video out 😉