I received an email inquiry from someone asking for help customizing a specific commercial theme. Reading the theme’s documentation, I was amazed that three entire pages were dedicated to shortcodes. Each of the page layouts shown in the theme’s demo was achieved by using several of those shortcodes.

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?

Soulver is a Mac application (they also have an iPad version) that has made my front-end development workflow much easier. CSS development requires a lot of simple calculations for element properties like widths, padding and margins.

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?

While working with the jQuery plugin HorizontalNav.js, I found a small bug in the code. In my project I was using HorizontalNav.js along with another plugin, Touchdown.js, and I am conditionally changing between the two menu displays depending on the window size.

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.