Rutwick Gangurde's Blog

Gravity forms is an amazing plugin. I have extensively worked with it, made addons for it and did a lot of hack style work. It has a great interface. The actions and filters make addon building and customization a breeze.
But obviously, as every rose has its thorns, GF too has a few things that developers (and especially the designers who have to tackle with their ul/li based markup) are bugged of! There’s one thing that I found a little weird, despite being such a big plugin, they have an essential HTML element missing, that is ‘optgroups’. optgroups come in handy when your putting grouped data items in HTML selects. Like ‘cars’ can be an optgroup and the model names could be its options.

To solve this issue, I wrote this little hack using jQuery, which will allow you to simulate an optgroup in an HTML select/drop down when using GF.

Things you should know:

• Gravity forms backend interface – How to add new elements, edit them, set their properties etc.
• jQuery – This is what does the magic!

Let’s assume we want to make optgroups of cars, with the manufacturer as an optgroup and the models as their respective options. To begin with, lets make a simple Gravity Form first. Or you could use an existing one. Add a ‘Drop Down’ element to it. Name it as ‘Vehicles’. Give it a CSS class as ‘custom-opt’ (or anything you want, we’ll be using it later). Now, when we add the choices to this drop down, make sure to check ‘show values’. This will enable values for the options, which otherwise are just labels if this is unchecked. This is essential for our trick to work!

Now, say we want to add a list of BMW cars to our drop down. Here, ‘BMW’ will be an optgroup and its models will be the options/choices. So, lets add ‘BMW’ as a choice ‘Label’ and enter its corresponding ‘Value’ as ‘start’. The label ‘BMW’ will become the label for our optgroup, and the value ‘start’ will indicate the begin of an optgroup. Next on, lets add the model names as we wish, and also add their corresponding values. Values could be just the same as the labels, but with spaces and upper cases replaced with underscores and corresponding lower cases respectively! When we’re done adding the options, lets add an ending for the optgroup. Enter ‘BMW’ again as a choice label, and it’s value as ‘end’. I’m sure you understood that we’re indicating the start and end of the BMW optgroup with values as ‘start’ and ‘end’ respectively. My drop down looks like this in the edit mode:

Now insert the form in a page you desire, and take a look at how it looks in the front end:

Oops, where are the optgroups?

Well relax, we are yet to add the jQuery that does the magic!
The idea is simple. We’ll read the drop down with our jQuery, check whichever choice has a value ‘start’, use it to start a new optgroup with the label as the optgroup label, and look for the next choice with the value as ‘end’ and use it to end the optgroup.

Here’s the jQuery that does it:

jQuery(document).ready(function(){
     //Use the class you used for the drop down here, I used ‘custom-opt’
     jQuery('.custom-opt select option').each(function() {
        //look for 'start', start a new optgroup with the label	
        if(jQuery(this).val()=='start') {
            var label = jQuery(this).text();
            jQuery(this).replaceWith("<optgroup label='"+label+"'>");
        }

        //look for 'end' end the optgroup here
        if(jQuery(this).val()=='end') {
            jQuery(this).replaceWith('</optgroup>');
        }
    });
});

Put this code wherever suitable for your project environment, and now take a look at the form in the front end again.

Hurrah, we have the optgroups! You have to take care to put the start and end values correct, else, results may vary!

I hope this little snippet helped you to achieve a simple but missing element in Gravity Forms! I assume their newer versions have ‘optgroup’ available. Anyways, if you’re using an older version, this should come in handy for you!

Peace

First, Wish you all a Happy New Year!
Now lets get down to the nerd stuff!
This is a very commonly faced problem by many WP devs. When logged in as a user with a role that is allowed to create / edit posts such as Author, Editor, Contributor or a custom role with the ‘edit_posts’ capability, the posts list on the ‘Posts’ page in the back-end shows all the published posts, even those by other users. The current user can see and edit his own posts, which is fine, but can see user’s posts which seems to be killing the sense of privacy in a multi-user system and is undesired by many developers. Doesn’t it look more secure and sophisticated when the posts list shows only the current users posts? In fact in a system where users are given accounts and privileges to create / edit posts, this fact is very important that they get to see only their work and not others. Also, it will reduce the posts list!

Unfortunately this is not possible with ‘edit_posts’ capability, as it displays all the published posts, and hence this hack can be used.

(more…)

The title is pretty loud and clear, we are going to see how to add new items or links to the Admin Bar. Now it does say WP 3.3, but according to the core file, this method should work well backwards up to WP 3.1.0. I believe as you reached here, you meet the following prerequisites:

• WP Action Hooks: Just what, where and how about WP Action Hooks is enough

(Do I need to add ‘You should know WordPress and PHP’ as a prerequisite?)

Okay, time to add stuff to your WP Admin Bar. Like they say ‘An image speaks a thousand words’, I’ve put images which will help you better than my blabber!
(more…)

Widgets make a WP theme’s sidebar alive. Small but important pieces of info which shouldn’t be restricted to a single page, can be put into a widget and made available on all the pages through the sidebar. But sometimes you might want to show a widget only on specific pages or page. One would code multiple sidebars and call them according to the pages, by adding different widgets to them or simply use a plugin to do this. But you don’t need to code multiple sidebars, just follow this simple piece of code, and you’ll know how to show/hide widgets according to the pages without using a plugin.

Obviously, you should know the following before you read further:
1. WP – Yeah, of course But more on the developer level.
2. WordPress Filters – What, Why, How, When?
3. Firebug powered FireFox – Stop developing websites if you don’t know what Firebug is !

You reached here? Kewl! Let’s get to work…

Consider the following use case – We don’t want to show the default ‘Archives’ widget on the home page of our site.
(more…)