Floating sidebar for twentythirteen

April 28, 2013javascript, wordpressfloating-sidebar, sidebar, twentythirteenChandan

The javascript code to make the sidebar float and stick to screen as you scroll down. This code is specific to twentythirteen wordpress theme and most probably won’t work with any other theme.

I didn’t like it when the sidebar area goes blank as i scroll down the page. The content in the main content area(towards left) is more than the content(widgets) in sidebar(towards right) so as one scrolls down the page, the sidebar area becomes empty.

The following javascript does the trick. As you scroll down the page and scroll past the bottom of sidebar, the sidebar sticks to the bottom right of the page. You keep going down and it stays there. And when you scroll up to a sufficient height, it again acquires its normal position. The script also prevents sidebar from overlapping with ‘header’ and ‘footer’ areas.

Any demo ? : yes, this very page(or any other page on this website) is a live demo of the script. Try scolling!! Its more apparent on longer pages like home page.
This script results in nice dirty trick on this website. On a fresh page reload, you don’t see ads in the sidebar becuase that widget at the end of the sidebar and becomes visible only when you scroll down. And once you scroll down, only those ads are visible, and you can’t get rid of them ..

Anyway so here’s the javascript, you can save it in any of the existing javascript of your theme or save it as a new file and enqueue the file properly:

/*
http://webdeveloperswall.com/javascript/floating-sidebar-for-twentythirteen
*/
var jq=jQuery.noConflict();
var wdw_fs_status = "unaltered";
jq(window).load(function(){

    //if there is a sidebar, in the first place
    if( jq( "#secondary.sidebar-container" ).length == 0 ){
        return false;
    }

    if( jq(window).width() < 1000 ){
        //in twentythirteen if the browser width is less than 1000px, 
        //the page becomes one columned and sidebar goes down, so no need to do anything
        return false;
    }

    jQuery(document).scroll(function(){
        /*
        1. if user has scrolled down more than the total effective height of the sidebar
        2. make the sidebar fixed position with bottom as 0
        3. calculate the left postion by calucalting sidebar's offset.left
        4. if the scroll is decreased to less than the total effective height of sidebar
            revert it back to its original condition
        */
        var sidebar_pl = jq( "#secondary.sidebar-container .widget-area" );
        if( jq(document).scrollTop() > jq(sidebar_pl).outerHeight() ){
            if( wdw_fs_status=="unaltered" ){
                jq(sidebar_pl).css({
                    'position' : 'fixed',
                    'left'  : jq(sidebar_pl).offset().left + 'px'
                });
                wdw_fs_status = "altered";    
            }
            
            //the sidebar shouldn't overlapp with footer, stop it just before footer
            var content_bottom_pos = jq("#primary").outerHeight();
            
            if( jq(document).scrollTop() > content_bottom_pos ){
                //we've now reached till footer, lets stop the sidebar
                var bottom = jq(document).scrollTop() - content_bottom_pos;
                var top = content_bottom_pos - jq(sidebar_pl).outerHeight();
                jq(sidebar_pl).css({
                    'position' : 'absolute',
                    'top' : top + 'px',
                    'bottom':'auto'
                });
                wdw_fs_status = "altered";
            }
            else{
                jq(sidebar_pl).css({
                    'position' : 'fixed',
                    'bottom' : '0',
                    'top':'auto'
                });
            }

        }
        else{
            if( wdw_fs_status=="altered" ){
                jq(sidebar_pl).css({
                    'position' : 'relative',
                    'bottom' : 'auto',
                    'left'  : 'auto'
                });
                wdw_fs_status = "unaltered";
            }
        }
    });

});

http://webdeveloperswall.com/javascript/floating-sidebar-for-twentythirteen

var jq=jQuery.noConflict();

var wdw_fs_status = "unaltered";

jq(window).load(function(){

//if there is a sidebar, in the first place

if( jq( "#secondary.sidebar-container" ).length == 0 ){

return false;

}

if( jq(window).width() < 1000 ){

//in twentythirteen if the browser width is less than 1000px,

//the page becomes one columned and sidebar goes down, so no need to do anything

return false;

}

jQuery(document).scroll(function(){

1. if user has scrolled down more than the total effective height of the sidebar

2. make the sidebar fixed position with bottom as 0

3. calculate the left postion by calucalting sidebar's offset.left

4. if the scroll is decreased to less than the total effective height of sidebar

revert it back to its original condition

var sidebar_pl = jq( "#secondary.sidebar-container .widget-area" );

if( jq(document).scrollTop() > jq(sidebar_pl).outerHeight() ){

if( wdw_fs_status=="unaltered" ){

jq(sidebar_pl).css({

'position' : 'fixed',

'left' : jq(sidebar_pl).offset().left + 'px'

});

wdw_fs_status = "altered";

}

//the sidebar shouldn't overlapp with footer, stop it just before footer

var content_bottom_pos = jq("#primary").outerHeight();

if( jq(document).scrollTop() > content_bottom_pos ){

//we've now reached till footer, lets stop the sidebar

var bottom = jq(document).scrollTop() - content_bottom_pos;

var top = content_bottom_pos - jq(sidebar_pl).outerHeight();

jq(sidebar_pl).css({

'position' : 'absolute',

'top' : top + 'px',

'bottom':'auto'

});

wdw_fs_status = "altered";

}

else{

jq(sidebar_pl).css({

'position' : 'fixed',

'bottom' : '0',

'top':'auto'

});

}

else{

if( wdw_fs_status=="altered" ){

jq(sidebar_pl).css({

'position' : 'relative',

'bottom' : 'auto',

'left' : 'auto'

});

wdw_fs_status = "unaltered";

}

});

That’s it here. I didn’t bother to check it in IE! so be warned

Load more activities on scroll

February 15, 2013BuddypressBuddypress, Buddypress activitiesChandan

Modify your buddypress theme to load more activity posts when user scrolls down!
All you need to do is to add the following javascript in any of your javascript files (and make sure that javascript file is included! lol). The script loads more content by ajax and appends at the bottom of the page. The server side code to process the ajax request is already there in buddypress. God bless those guys at automattic!

/**
 * automatically load activities when user scrolls down - like facebook
 * @author: @webdwall - http://webdeveloperswall.com/buddypress/load-more-activites-on-scroll
**/
jQuery(window).load(function(){
	/*
	 * 1. bind event on page scroll
	 * 2. check if user has reched near to the bottom of activity stream( ScrollTop and pageheight etc..)
	 * 3. load the new content
	 * 4. update the pageheight etc..
	*/
	var e_a_al_inAction = false;
	/* first we will load new content when user has scrolled down 80% of the total height.
	 * next time when user has scrolled 85%.. next time 90% and so on till 95%
	 * Why the extra pain? ... Save server resources :)
	*/
	var e_a_al_factor = 80;
	
	//80% of the height of the document, offset scroll height to start loading new content
	var e_a_al_offset = (jQuery(document).height())*( 0.8 );
	
	jQuery(document).scroll(function(){
		if(jQuery(document).scrollTop() > e_a_al_offset && e_a_al_inAction == false){
			e_a_al_inAction = true;

			jQuery("#content li.load-more").addClass('loading');

			if ( null == jQuery.cookie('bp-activity-oldestpage') )
				jQuery.cookie('bp-activity-oldestpage', 1, {
					path: '/'
				} );

			var oldest_page = ( jQuery.cookie('bp-activity-oldestpage') * 1 ) + 1;

			jQuery.post( ajaxurl, {
				action: 'activity_get_older_updates',
				'cookie': encodeURIComponent(document.cookie),
				'page': oldest_page
			},
			function(response)
			{
				jQuery("#content li.load-more").removeClass('loading');
				jQuery.cookie( 'bp-activity-oldestpage', oldest_page, {
					path: '/'
				} );
				jQuery("#content li.load-more").replaceWith(response.contents);
				
				//reset and setup everything for next load request
				e_a_al_inAction = false;
				e_a_al_factor += 5;
				if( e_a_al_factor>95 ){ e_a_al_factor=95; }
				e_a_al_offset = (jQuery(document).height())*( e_a_al_factor/100 );
				
			}, 'json' );

			return false;
			
		}
	});
});

/**

* automatically load activities when user scrolls down - like facebook

* @author: @webdwall - http://webdeveloperswall.com/buddypress/load-more-activites-on-scroll

**/

jQuery(window).load(function(){

* 1. bind event on page scroll

* 2. check if user has reched near to the bottom of activity stream( ScrollTop and pageheight etc..)

* 3. load the new content

* 4. update the pageheight etc..

var e_a_al_inAction = false;

/* first we will load new content when user has scrolled down 80% of the total height.

* next time when user has scrolled 85%.. next time 90% and so on till 95%

* Why the extra pain? ... Save server resources :)

var e_a_al_factor = 80;

//80% of the height of the document, offset scroll height to start loading new content

var e_a_al_offset = (jQuery(document).height())*( 0.8 );

jQuery(document).scroll(function(){

if(jQuery(document).scrollTop() > e_a_al_offset && e_a_al_inAction == false){

e_a_al_inAction = true;

jQuery("#content li.load-more").addClass('loading');

if ( null == jQuery.cookie('bp-activity-oldestpage') )

jQuery.cookie('bp-activity-oldestpage', 1, {

path: '/'

} );

var oldest_page = ( jQuery.cookie('bp-activity-oldestpage') * 1 ) + 1;

jQuery.post( ajaxurl, {

action: 'activity_get_older_updates',

'cookie': encodeURIComponent(document.cookie),

'page': oldest_page

function(response)

{

jQuery("#content li.load-more").removeClass('loading');

jQuery.cookie( 'bp-activity-oldestpage', oldest_page, {

path: '/'

} );

jQuery("#content li.load-more").replaceWith(response.contents);

//reset and setup everything for next load request

e_a_al_inAction = false;

e_a_al_factor += 5;

if( e_a_al_factor>95 ){ e_a_al_factor=95; }

e_a_al_offset = (jQuery(document).height())*( e_a_al_factor/100 );

}, 'json' );

return false;

}

});

That’s it here.

Order by date in post meta

February 14, 2013wordpresswordpressChandan

Here’s a quick tip to order posts by a date stored in custom fields (postmeta).

The problem

I have a custom field called ‘event-date’ in which, obviously, a date value is stored. Now i want all the posts sorted by that custom field value. How do i do it?

To order posts by custom field, we’d do something like:

<?php
query_posts(array(
	'meta_key'=> 'event_date',
	'orderby'=> 'meta_value',
	'order' => 'DESC'
));
?>

<?php

query_posts(array(

'meta_key'=> 'event_date',

'orderby'=> 'meta_value',

'order' => 'DESC'

));

But this won’t work since the value of the postmeta is taken as string and sorted accordingly, which can given unexpected results.

The solution

Add the following code in functions.php of your theme (or at any appropriate place, if you are writing a plugin):

<?php 
/* sorts the post based on a date value in custom fields 
 * check: http://webdeveloperswall.com/wordpress/order-by-date-in-post-meta
*/
function wdw_query_orderby_postmeta_date( $orderby ){
	$new_orderby = str_replace( "wp_postmeta.meta_value", "STR_TO_DATE(wp_postmeta.meta_value, '%m/%d/%Y')", $orderby );
	return $new_orderby;
}
?>

<?php

/* sorts the post based on a date value in custom fields

* check: http://webdeveloperswall.com/wordpress/order-by-date-in-post-meta

function wdw_query_orderby_postmeta_date( $orderby ){

$new_orderby = str_replace( "wp_postmeta.meta_value", "STR_TO_DATE(wp_postmeta.meta_value, '%m/%d/%Y')", $orderby );

return $new_orderby;

}

I’ve my date format as ‘mm/dd/yyyy’, if yours is something else, don’t forget to change ‘%m/%d/%Y’ above with a suitable value.

Next, our query_post code will remain the same, but we will add a filter just before this code:

<?php
//the filter to sort by date in custom field
add_filter( 'posts_orderby', 'wdw_query_orderby_postmeta_date', 10, 1);
query_posts(array(
	'meta_key'=> 'event_date',
	'orderby'=> 'meta_value',
	'order' => 'DESC'
));
...
...
...
//once done, dont forget to remove that filter
remove_filter( 'posts_orderby', 'wdw_query_orderby_postmeta_date', 10, 1);
?>

<?php

//the filter to sort by date in custom field

add_filter( 'posts_orderby', 'wdw_query_orderby_postmeta_date', 10, 1);

query_posts(array(

'meta_key'=> 'event_date',

'orderby'=> 'meta_value',

'order' => 'DESC'

));

...

//once done, dont forget to remove that filter

remove_filter( 'posts_orderby', 'wdw_query_orderby_postmeta_date', 10, 1);

Thats a quick, dirty way of getting it done!
That’s all here.

Buddypress remove email id from private messages

January 3, 2013SnippetsBuddypressChandan

Add the following code in functions.php of your theme

/*remove email addresses from private messages
http://webdeveloperswall.com/snippets/buddypress-remove-email-id-from-private-messages
*/
function wdw_remove_email_from_private_msg($message){
	$replacement = "[removed]";
	/*if you dont want any replacement text, replace the above line with 
		$replacement = ""; 
	*/
	return preg_replace("/[^@\s]*@[^@\s]*\.[^@\s]*/", $replacement, $message);
	/*the code is short and works in most cases but not full proof. Check http://www.linuxjournal.com/article/9585*/
}
add_filter('messages_message_content_before_save', 'wdw_remove_email_from_private_msg');
add_filter('messages_message_subject_before_save', 'wdw_remove_email_from_private_msg');

/*remove email addresses from private messages

http://webdeveloperswall.com/snippets/buddypress-remove-email-id-from-private-messages

function wdw_remove_email_from_private_msg($message){

$replacement = "[removed]";

/*if you dont want any replacement text, replace the above line with

$replacement = "";

return preg_replace("/[^@\s]*@[^@\s]*\.[^@\s]*/", $replacement, $message);

/*the code is short and works in most cases but not full proof. Check http://www.linuxjournal.com/article/9585*/

}

add_filter('messages_message_content_before_save', 'wdw_remove_email_from_private_msg');

add_filter('messages_message_subject_before_save', 'wdw_remove_email_from_private_msg');

It’ll remove all email id’s from message subject and content. While replying(ajax-no postback) the message is displayed to sender unaltered, but don’t panic, it actually is removed and receiver will never see the email id.

To avoid any complications, while copying the code first click on the below link which will appear once you hover over the code
copying code in crayon syntax higlighter

Crop image script

December 3, 2012php, wordpresswordpressChandan

So you have a wordpress website and you have a form where user enters data, you have given an ‘upload image’ option but you want the uploaded images to be cropped for proper display ?
Below is the code that might help you ~~crap~~ crop it.

<?php
/*
 * wdw_crop_img (http://webdeveloperswall.com/wordpress/crop-image-script)
 * crops the image to given width and height
 * Parameters :-
 * 	$image_url : string : absolute url to the image 
 * 	$width: int : desired width after cropping
 * 	$height : desired height after cropping
 * 	$upload_directory : name of the target directory (directoty inside wp-content>uploads folder)
 * Returns :- an array containing errors/success messages, new(cropped) file path and cropped file url
		returned array example:
			$msg['message'] will be either 'success' or 'error'
			$msg['path'] will be either blank (error) or something like c:\\path\to\wordpress\wp-content\uploads\myuploads\cropped_image.jpg
			$msg['url'] will be either blank (error) or something like http://yourdomain.com/wp-content/uploads/myuploads/cropped_image.jpg
 */
function wdw_crop_img($image_url, $i_width, $i_height, $upload_directory){
	$msg = array(
		'message'	=> '',
		'path'		=> '',
		'url'		=>''
	);
	
	$upl_dir = wp_upload_dir();
	//an array : $upload_directory[basedir] => C:\path\to\wordpress\wp-content\uploads 
	$upload_folder = $upl_dir['basedir']."/" . $upload_directory;
	$upload_url = $upl_dir['baseurl']."/" . $upload_directory;
	$new_name = "img_" .uniqid(). uniqid() . ".jpg";
	$filename = $upload_folder . "/" . $new_name;
	$fileurl = $upload_url . "/" . $new_name;
	
	$image = imagecreatefromstring(file_get_contents($image_url));

	$thumb_width = $i_width;
	$thumb_height = $i_height;

	$width = imagesx($image);
	$height = imagesy($image);

	$original_aspect = $width / $height;
	$thumb_aspect = $thumb_width / $thumb_height;

	if ( $original_aspect >= $thumb_aspect )
	{
	   // If image is wider than thumbnail (in aspect ratio sense)
	   $new_height = $thumb_height;
	   $new_width = $width / ($height / $thumb_height);
	}
	else
	{
	   // If the thumbnail is wider than the image
	   $new_width = $thumb_width;
	   $new_height = $height / ($width / $thumb_width);
	}

	$thumb = imagecreatetruecolor( $thumb_width, $thumb_height );
	try  {
		// Resize and crop
		imagecopyresampled($thumb,
						   $image,
						   0 - ($new_width - $thumb_width) / 2, // Center the image horizontally
						   0 - ($new_height - $thumb_height) / 2, // Center the image vertically
						   0, 0,
						   $new_width, $new_height,
						   $width, $height);
		imagejpeg($thumb, $filename, 80);
		$msg['message'] = 'success';
		$msg['url'] = $fileurl;
		$msg['path'] = $filename;
	}
	catch(Exception $e){
		$msg['message'] = 'error';
	}
	return $msg;
}
?>

<?php

* wdw_crop_img (http://webdeveloperswall.com/wordpress/crop-image-script)

* crops the image to given width and height

* Parameters :-

* $image_url : string : absolute url to the image

* $width: int : desired width after cropping

* $height : desired height after cropping

* $upload_directory : name of the target directory (directoty inside wp-content>uploads folder)

* Returns :- an array containing errors/success messages, new(cropped) file path and cropped file url

returned array example:

$msg['message'] will be either 'success' or 'error'

$msg['path'] will be either blank (error) or something like c:\\path\to\wordpress\wp-content\uploads\myuploads\cropped_image.jpg

$msg['url'] will be either blank (error) or something like http://yourdomain.com/wp-content/uploads/myuploads/cropped_image.jpg

function wdw_crop_img($image_url, $i_width, $i_height, $upload_directory){

$msg = array(

'message' => '',

'path' => '',

'url' =>''

);

$upl_dir = wp_upload_dir();

//an array : $upload_directory[basedir] => C:\path\to\wordpress\wp-content\uploads

$upload_folder = $upl_dir['basedir']."/" . $upload_directory;

$upload_url = $upl_dir['baseurl']."/" . $upload_directory;

$new_name = "img_" .uniqid(). uniqid() . ".jpg";

$filename = $upload_folder . "/" . $new_name;

$fileurl = $upload_url . "/" . $new_name;

$image = imagecreatefromstring(file_get_contents($image_url));

$thumb_width = $i_width;

$thumb_height = $i_height;

$width = imagesx($image);

$height = imagesy($image);

$original_aspect = $width / $height;

$thumb_aspect = $thumb_width / $thumb_height;

if ( $original_aspect >= $thumb_aspect )

{

// If image is wider than thumbnail (in aspect ratio sense)

$new_height = $thumb_height;

$new_width = $width / ($height / $thumb_height);

}

else

{

// If the thumbnail is wider than the image

$new_width = $thumb_width;

$new_height = $height / ($width / $thumb_width);

}

$thumb = imagecreatetruecolor( $thumb_width, $thumb_height );

try {

// Resize and crop

imagecopyresampled($thumb,

$image,

0 - ($new_width - $thumb_width) / 2, // Center the image horizontally

0 - ($new_height - $thumb_height) / 2, // Center the image vertically

0, 0,

$new_width, $new_height,

$width, $height);

imagejpeg($thumb, $filename, 80);

$msg['message'] = 'success';

$msg['url'] = $fileurl;

$msg['path'] = $filename;

}

catch(Exception $e){

$msg['message'] = 'error';

}

return $msg;

}

To avoid any complications, while copying the code first click on the below link
copying code in crayon syntax higlighter

which will appear once you hover over the code

How to use it

Just paste the above code in functions.php file of your active wordpress theme. Then call the function wdw_crop_img passing proper parameters.

The above function out of the box is ‘wordpress specific’ because line no 23 in the code makes use of wordpress core function to get to the uploads directory (check line no 23, 25, 26 in the code). But you can obviously modifyl those 3 lines to suit to your website’s directory structure and make it work on any non-wordpress php website.

Rest, read the comment section above function declaration to figure out about the parameters passed and output.

Drop in your comment if you find any problem.
That’s it in here. Hope you find it useful.

Generate youtube embed code from url

November 27, 2012phpyoutubeChandan

php Code to convert Youtube url into embed code. Pass in the youtube video url and generate the embed code to embed the youtube video on your website.

Without talking any more, here’s the php code:

<?php
/**
 * http://webdeveloperswall.com/php/generate-youtube-embed-code-from-url
**/
function youtubeEmbedFromUrl($youtube_url, $width, $height){
	$vid_id = extractUTubeVidId($youtube_url);
	return generateYoutubeEmbedCode($vid_id, $width, $height);
}

function extractUTubeVidId($url){
	/*
	* type1: http://www.youtube.com/watch?v=H1ImndT0fC8
	* type2: http://www.youtube.com/watch?v=4nrxbHyJp9k&feature=related
	* type3: http://youtu.be/H1ImndT0fC8
	*/
	$vid_id = "";
	$flag = false;
	if(isset($url) && !empty($url)){
		/*case1 and 2*/
		$parts = explode("?", $url);
		if(isset($parts) && !empty($parts) && is_array($parts) && count($parts)>1){
			$params = explode("&", $parts[1]);
			if(isset($params) && !empty($params) && is_array($params)){
				foreach($params as $param){
					$kv = explode("=", $param);
					if(isset($kv) && !empty($kv) && is_array($kv) && count($kv)>1){
						if($kv[0]=='v'){
							$vid_id = $kv[1];
							$flag = true;
							break;
						}
					}
				}
			}
		}
		
		/*case 3*/
		if(!$flag){
			$needle = "youtu.be/";
			$pos = null;
			$pos = strpos($url, $needle);
			if ($pos !== false) {
				$start = $pos + strlen($needle);
				$vid_id = substr($url, $start, 11);
				$flag = true;
			}
		}
	}
	return $vid_id;
}

function generateYoutubeEmbedCode($vid_id, $width, $height){
	$w = $width;
	$h = $height;
	$html = '<iframe width="'.$w.'" height="'.$h.'" src="http://www.youtube.com/embed/'.$vid_id.'?rel=0" frameborder="0" allowfullscreen></iframe>';
	return $html;
}

<?php

/**

* http://webdeveloperswall.com/php/generate-youtube-embed-code-from-url

**/

function youtubeEmbedFromUrl($youtube_url, $width, $height){

$vid_id = extractUTubeVidId($youtube_url);

return generateYoutubeEmbedCode($vid_id, $width, $height);

}

function extractUTubeVidId($url){

* type1: http://www.youtube.com/watch?v=H1ImndT0fC8

* type2: http://www.youtube.com/watch?v=4nrxbHyJp9k&feature=related

* type3: http://youtu.be/H1ImndT0fC8

$vid_id = "";

$flag = false;

if(isset($url) && !empty($url)){

/*case1 and 2*/

$parts = explode("?", $url);

if(isset($parts) && !empty($parts) && is_array($parts) && count($parts)>1){

$params = explode("&", $parts[1]);

if(isset($params) && !empty($params) && is_array($params)){

foreach($params as $param){

$kv = explode("=", $param);

if(isset($kv) && !empty($kv) && is_array($kv) && count($kv)>1){

if($kv[0]=='v'){

$vid_id = $kv[1];

$flag = true;

break;

}

/*case 3*/

if(!$flag){

$needle = "youtu.be/";

$pos = null;

$pos = strpos($url, $needle);

if ($pos !== false) {

$start = $pos + strlen($needle);

$vid_id = substr($url, $start, 11);

$flag = true;

}

return $vid_id;

}

function generateYoutubeEmbedCode($vid_id, $width, $height){

$w = $width;

$h = $height;

$html = '<iframe width="'.$w.'" height="'.$h.'" src="http://www.youtube.com/embed/'.$vid_id.'?rel=0" frameborder="0" allowfullscreen></iframe>';

return $html;

}

The main method youtubeEmbedFromUrl uses helper methods extractUTubeVidId (description here) and generateYoutubeEmbedCode

How to use:

Just call the method youtubeEmbedFromUrl with 3 parameters:

youtube_url : the url of the youtube video
width : desired width of the youtube player
height : desired height of the youtube player

e.g:

<?php
$embed_code = youtubeEmbedFromUrl("http://www.youtube.com/watch?v=9Jr6OtgiOIw", 400, 300);
echo $embed_code ;
?>

<?php

$embed_code = youtubeEmbedFromUrl("http://www.youtube.com/watch?v=9Jr6OtgiOIw", 400, 300);

echo $embed_code ;

That’s it here. Hope you find it useful.

Will soon update a c# version of the code

Get youtube video id from url

November 27, 2012phpyoutubeChandan

Extract you tube video id from youtube url. The following code retrieves the video id from youtube url.

It works with only 3 types of youtube url supplied:
Type1: http://www.youtube.com/watch?v=9Jr6OtgiOIw
Type2: http://www.youtube.com/watch?v=9Jr6OtgiOIw&feature=related
Type3: http://youtu.be/9Jr6OtgiOIw

type1 and 2 is acutally one and the same, only the extra paramters

The code:

<?php 
/**
 * http://webdeveloperswall.com/php/get-youtube-video-id-from-url
**/ 
function extractUTubeVidId($url){
	/*
	* type1: http://www.youtube.com/watch?v=9Jr6OtgiOIw
	* type2: http://www.youtube.com/watch?v=9Jr6OtgiOIw&feature=related
	* type3: http://youtu.be/9Jr6OtgiOIw
	*/
	$vid_id = "";
	$flag = false;
	if(isset($url) && !empty($url)){
		/*case1 and 2*/
		$parts = explode("?", $url);
		if(isset($parts) && !empty($parts) && is_array($parts) && count($parts)>1){
			$params = explode("&", $parts[1]);
			if(isset($params) && !empty($params) && is_array($params)){
				foreach($params as $param){
					$kv = explode("=", $param);
					if(isset($kv) && !empty($kv) && is_array($kv) && count($kv)>1){
						if($kv[0]=='v'){
							$vid_id = $kv[1];
							$flag = true;
							break;
						}
					}
				}
			}
		}
		
		/*case 3*/
		if(!$flag){
			$needle = "youtu.be/";
			$pos = null;
			$pos = strpos($url, $needle);
			if ($pos !== false) {
				$start = $pos + strlen($needle);
				$vid_id = substr($url, $start, 11);
				$flag = true;
			}
		}
	}
	return $vid_id;
}


?>

<?php

/**

* http://webdeveloperswall.com/php/get-youtube-video-id-from-url

**/

function extractUTubeVidId($url){

* type1: http://www.youtube.com/watch?v=9Jr6OtgiOIw

* type2: http://www.youtube.com/watch?v=9Jr6OtgiOIw&feature=related

* type3: http://youtu.be/9Jr6OtgiOIw

$vid_id = "";

$flag = false;

if(isset($url) && !empty($url)){

/*case1 and 2*/

$parts = explode("?", $url);

if(isset($parts) && !empty($parts) && is_array($parts) && count($parts)>1){

$params = explode("&", $parts[1]);

if(isset($params) && !empty($params) && is_array($params)){

foreach($params as $param){

$kv = explode("=", $param);

if(isset($kv) && !empty($kv) && is_array($kv) && count($kv)>1){

if($kv[0]=='v'){

$vid_id = $kv[1];

$flag = true;

break;

}

/*case 3*/

if(!$flag){

$needle = "youtu.be/";

$pos = null;

$pos = strpos($url, $needle);

if ($pos !== false) {

$start = $pos + strlen($needle);

$vid_id = substr($url, $start, 11);

$flag = true;

}

return $vid_id;

}

How to use:

call this function passing a youtube url as parameter:

<?php
$youtube_video_id = extractUTubeVidId("http://www.youtube.com/watch?v=9Jr6OtgiOIw");
?>

<?php

$youtube_video_id = extractUTubeVidId("http://www.youtube.com/watch?v=9Jr6OtgiOIw");

You can use it on your website: user enters youtube url, you pull out the video id, generate an embed code and embed the youtube video on your website.

That’s it here. Hope you find it useful.
You might as well like the code for generating youtube embed code

Will soon update a c# version of the code

Change wordpress registration email

November 27, 2012wordpresswordpressChandan

The following code allows you to change the default email that wordpress sends after user registers on the website. You can modiy the default email and add your own custom email message and email subject.

The code:

<?php
/** 
* http://webdeveloperswall.com/wordpress/change-wordpress-registration-email 
*Add filter for registration email subject and message
**/
add_filter('wp_mail','my_custom_registration_mail');

function my_custom_registration_mail($email) {
    if (isset ($email['subject']) && substr_count($email['subject'],'Your username and password')>0 ) {
	if (isset($email['message'])) {

		$messg = "Hello,\r\nWe have received your sign-up request on our website. Your details are as follows:\r\n \r\n";
		$messg .= $email['message'];
		$messg .= "You can now login at the link given.\r\n \r\nWe look forward to your active participation on our website. \r\n \r\nkind regds,\r\nWebMaster \r\nYourDomain.com";
		$email['message'] = $messg;
		$email['subject'] = "YourDomain.com - New Member Sign-up.";
	}
    }
    return ($email);
}
?>

<?php

/**

* http://webdeveloperswall.com/wordpress/change-wordpress-registration-email

*Add filter for registration email subject and message

**/

add_filter('wp_mail','my_custom_registration_mail');

function my_custom_registration_mail($email) {

if (isset ($email['subject']) && substr_count($email['subject'],'Your username and password')>0 ) {

if (isset($email['message'])) {

$messg = "Hello,\r\nWe have received your sign-up request on our website. Your details are as follows:\r\n \r\n";

$messg .= $email['message'];

$messg .= "You can now login at the link given.\r\n \r\nWe look forward to your active participation on our website. \r\n \r\nkind regds,\r\nWebMaster \r\nYourDomain.com";

$email['message'] = $messg;

$email['subject'] = "YourDomain.com - New Member Sign-up.";

}

return ($email);

}

What to do with the code ?
Just add the code inside functions.php file of your current theme. And dont forget to change ‘YourDomain.com’ to something useful

That’s it here. Hope you find it useful.

Custom styled checkboxes

November 18, 2012html-csshtml-cssChandan

Bored of the good old checkbox design?
Time for styling checkbox elements, giving custom design to checkboxes.

custom-styled-checkboxes
First of all, here’s the demo link

What are we doing?

Basically i want to replace this with this

So here’s one way(hack) to do it. Hide the default checkbox, instead use background images for the associated label. Use different images for checked/unchecked state of the checbox. We are not removing the checkboxes completely, those are there, just hidden by css with display:none. So clicking on the associated label does cause checking/unchecking of the checkbox, so its still available in forms post data, no issues there.

The HTML

standard checkbox html with labels, nothing fancy here

<ul class="customChList lstn">
	<li><input type="checkbox" value="1" id="chk1"/><label for="chk1">One - lorem psum </label></li>
	<li><input type="checkbox" value="2" id="chk2"/><label for="chk2">Two - lorem psum </label></li>
	<li><input type="checkbox" value="3" id="chk3"/><label for="chk3">Three - lorem psum </label></li>
	<li><input type="checkbox" value="4" id="chk4"/><label for="chk4">Four - lorem psum </label></li>
	<li><input type="checkbox" value="5" id="chk5"/><label for="chk5">Five - lorem psum </label></li>
</ul>

<li><input type="checkbox" value="1" id="chk1"/><label for="chk1">One - lorem psum </label></li>

<li><input type="checkbox" value="2" id="chk2"/><label for="chk2">Two - lorem psum </label></li>

<li><input type="checkbox" value="3" id="chk3"/><label for="chk3">Three - lorem psum </label></li>

<li><input type="checkbox" value="4" id="chk4"/><label for="chk4">Four - lorem psum </label></li>

<li><input type="checkbox" value="5" id="chk5"/><label for="chk5">Five - lorem psum </label></li>

</ul>

I’ve wrapped those checkboxes in ul li just for the purpose of applying one single css rule to all of them. You can use any way you want.

The CSS

Here’s the trick:
We’ll hide the checkboxes, toggle the background image of associated label with css and js. I’ve used this image . 3 states – normal, hover, checked.

.customChList li input[type='checkbox']{
	display:none;
}
.customChList li label{
	font-size: 18px;
	padding-left:35px;
	background: url(images/custom-checkbox.png) no-repeat;
}

.customChList li label:hover{
	background-position: 0px -32px;
}

.customChList li label.checked{
	background-position: 0px -64px;
}

.customChList li input[type='checkbox']{

display:none;

}

.customChList li label{

font-size: 18px;

padding-left:35px;

background: url(images/custom-checkbox.png) no-repeat;

}

.customChList li label:hover{

background-position: 0px -32px;

}

.customChList li label.checked{

background-position: 0px -64px;

}

A little javascript

Now when user clicks with the intention to check/uncheck the checkbox, we show it visually by adding/removing a css class of ‘checked’. So a simple change event:

$(document).ready(function(){
	$(".customChList input[type='checkbox']").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").removeClass('hover').addClass('checked');
		}
		else{
			$(this).next("label").removeClass('checked');
		}
	});
});

$(document).ready(function(){

$(".customChList input[type='checkbox']").change(function(){

if($(this).is(":checked")){

$(this).next("label").removeClass('hover').addClass('checked');

}

else{

$(this).next("label").removeClass('checked');

}

});

We can use css3 adjacent selector in place of the above javascript.

So instead of the above javascript, the following css will also work:

.customChList li input[type='checkbox']:checked ~ label{
	background-position: 0px -64px;
}

.customChList li input[type='checkbox']:checked ~ label{

background-position: 0px -64px;

}

This essentially does the same thing. But, as usual, it won’t work in IE, so lets just go with javascript.

That’s it in here. Hope you find it useful

Add target blank to user link in recent comments widget

October 26, 2012wordpresswordpressChandan

Open author link in new tab in wordpress default recent comments widget.

I just discovered it today itself on webdeveloeprswall. I’ve added a recent comments widget in my sidebar. The widget is a default wordpress widget, many of us use it. But when you click on the author link in the widget(sidebar) the commentor’s url (whatever he/she has provided) open in the same window!! Taking visitors away from your own website.

I immediately felt the need to add a target="_blank" attribute to those links. So here’s the small code snippet i came up with. Just add the below lines of code in your theme’s functions.php file:

<?php 
/**
 * http://webdeveloperswall.com/wordpress/add-target-blank-to-user-link-in-recent-comments-widget
**/
function add_blank_get_comment_author_link($link){
	$rep_count = 1;
	$new_ret = str_replace("<a", "<a target='_blank'", $link, $rep_count);
	return $new_ret;
}
add_filter('get_comment_author_link', 'add_blank_get_comment_author_link', 10, 2);
?>

<?php

/**

* http://webdeveloperswall.com/wordpress/add-target-blank-to-user-link-in-recent-comments-widget

**/

function add_blank_get_comment_author_link($link){

$rep_count = 1;

$new_ret = str_replace("<a", "<a target='_blank'", $link, $rep_count);

return $new_ret;

}

add_filter('get_comment_author_link', 'add_blank_get_comment_author_link', 10, 2);

and now the author links from recent comments open in new tab, hurray!!

Hope you find it useful. Cheers

WebDevelopersWall

just another programmer's blog

Floating sidebar for twentythirteen

Load more activities on scroll

Order by date in post meta

The problem

The solution

Buddypress remove email id from private messages

Crop image script

How to use it

Generate youtube embed code from url

How to use:

Get youtube video id from url

The code:

How to use:

Change wordpress registration email

The code:

Custom styled checkboxes

What are we doing?

The HTML

The CSS

A little javascript

Add target blank to user link in recent comments widget