Include style and scripts in wordpress custom plugin

Adding custom scripts or stylesheets to your WordPress site is usually done to improve the functionality, features, and design of a site. There are multiple ways of adding JavaScript (also called JS) and CSS code to your theme or plugin. In a different article, we coveredĀ all the ways to add JS code.

function theme_js_script() {   
   wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/assets/js/theme_script.js');
}

add_action('wp_enqueue_scripts', 'theme_js_script');
get_template_directory_uri()

// http://localhost/wordpress/wp-content/themes/hello-elementor
// path till plugin folder
function default_css_styles() {   
  wp_enqueue_style('default-style', get_stylesheet_directory_uri() .'/css/default.css');
}

add_action('wp_enqueue_scripts', 'default_css_styles');
Bootstrap add in wordpress custom plugin

wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('prefix_bootstrap');
jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})
//this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
wp_register_script('custom_script',
get_template_directory_uri() . '/assets/js/jquery-3.7.1.min.js',
array('jquery'),
'1.0' );
// enqueue the script
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

 

 

Leave a Reply