1. Including CSS (Styles)
Use wp_enqueue_style to include CSS files.
Example:
function mytheme_enqueue_styles() {
// Include the main theme stylesheet
wp_enqueue_style('mytheme-main-style', get_stylesheet_uri());
// Include an additional CSS file
wp_enqueue_style(
'mytheme-custom-style', // Unique identifier
get_template_directory_uri() . '/assets/css/custom.css', // File path
array(), // Dependencies (e.g., other styles)
'1.0.0' // File version
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');
2. Including JavaScript
Use wp_enqueue_script to include JavaScript files.
Example:
function mytheme_enqueue_scripts() {
// Include a custom JS file
wp_enqueue_script(
'mytheme-custom-script', // Unique identifier
get_template_directory_uri() . '/assets/js/custom.js', // File path
array('jquery'), // Dependencies (e.g., jQuery)
'1.0.0', // File version
true // Load in the footer (true for before `</body>`)
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');
3. Including Both CSS and JS
You can combine both styles and scripts in one function:
function mytheme_enqueue_assets() {
// Styles
wp_enqueue_style('mytheme-main-style', get_stylesheet_uri());
wp_enqueue_style('mytheme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0.0');
// Scripts
wp_enqueue_script('mytheme-custom-script', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');
4. Best Practices for Enqueuing
- Use
get_stylesheet_uri()for the main theme stylesheet. - Always include file versions (e.g.,
'1.0.0') to help with cache management. - Add dependencies. For example, include
array('jquery')to ensure jQuery is loaded before your script. - Load scripts in the footer by passing
truetowp_enqueue_scriptfor better performance.
5. Passing Data to JavaScript
If you need to pass PHP data to your JavaScript, use wp_localize_script.
Example:
function mytheme_enqueue_scripts_with_data() {
wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/assets/js/custom.js', array(), '1.0.0', true);
// Pass data to JavaScript
wp_localize_script('mytheme-script', 'mythemeData', array(
'ajax_url' => admin_url('admin-ajax.php'),
'site_name' => get_bloginfo('name'),
));
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts_with_data');
6. Organizing Your Files
Store your CSS and JS files in dedicated directories for better structure:
/assets/css/ (for styles)
/assets/js/ (for scripts)
This approach keeps your project files organized and simplifies enqueuing them.
