As soon as I saw Iris, I fell in love. She is user-friendly, colorful and fun. I found that implementing the new color picker is very similar to Farbtastic.

Iris Color Picker Demo Plugin

To use the Iris color picker in a plugin requires:

1. Running a version of WordPress that is 3.5 Beta or higher.
2. Loading the ‘wp-color-picker’ script and style into your plugin options page.
3. Adding a text input for your color value to your plugin options page.
4. Writing a custom jQuery script to call Iris’s wpColorPicker method on your color text input field(s).

How does the code look for implementing steps 2-4?
I created a demonstration plugin to help answer that. The plugin doesn’t do anything itself, it is intended as a guide for developers interested in using the new Iris color picker in a WordPress plugin.

View on Github

This was the sample code for an “About” page:

[one_half_fw type="remove"]
[frame link="http://theme.phowebstudio.com/lion/wp-content/uploads/2012/03/team.jpg" src="http://theme.phowebstudio.com/lion/wp-content/uploads/2012/03/team.jpg" width="460" align="aligncenter"]
[/one_half_fw]
[one_half_fw type="remove"]
[clear size="20"]
[intro]SOME WORDS [intro_bold]ABOUT US[/intro_bold][/intro]
[clear size="10"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper nisi eu eros dignissim pulvinar. Aliquam erat volutpat. Nam convallis vehicula feugiat. Pellentesque nisl dui, consectetur vitae molestie in, mollis dignissim arcu. Duis convallis malesuada ante, nec aliquet leo iaculis et.
[clear size="10"]
[block_title title="Why choose us ?"]Here is some reasons why choose us[/block_title]
[accordion]
[accordion_item heading="Support 24/7"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi nunc, vehicula sodales consequat ut, laoreet eu nisl. In ultricies suscipit justo lacinia viverra. Quisque metus magna, faucibus non luctus quis, elementum et ligula.
[/accordion_item]
[accordion_item heading="Responsive layout"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi nunc, vehicula sodales consequat ut, laoreet eu nisl. In ultricies suscipit justo lacinia viverra. Quisque metus magna, faucibus non luctus quis, elementum et ligula.
[/accordion_item]
[/accordion
[/one_half_fw]


What a mess! I am a developer, and I have no clue on the intended purpose of some of those shortcodes. What the heck is [one_half_fw type="remove"]?

Requiring use of a shortcode means you are asking users to remember interface-less non-standard commands to add or style content inside of a Content Management System.

As WordPress Developers, we have tools that provide a much better experience for users:

• page templates
• TinyMCE custom buttons
• meta boxes

Can we agree to only use shortcodes when absolutely necessary?

I found this gem on Github today, OpeninSublimeText.app. I love all things SublimeText2 so I immediately installed the app. I am happy to give up a little section of my Finder bar to this useful application.

Open In SublimeText is a tiny tool that allows you to open the current folder or selection from Finder as a Sublime Text project. Just as simple as that.

https://github.com/yeco/OpenInSublimeText.app

Font Awesome is my favorite of the free font icon sets. All of the 220 pixel perfect icons are well designed, have great cross-browser support and are easy to use.

I am using the Font Awesome icon set to display the social icons to the header area of this site. I wanted to be able to use the icons without having to rely on my current theme, so I created a simple WordPress plugin.

The Font Awesome Icons plugin adds the Font Awesome font and necessary styles to any WordPress site. The plugin is available to download from the WordPress plugin repository or from my Github account.

Update October 7, 2012:

The plugin is no longer available from the WordPress plugin repository, but it is still available for download from it’s Github repository.

Download from Github

Usage Instructions

To use any of the Font Awesome icons on your WordPress site you have two options:

1. HTML Option

All code examples on the Font Awesome site apply: http://fortawesome.github.com/Font-Awesome/#code

Examples:

<i class="icon-pencil"></i>

<i class="icon-phone"></i>

<i class="icon-chevron-left"></i>

2. Shortcode Option

Don’t want to worry about HTML tags? You can use a shortcode in your posts, pages and even widgets to display a Font Awesome icon.

The shortcode to use is [icon name=name-of-icon], where name=X is the class of the icon you would like to use.

Examples:

[icon name=icon-pencil]

[icon name=icon-phone]

[icon name=icon-chevron-left]

Full Icons Set

The plugin submission form now has a new field requiring a link to a zip file of the entire plugin contents.

WordPress Plugin Repository submission form

This looks to be a step toward moving the plugin review process to be as through as the theme review process and will improve the overall code quality in the WordPress Plugin Repository.

When I needed a tool to double-check my work or just do computations for me, I was using either the built-in Calculator or Excel. The built-in Calculator app is simple but it doesn’t save any history of past calculations. Excel takes forever to open and was just too much application for what I really needed.

Soulver is the perfect solution, it is lightweight, fast and allows me to save my work. I keep the application running with a scratch document for any quick width or margin/padding calculations. I also have a few files saved that I reuse over and over again.

Using only words to explain how I use Soulver is difficult. I thought it would be best to show off two of my favorite calculators.

Calculating Fluid Grid Widths

I have a file that I constantly re-use when determining CSS element widths. I believe the calculation is based on the Semantic Grid System.

Calculating Typography Rhythm

I have a LESS mixin I use to set a baseline grid, but I also keep the calculation in a Soulver document to verify the expected output.

You can click on the images above to download the files.

If you are using Soulver, how are you using it?

The bug I found is really minor, but HorizontalNav.js was appending a new element each time it was activated. There should have been a conditional check to make sure the element didn’t already exist before another element was appended.

I filed an issue on Github explaining the bug and then looked into how I could fix the code for my project. In a matter of minutes I had added the conditional statement needed and tested my code. I knew my fix was not just useful to myself, but would also be useful to the plugin as a whole. I forked the original author’s repository and submitted a pull request with my code for fixing the bug that I had filed. About 15 minutes later, the author had accepted my pull request and everyone was happy.

This is my favorite aspect of open source code projects. Everyone has the power to contribute. When you find a bug record what steps are needed to replicate it. Report the bug and be sure to provide as much information as possible. Then if you think you can fix the bug, do so and contribute your patch back to the original project. If you cannot fix the bug, that is okay. You can still be a part of the solution by answering follow-up questions in a timely manner.

I pulled down the latest updates on the Bootstrap 2.1 WIP branch from Github and was surprised by a new color scheme on their homepage.

Some other changes in their development branch are:

1. Cleaner looking documentation pages with left navigation
2. Offsets added for the fluid grid
3. More display options for javascript popovers
4. Increased base font-size to 14px
5. Addition of prepend/append support in search form inputs

There has not been an expected release date posted for Bootstrap 2.1, but 88% of the open release tickets are closed. I am keeping the development branch of BootstapWP up to date with Twitter’s development to have an updated release ready with full Bootstrap 2.1 support.

Thank you to all the attendees of my session. I hope everyone was able to get something out of it! I had some great discussions afterwards about working WordPress Navigation. So good luck to all of you with getting started with creating your own “zazzy” WordPress Menus.

Download Slides

Download Theme Files

So very true.

Photo of slide from Ted Rheingold’s talk at Big Omaha 2012