Customizing Your Plugin’s CSS in Your WordPress Theme

Customizing the appearance of a WordPress plugin to seamlessly integrate with your theme is a common practice. In this guide, we’ll walk you through the steps to replace the original CSS file of a plugin with your customized CSS file, all within your theme’s root directory. We’ll use an example where we’ll replace the CSS file for the Agile Store Locator plugin’s search widget. Follow these easy instructions to give your plugin a personalized look.

Step 1: Locate the Plugin CSS File In your theme’s functions.php file, use the wp_dequeue_style function to remove the original CSS file associated with the plugin. This step ensures that your customized styles will take precedence over the default ones.

/**
 * [asl_filter_search_widget_words_method Used this filter to change the CSS file]
 * @param  [type] $words [description]
 * @return [type]        [description]
 */
function asl_filter_search_widget_words_method($words) {

	//	Dequeue the plugin search css file
  wp_dequeue_style('agile-store-locator-asl-search');
  	
  //	Add your customized search file
  wp_enqueue_style('asl-search-widget',  get_template_directory_uri().'/asl_search-updated.css', array(), '4.9.12', 'all' );

	return $words;
}

add_filter('asl_filter_search_widget_words', 'asl_filter_search_widget_words_method');

Step 2: Customize Your CSS Now, create your customized CSS file, in this example named asl_search-updated.css, and place it in your theme’s root directory. This file will contain the styles you want to apply to the plugin.

Step 3: Activate Your Custom Styles Once you’ve added your customized CSS file to your theme’s root directory, it will automatically override the plugin’s default styles, giving you full control over the appearance of the plugin’s elements.

By following these simple steps, you can seamlessly integrate any WordPress plugin with your theme’s design, ensuring a cohesive and personalized user experience on your website.

The above example shows how to update the CSS file of the Search Widget, however, if you want to update the file of the Store Locator, here is the relevant filter to do it, you can check more filters on the plugin documentation of hooks & filters.

/**
* [asl_filter_change_words Using change word filter to dequeue the CSS file for List Template]
* @param  [type] $words [description]
* @return [type]        [description]
*/
function asl_filter_change_words($words) {
 
       
    wp_dequeue_style('agile-store-locator-sl-icons');
    wp_dequeue_style('agile-store-locator-sl-bootstrap');
    wp_dequeue_style('agile-store-locator-list');
    
    //  Add your customized list template file
    wp_enqueue_style('asl-list-template',  get_template_directory_uri().'/list-tmpl-updated.css', array(), '4.9.12', 'all' );

    return $words;
}
 
 
add_filter('asl_filter_locator_words', 'asl_filter_change_words',20);