Developers are happy as they have got an opportunity for a little branding. Our creative heads from rtCamp too got down to design the banners. You can see them here (For Bloggertowp redirection plugin and rtSocial Plugin)

How to change the header image:

You can also customize your plugin custom headers, as it’s a pretty simple process. All you need is to follow the steps below:

(this tutorial was written while developing the header image for our BloggertoWordPress Redirection Plugin)

Step 1: Design  a 772×250 pixel jpeg or png image. (No animated GIFs)

Step 2: Adding it to plugin’s SVN Directory:

• Create a directory in your system: mkdir b2w-plugin
• Checkout the code from WordPress plugin Directory:

svn co http://plugins.svn.wordpress.org/blogger-to-wordpress-redirection/ b2w-plugin

• Move it inside the directory: cd b2w-plugin
• Create one more folder into it. : svn mkdir assets
• Move inside that folder. : cd assets
• Store the Image which you want to display for your plugin inside assets folder.
• Use this command: svn add *
• Now Commit the code from your system to WordPress plugin directory : svn ci -m “Added Banner”.
• It will ask you for the svn username and password. Give it the proper authentication and you are done with the new banner updates for your plugin.

So, lets start getting creative and write your plugin links in the comment area for other readers to see.

-- This Post Add Custom Headers to your WordPress.org plugins is Published on Devils Workshop .

We decided to catch up with Gaurav Singh who headed the organizing committee of WordCamp Jabalpur 2011 and ask him questions on how to go about organizing a WordCamp.

Q. How did the idea of having a WordCamp in Jabalpur come into being? Who were in your group and helped out in organizing it.

I was introduced to WordCamp by my friend Aniket Pant when I was doing internship at Delhi Metro Rail Corporation in June this year. We were fascinated by the idea to organize WordCamps in our cities (Goa and Jabalpur) and applied for it. Unfortunately he was not granted permission and I managed to succeed.
After getting permission, I got warm support from my juniors in college, namely Roopal, Ankit and Apoorv. They were the real organizers whose efforts made this a success.

Q: Jabalpur is not a metro in India, what had an disadvantage or an advantage?

Jabalpur not being a metro in early days felt like a big disadvantage as most of the tech guys and companies are based out of cities like Pune, Hyderabad and Bangalore. In beginning it seemed really hard to get some sponsors from Indian companies, who were not ready to support because it was organized in a tier-2 city. Some speakers had to cancel their slot because of 2-3 days long journey and non availability of tickets.

On a brighter side, we were able so cut down costs, as a tier-2 city is relatively cheaper when compared to metros. This made us save on infrastructure cost like venue charges, bandwidth(donated by BSNL at 1Gbps) and other such items. Above all, we are happy that we were able to spread WordPress and open source in a city which is not too involved in web development. WordCamp was covered in the local Hindi daily(Dainik Bhaskar) for 5 consecutive days. Now I get calls from people who want to shift their HTML sites to WordPress. I consider this to be a big achievement.

Q: Were you all WordPress developers or just enthusiats?

I am a WordPress freelancer since 3 years and have my little contribution to WordPress community as well. Other organizers are WP enthusiasts and now trying to get more into it since WordCamp.

Q: What was your single biggest challenge in arranging a WordCamp?

The single biggest challenge was to convince tech guys from metros to travel some 500-1000 km to join us for WordCamp. Most of them were professionals and had to take leave from their day job to reach here. It was awesome meeting them all and would like to thank them for being here during WordCamp.

Q: Jabalpur being a smaller city, do you think more WordPress fans from other smaller cities would be inspired?

Yes, it was managed totally by undergraduate students. We can hope to see more such events coming up in future. I had a e-mail conversation with Andrea, an Automattic employee who managed WordCamps across globe, told me that applications from India have increased exponentially since WordCamp Jabalpur.

Q: Your advice to anyone looking to organize a WordCamp in India and tell us about any India specific challenges?

I would suggest people, never start exporting speakers from outside your city. First look in the local WordPress group and see if someone is interested in being a speaker. Also as WordPress is not a very well known topic in most of Indian colleges, I would suggest offer some discount for students as they are the backbone of all tech developments in future.
The biggest India specific challenge is lack of WordPress community. We don’t have local WordPress meets and also developers are not on a common mail group for better discussions. If possible, try to form a community and keep that strong even after WordCamp.

Q. I was struck but the fact that WordCamp Jabalpur was held very close to Diwali. Considering a lot of bloggers and WordPress enthusiasts are college students, did having it during vacation time help or hinder the camp.

The weekend we choose WordCamp was the only feasible date from our side. A weekend before that meant we had little time for preparation and a weekend after meant no tickets for most of last-minute planners because of the Diwali rush. However the dates in end proved to be good for us as most participants being students, had this even at the start of festive season just before vacations in colleges.

Q. Finally who helped you organize WordCamp Jabalpur 2011?

The names of organizers and volunteers are Roopal Jain, Ankit Chansoria, Apoorv Anand, Arya Bhasin, Neha Nupoor, Ambar Khan, Kautuk Kashyap, Akaar.

-- This Post Gaurav Singh on Organizing WordCamp Jabalpur 2011 is Published on Devils Workshop .

This slider requires the latest release of jQuery and functional knowledge of jQuery, HTML and CSS

So let’s start the implementation

Step 1 : Include the JQuery Library

First, you have to include the JQuery library between ‘<head>’ and ‘</head>’ tags of your html page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Step 2 : Add HTML Code

Add HTML Code, this is the source code of our sample:

<div class="image-container">
 <a title="Devils Workshop" href="http://devilsworkshop.org/" target="_blank">
  <span class="image-caption">image title</span>
  <span class="image-content"><img title="custom title" alt="custom alt" class="attachment-rt-gallery" src="http://path-to-image.jpg" /></span>
 </a>
</div>

Step 3 : Add Style/CSS code

Add CSS Code in your style sheet file, this is the source code of our sample:

.image-container {
  border: 1px solid #CCCCCC;
  float: left;
  height: 180px;
  margin: 0 25px 20px 0;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  width: 300px;
}

.image-container a {
  color: #66A83E;
  display: block;
  font-size: 18px;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.image-container a span.image-caption {
  display: table-cell;
  height: 180px;
  text-align: center;
  vertical-align: middle;
  width: 300px;
}

.image-container a span.image-content {
  height: 180px;
  left: 0;
  position: absolute;
  top: 0;
  width: 300px;
  z-index: 5;
}

.image-container a span.image-content img {
  border: medium none;
  margin: 0;
  padding: 0;
}

Step 4 : Add jQuery Code

You have to include the following jQuery code to work the image slider. To do so, embed it within <script type=”text/javascript”> /* Put the Code given below */ </script>, or even better, put it in a separate .js file.

jQuery( '.image-container' ).hover(
    function() { jQuery( '.image-content', this ).stop().animate( { left : '300px' }, { queue : false, duration : 500 } ); },
    function() { jQuery( '.image-content', this ).stop().animate( { left : '0px' }, { queue : false, duration : 500 } ); }
);

Screenshot

Hope this helps and saves your time, do drop in your opinions and comments below.

-- This Post Create Portfolio with Image Sliding Effect with jQuery is Published on Devils Workshop .

So what are programming languages and how did they evolve? How have they affected the programming world?  Here is an infographic from Rackspace which shows how programming languages have evolved over the years.

Thanks to Himadri Dimri for the tip. Do drop in your comments.

Related: Microsoft Vs Apple: History of Computer Giants

-- This Post [Infographic] Quick Look at Programming Languages! is Published on Devils Workshop .

There are situations when a developer needs to set equal height and width to child div’s that contain dynamic content. I came across such a situation, in which I had to place more than one widget in a single horizontal row. If I applied static heights and widths to the divs, there was a possibility of breaking the div after a certain number of widgets. To overcome this situation, I came up with a solution using jQuery wherein the divs which contain these widgets will get equal heights and widths depending on the size of the content.

This function automatically calculates the size of the content that is going to be inserted into the div, and applies the height of the div whose height is largest from all the other divs. The width of parent div is divided by the number of widgets and then applied to each widget.

Example:

Assume we have a parent div “#sidebar_1” of width 960px. I insert three divs into parent div of variable height and width. Using the below function, each widget will be applied with the width that is obtained after dividing the parent div from the number of widgets (960/3). Each widget’s height is calculated and the greatest height is applied to all the widgets.

Here is my html code,

Here is my CSS which I applied,

#sidebar_1 { width: 960px; overflow: hidden; }
.child1, .child2, .child3 {
border-right: 1px solid #EDEDED;
float: left;
overflow: hidden;
padding: 5px 10px;  }

jQuery Function to dynamically apply equal height and width

// to div's present in a parent div
function rt_equalHeightWidth( group ) {

// Get parent div width
    var rt_group_width = group.width();

// Get child div's
    var rt_group_child = group.children();

// Get size of child div present in the parent div
    var rt_group_child_size = group.children().size();

// Remove left padding from the first child div
    rt_group_child.first().css( { 'padding-left': '0' } );

// Remove right padding and right border from the last child div
    rt_group_child.last().css( { 'border-right': '0', 'padding-right': '0' } );

// Function to apply equal width for all child div's
        rt_group_child.each( function() {
// Calculate width for each child div
            var rt_group_child_width = rt_group_width / rt_group_child_size;

// Count extra padding and border width
            var rt_extra_width = parseInt( jQuery( this ).css( 'padding-left' ) ) + parseInt( jQuery( this ).css( 'padding-right'  ) ) + parseInt( jQuery( this ).css( 'border-right-width' )+ rt_group_child_size );

// Remove extra padding and border width from width
            var rt_group_child_actual_width = rt_group_child_width - rt_extra_width;

// Apply actual width to each child div
            jQuery( this ).css( { 'width' : rt_group_child_actual_width + 'px' } );
        } );

// Equal height for all child div's
        var rt_height = 0;

// Function to apply equal height for all child div's using jQuery each
        rt_group_child.each( function() {

// Get height for each widget
            var thisHeight = jQuery( this ).height();

// Get height for widget and apply equal height's to all widget
            if ( thisHeight > rt_height ) { rt_height = thisHeight; }
        } );
        rt_group_child.height( rt_height );
}

// Apply parent selector by replacing '#sidebar_1' selector
rt_equalHeightWidth( jQuery( '#sidebar_1' ) );

Here are the resultant screenshots of div’s where the above code is used to apply equal height and width.

Besides sidebar widgets the above code can be used for any div’s that has dynamic content, and you want them to have equal height and width. You just need to apply parent selector by replacing ‘#sidebar_1’ selector.

Hope this helps and saves your time, do drop in your opinions and comments below.

-- This Post Equal Height and Width for WordPress Widgets Using JQuery is Published on Devils Workshop .

#1. GoogleCode

The best place to keep your code is to put on the most trusted internet brand. Google Code not only hosts your code source but also provides various resources to you. Here you can find API and toolkits for various streams including the open source programs. It has a feature called code playground where, live online coding can be done and output can be seen. Google code is good platform for developers and for project hosting.

#2. Sourceforge

An open source code hosting site, here you can easily upload your code and downloads other code of your interest. The most popular code hosting site has suffered from many problem too. It is good site for getting open source software code. There is a high number of downloads of code through it daily.

#3. Codeplex

The codeplex is hosted by Microsoft but is not under it control. This is also a legitimate site for hosting your code. It is best when came for the .net projects. You can create, search,modify,download and uploads various projects here  with simplicity.  It too is an open source web host. The rawr is one of it best feature.

#4. Github

The Github provides the option of hosting the code as public or private. They took $7 per month for the private hosting. It supports for the multiple team management make it more versatile. Here you will able to plan your code and price it as well.

#5. Launchpad

The Launchpad is developed and maintained by the same company which supports Ubuntu  Canonical Ltd. This as is open source and code hosting is done by so-called Bazaar. Answer tracking  and mailing list helps the member interaction. It too supports for the translation as well.

Try out these sites which host code and do drop in your comments if you have more services to add to the list.

-- This Post [List] 5 Best Sites for Hosting Code Online is Published on Devils Workshop .

For example, in menu you have ‘sample ‘ category item. You have to add class to this item if your single post is of ‘sample’ category or its categories have parent category as  ‘sample’. You can easily add class by using ‘nav_menu_css_class’ filter.

add_filter(‘nav_menu_css_class’ , ‘rt_nav_special_class’ , 10 , 2);

‘nav_menu_css_class’ is name of the filter to hook our function  ‘rt_nav_special_class’.

10 is the priority of the function and 2 is the number of arguments the function accepts. Now you may write your condition in ‘rt_nav_special_class’ to add class to menu item.

function rt_nav_special_class($classes, $item){
     if(your condition){ //example: you can check value of $item to decide something...
             $classes[] = “special”;
     }
     return $classes;
}

rt_nav_special_class() accepts two arguments $classes and $item. $classes is an array contains class name already assigned by wp_nav_menu. We can add our classes in this array. I am added ‘special’ as class name. $item is current nav menu item to which we are adding a class.

If you var_dump this $item you will get all information about the current nav menu item. Using this $item you can any condition you want. Below is screen shot of our ‘special’ class in nav menu item in Firebug.

I hope you get what I explained to you. If you have any queries or suggestions do write in your comments.

-- This Post Add custom CSS classes to wp_nav_menu’s HTML output using WordPress filters is Published on Devils Workshop .

Many a times, while cleaning up our repositories, we end up deleting the wrong files and/or directories. If a top-level directory gets deleted accidentally, one usually starts sweating!

The simplest command to restore/revert deleted file/directory in SVN is:

svn cp http://svn.example.com/path/to/deleted/dir/@REVNUM http://svn.example.com/path/to/deleted/dir/

In the above command,

• cp is shorthand for copy command
• http://svn.example.com/ is the location of SVN-repo
• /path/to/deleted/dir/ is actual path of file or directory to be restored (including filename/directory-name)
• @REVNUM is the old revision number in which that file/directory was present last-time

Note that SVN paths for source and destination are same in such copy commands!

Example: Below is an example usage

svn cp http://svn.example.com/wordpress/themes/@286 http://svn.example.com/wordpress/themes/

Alternative Syntax:

If for some reason above command-syntax doesn’t work, try  alternative syntax as below.

svn cp -r REVNUM http://svn.example.com/path/to/deleted/dir/ http://svn.example.com/path/to/deleted/dir/

FAQs

Q. How to find old REVNUM i.e. revision number?

There are many ways. The simplest one is, if you have noticed the accidental delete quickly enough, notice the current version number and try using a number smaller than one!

Alternatively, you can use SVN browser, just Google for one. If you are using NetBeans or any other nice IDE for development, try using for built-in SVN browser/tool in that IDE.

Q. Why don’t we just use ‘revert’ command in SVN?

‘revert’ command in SVN, rolls back local changes on local working copy only! Though I wish it should have been designed to roll-back changes in remote copies as well.

This unexpected behavior from revert command is one of reason why people starts sweating then they delete a folder in SVN accidentally.

Let me remind you, you can never loose data in SVN itself. So be calm and try some other article from Google search, just in case this doesn’t work for you!

-- This Post [SVN] Simplest Way To Restore (Revert) Deleted Files/Directories is Published on Devils Workshop .

While using the Facebook like button on your blog with your standard layout, when you click the ‘like’ button adjacent to the post, you have to login to your Facebook account and you also have to add a comment along with it.

It is also accompanied by a small pop-up box as shown in the screen shot below making your design look weird. If you don’t want to display such a pop-up box, look for the solution below .

This solution does not work for the XFBML version of the button. Only if you are using the iframe version of the button with the standard layout, you can use this method.

To add the FaceBook like button on your site go to:

http://developers.facebook.com/docs/reference/plugins/like.

When you are customizing the Facebook ’like’ button, keep the layout ‘standard’ and set the width of the button less than 400px.  If you keep the width more than 399px, the Add Comment link will be displayed.

This is how you can easily disable the Add comment feature from FaceBook the like button. If you have any queries I will try my best to give you a solution

-- This Post How To Disable ‘Add Comment’ feature from Facebook like button is Published on Devils Workshop .

The logo seems to portray solidity and trust with its colors and format.

The HTML 5 phenomenon has really caught the imagination of developers all over the world mainly because of its most ardent supporter. That supporter is called Google and Google is betting big on HTML 5.

This logo being displayed by websites and developer community in general will help HTML 5 become a standard that is quickly recognized.

W3C HTML Logo site is also distributing T-Shirts and free HTML 5 logo stickers.

What do you think of the HTML 5 logo? Do drop in your comments.

Link: W3C HTML 5 Logo

-- This Post W3C gives HTML 5 an official logo is Published on Devils Workshop .