google cdn

Load jquery library from google CDN in wordpress

Add this code on wordpress theme functions.php to deregister the urgent jquery and load jquery library from google.

function load_cdn_jquery() {

    // only use this method is we're not in wp-admin
    if (!is_admin()) {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');

        // discover the correct protocol to use
        $protocol='http:';
        if($_SERVER['HTTPS']=='on') {
            $protocol='https:';
        }

        // register the Google CDN version
        wp_register_script('jquery', $protocol.'//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.5.2');

        // add it back into the queue
        wp_enqueue_script('jquery');
			
		
    }

}

add_action('template_redirect', 'load_cdn_jquery');

Removing extra p and line breaks from shortcodes in WordPress

Some time shortcodes add some some extra <p> and <br /> after of before post.This is happend because of the wpautop filter.

You can easily prevent this by changing the execution priority of wpautop filter.

Simply use this code on your theme functions.php

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

New Code to Display Latest Tweets

[highlight]The code below no longer works as-is with the Twitter API update to 1.1 as of 2013-06-11.Here’s a PHP way to interact with the new Twitter API.[/highlight]

Twitter recently deprecated the code that we using to display latest tweets

<div id="twitter_update_list"></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/maidul.json?callback=twitterCallback2&count=1"></script>

So the above code will not work any more.
We have to use this updated code to get latest tweet

<div id="twitter_update_list"></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?count=1&exclude_replies=true&screen_name=maidul&callback=twitterCallback2"></script>

Remove Width and Height Attributes from wordpress content area

When you upload images using WordPress image uploader and insert it into your post/page, it will include the image width and height attribute in the tag.if you want to remove this automatic image width and height attribute from image, you can add this code to you functions.php

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
 
function remove_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Credit

Also there is a css solution for you also

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

Credit

HTML5 Input Type Month

HTML5 introduce new Input Type Month.This month type allows users to select a month and year.It will just select the month and year with no time zone.
You can call this Input Type Month using input type="month" on your input field.

Currently the latest version of Chrome, Opera and Safari browser supporting this.
 
 
 

<form action="#">
Month and Year: <input type="month" name="month_year" />
<input type="submit" />
</form>

If you are using any of this above browser then you are lucky to see it on action

Month and Year:

Or it may look like the screenshot below

html5 datetime

HTML5 Input Type datetime

HTML5 Input Type datetime is just like Input Type Date except it will allow visitor to select a date and time (with time zone).

You can call this datetime picker using input type="datetime" on your input field.This will certainly reduce your development time so need nasty Javascript code. Read more

HTML5 Input Type Email

A typical email address structure is [email protected]
As you can never trust your website user so you have to check the email id when user submit the form.
To solve this, HTML5 came with a news input type email.
The syntax is as basic as a text input you just have to use type="email".

Some advantage of using this new Email input type is:

  • This input field will be automatically validated when submitted.
  • On mobile device like iPhone or on Android will display a keyboard with the @ symbol provided on the primary screen

Syntax for this Input Type:

<input type="email" name="usremail" />
html5 input date

HTML5 Input Type Date

HTML5 Input Type Date will allows the user to select a date.
Previously this is done by Javascript date picker.
To make you life easier you can now call this date picker by simply using this
type="date" on your input field.

May be looks like this way :

<input type="date" name="birthday" />

Currently the latest version of Chrome, Opera and Safari browser supporting this.

If you are using any of this above browser then you are lucky to see it on action

Date Picker:

The code i used abode is:

<form action="#">
Date Picker: <input type="date" name="bday" />
<input type="submit" />
</form>

Or it may look like the screenshot below

html5 input date

color Input Type

HTML5 Input Type Color

You can get color input box in html5 with this attribute type="color".
With this new html5 Input Type Color, you no longer need a complex Javascript color picker.

Not all major browsers support all the new input types. Only latest version of Chrome and Opera support this.
If the browser are not supported, they will behave as regular text fields.

Select your color: <input type="color" name="favcolor" />

color Input Type

What is jQuery Mobile

jQuery Mobile is a HTML5 based user interface system for all popular mobile device platforms.It built on the rock-solid jQuery and jQuery UI foundation.
jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.
See the full list here.
Read more