Bootstrap css is now days taking place in all over the web. In the sometime, there is a chance of bootstrap conflict with other css. It may known solution to use own namespacing to avoid the conflict between bootstrap css and other css. It has been already discussed over forum like stack overflow and found the solution like this post. Yes, Less or SASS is the good solution to namespacing.

Here I am going to tell how to implement the bootstrap namespacing in wordpress using less css.

Register Lesscss in wordpress

function siteLoadScripts(){
			wp_enqueue_script('lesscss','..path.../js/less.min.js');
}
add_action('wp_print_scripts', 'siteLoadScripts');

You can get less.js from LESS css website.

Enque stylesheet in wordpress

function siteLoadStyles(){
	wp_register_style('myStyle','..path.../css/myStyle.less');
	wp_enqueue_style( 'myStyle' );
}
add_action('wp_print_styles', 'siteLoadStyles');

Above code will include the following code in your html.

<link rel=’stylesheet’ id=’myStyle-css’  href=’..path../css/myStyle.less?ver=3.8.1′ type=’text/css’ media=’all’ />

Note created link element is with rel=’stylesheet’ attribute. But Lesscss interpreter needs rel attribute as  rel=’stylesheet/less’ so do that we need to apply following filter with regexp.

function siteLoadStyles(){
	wp_register_style('myStyle','..path.../css/myStyle.less');
	wp_enqueue_style( 'myStyle' );

	add_filter('style_loader_tag', 'myStyle_loader_tag_function');

}
add_action('wp_print_styles', 'siteLoadStyles');

function myStyle_loader_tag_function(){
 	return preg_replace("/='stylesheet' id='myStyle-css'/", "='stylesheet/less' id='myStyle-css'", $tag);
}

So the filter will output as below.

<link rel=’stylesheet/less’ id=’myStyle-css’  href=’..path../css/myStyle.less?ver=3.8.1′ type=’text/css’ media=’all’ />

Now we are done with including the files, time to write your lesscss to avoid bootstrap namespacing. Write the following in your myStyle.less file.

.your-namespace  {
  @import (less) url("bootstrap.min.css");
}

That’s all we implemented the bootstrap namespacing in wordpress. Please share if it’s useful!