Bootstrap namespacing in wordpress using less

on

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.

Bootstrap 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!

Posted in Wordpress and tagged , , by .

About Gowri

I am professional web developer with 8+ years experience. PHP, jQuery, WordPress, Angular and Ionic are my key skills in web development. I am working with strong enthusiastic team with spirit. We provide all web related solution like HTML/CSS development, Web graphic design and Logo.