Set color of address bar in WordPress

If you have ever seen a colored address bar on your smartphone and waned to add a similar one to your WordPress site, here is how to do it.

Add these lines to your functions.php file in your child-theme and set the HTML color code to the color you prefer.

/* Written by Batz Bar
based on this stackoverflow answer */

function color_address_bar() {
	// Set here your html color. You could find a color picker here
	$color ="#4285f4";
	// Forgive user if no "#" before color
	$color = (strpos($color,'#') !== false ? $color : '#' . $color);
	// HTML to add to header
	$color_meta = '
	<!-- Chrome, Firefox OS and Opera -->
	<meta name="theme-color" content="' . $color . '">
	<!-- Windows Phone -->
	<meta name="msapplication-navbutton-color" content="' . $color . '">
	<!-- iOS Safari , works only in black. to set this off, comment the next line -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">';

	echo $color_meta;


When choosing a color, we should keep in mind the user experience. For example, in this site we could have set the color to red like theme color, but it will look to the user as battery low alert in the top bar on his phone, so i personally preferred the blue color.

wordpress set address bar background color smartphoneย wordpress set address bar background color mobile phone

One thought on “Set color of address bar in WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *