How to Load Custom CSS for Currently Logged-in WordPress User

Depending on the customizations that you want to do on WordPress you may need to have a different CSS style for each user.

Here's a code that you can use to load a different style for the public side or for the admin area.

All you need to do is connect with your favourite FTP client and create these folders where USERNAME is the username you'd like to show that given CSS style.

wp-content/orbisius-user-css/USERNAME/

In that folder create: style.css .

If you need to show some css in the admin area create: admin_style.css as well.

The code will switch automatically depending on the area the user is currently browsing.

if the files do not exist they won't be loaded i.e. are places in the wrong folder they won't be loaded.

<?php
/**
 * Loads css style based on user's username.
 * Check for updates in the blog post.
 * Blog post: https://orbisius.com/4568
 *
 * Usage:
 * Create a file using FTP client in wp-content/orbisius-user-css/username/style.css
 * If you want the another file to admin in WP admin use: wp-content/orbisius-user-css/username/admin_style.css

 * @author Slavi Marinov | https://orbisius.com
 * @copyright 2019-Present All Rights Reserved
 */
add_action( 'init', 'orbisius_custom_code_user_css_init' );

/**
 * Loads css style based on user's username
 * @return void
 */
function orbisius_custom_code_user_css_init() {
	if ( defined( 'DOING_CRON' ) && DOING_CRON ) {
		return;
	}

	if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
		return;
	}

	if ( ! function_exists('wp_get_current_user') ) { // this could happen
		return;
	}

	$user_obj = wp_get_current_user();

	if (empty($user_obj->user_login)) { // not logged in
		return;
	}

	/*
	 * Array (
		[path] => C:\path\to\wordpress\wp-content\uploads\2010\05
		[url] => http://example.com/wp-content/uploads/2010/05
		[subdir] => /2010/05
		[basedir] => C:\path\to\wordpress\wp-content\uploads
		[baseurl] => http://example.com/wp-content/uploads
		[error] =>
	)
	// Descriptions
	[path] - base directory and sub directory or full path to upload directory.
	[url] - base url and sub directory or absolute URL to upload directory.
	[subdir] - sub directory if uploads use year/month folders option is on.
	[basedir] - path without subdir.
	[baseurl] - URL path without subdir.
	[error] - set to false.
	*/
	$upload_dir_rec = wp_upload_dir();

	// we need to replace this from the folders below because we want our folder to be in wp-content and not in wp-content/uploads
	$uploads_regex = '#[/\\\]uploads[/\\\]#si';
	$css_file_prefix = $upload_dir_rec['basedir'] . '/orbisius-user-css';
	$css_file_prefix = preg_replace($uploads_regex, '/', $css_file_prefix);
	$css_file_prefix_url = $upload_dir_rec['baseurl'] . '/orbisius-user-css';
	$css_file_prefix_url = preg_replace($uploads_regex, '/', $css_file_prefix_url);

	$css_file = is_admin() ? 'admin_style.css' : 'style.css';
	$css_file_full = $css_file_prefix . "/$user_obj->user_login/" . $css_file;
	$css_file_full_url = $css_file_prefix_url . "/$user_obj->user_login/" . $css_file;

	if (file_exists($css_file_full)) {
		wp_register_style(
			'orbisius-user-css-user-css-' . $user_obj->user_login,
			$css_file_full_url,
			array(),
			filemtime( $css_file_full )
		);

		wp_enqueue_style( 'orbisius-user-css-user-css-' . $user_obj->user_login );
	}
}

You can add this code to your functions.php file or create an mu-plugin.

To check if the CSS is loaded view page source and look for: orbisius-user-css-user-

Is there a plugin?

Yes! If you want to use this code as a nice plugin and/or load JavaScript files as well check out Orbisius User CSS JS