The login_enqueue_scripts WordPress PHP action allows you to enqueue scripts and styles specifically for the login page.
Usage
add_action('login_enqueue_scripts', 'your_function_name');
function your_function_name() {
// your custom code here
}
Parameters
- No parameters for this action.
More information
See WordPress Developer Resources: login_enqueue_scripts
Remember, this action is used for enqueuing both scripts and styles on login and registration related screens.
Examples
Enqueue a custom CSS file for the login page
This code enqueues a custom CSS file to style the login page.
add_action('login_enqueue_scripts', 'enqueue_login_stylesheet');
function enqueue_login_stylesheet() {
wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/login-style.css');
}
Enqueue a custom JavaScript file for the login page
This code enqueues a custom JavaScript file to add extra functionality to the login page.
add_action('login_enqueue_scripts', 'enqueue_login_script');
function enqueue_login_script() {
wp_enqueue_script('custom-login', get_stylesheet_directory_uri() . '/login-script.js', array('jquery'), '1.0', true);
}
Enqueue Google Fonts for the login page
This code enqueues Google Fonts to customize the typography of the login page.
add_action('login_enqueue_scripts', 'enqueue_google_fonts');
function enqueue_google_fonts() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
}
Add custom inline styles for the login page
This code adds custom inline styles to change the background color of the login page.
add_action('login_enqueue_scripts', 'add_custom_login_styles');
function add_custom_login_styles() {
$custom_css = "
body {
background-color: #f1f1f1;
}";
wp_add_inline_style('login', $custom_css);
}
Add custom inline scripts for the login page
This code adds custom inline JavaScript to display an alert message when the login button is clicked.
add_action('login_enqueue_scripts', 'add_custom_login_scripts');
function add_custom_login_scripts() {
$custom_js = "
jQuery(document).ready(function($) {
$('#wp-submit').on('click', function() {
alert('Login button clicked!');
});
});";
wp_add_inline_script('jquery', $custom_js);
}
Add custom styles to the admin area
This example adds custom CSS styles to the WordPress admin area.
add_action( 'admin_print_styles', 'custom_admin_styles' );
function custom_admin_styles() {
wp_enqueue_style( 'custom-admin', get_stylesheet_directory_uri() . '/custom-admin.css' );
}
This code adds the file custom-admin.css, located in the current theme’s directory, to the admin area. The wp_enqueue_style function is used to enqueue the stylesheet.
Add a custom font to the admin area
This example adds a custom font to the WordPress admin area.
add_action( 'admin_print_styles', 'custom_admin_font' );
function custom_admin_font() {
echo '<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body {
font-family: "Open Sans", sans-serif;
}
</style>';
}
This code imports the font Open Sans from Google Fonts and applies it to the body of the admin area. The font is added to the admin area using inline styles.
Remove default styles from the admin area
This example removes default styles from the WordPress admin area.
add_action( 'admin_print_styles', 'remove_admin_styles' );
function remove_admin_styles() {
wp_dequeue_style( 'wp-admin' );
wp_dequeue_style( 'buttons' );
}
This code removes the default wp-admin and buttons styles from the admin area using the wp_dequeue_style function.
Add custom styles to a specific admin page
This example adds custom styles to a specific admin page.
add_action( 'admin_print_styles-post.php', 'custom_post_styles' );
function custom_post_styles() {
wp_enqueue_style( 'custom-post', get_stylesheet_directory_uri() . '/custom-post.css' );
}
This code adds the file custom-post.css, located in the current theme’s directory, to the edit post page. The admin_print_styles-post.php action is used to target this specific page.
Add custom styles to the login page
This example adds custom styles to the WordPress login page.
add_action( 'login_enqueue_scripts', 'custom_login_styles' );
function custom_login_styles() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/custom-login.css' );
}
This code adds the file custom-login.css, located in the current theme’s directory, to the login page. The login_enqueue_scripts action is used to target the login page.