Add Contact to Top Bar

Hi Steffen

Thanks for reaching out, great to hear from you.

Would the Font Awesome pencil icon work for you: http://fontawesome.io/icon/pencil/. If so, I can create a child theme for you tomorrow that will add this to the left side of the top bar. Let me know if that’ll work for you.

Chat further tomorrow 🙂

Thanks for the wait. Ok, so two ways you can implement this. If you’re using the premium version of Ultra and don’t want to have to redo your Appearance > Customize > Theme Design settings then the first option is probably better:

Option One: Using Plugins

Install and activate a plugin called Code Snippets.
Install and activate a plugin called Simple Custom CSS if you don’t already have a Custom CSS plugin.

Go to Snippets > Add New and create a new snippet, insert the following as the snippet:

if ( ! function_exists( 'ultra_top_bar_text_area' ) ):
/**
 * Display the top bar text.
 */
function ultra_top_bar_text_area(){
	$phone = wp_kses_post( siteorigin_setting('text_phone') );
	$email = wp_kses_post( siteorigin_setting('text_email') );
	
	if ( siteorigin_setting('text_phone') ) {
		echo '<span class="phone"><a href="tel:' . $phone . '">' . $phone . '</a></span>';
	}
	if ( siteorigin_setting('text_email') ) {
		echo '<span class="email"><a href="mailto:' . $email . '">' . $email . '</a></span>';
	}
	echo '<span class="contact"><a href="/contact">Contact</a></span>';
}
add_action( 'ultra_top_bar_text', 'ultra_top_bar_text_area' );
endif;

I’ve made the URL /contact. Carefully edit that if it doesn’t match your contact page URL. OR let me know the URL and I’ll make the edit for you.

Select the option that lets the snippet run only on the front end of your site. This will ensure that you can still access WordPress if there is a PHP error.

Finally, click Save and Activate.

Go to Appearance > Custom CSS and insert:

/* Top Bar */
#top-bar .top-bar-text span.contact a:before {
    content: "\f040";
}

Option Two: With a Child Theme

Download this child theme to your desktop: https://purothemes.com/wp-content/uploads/2016/04/ultra-child-top-bar-new-left-item.zip

Go to Appearance > Themes > Add New > Upload Theme, install and activate.

Activating a child theme in WordPress causes menu location and Customizer settings to reset, this is an expected result.

If you need to change the contact page URL from /contact to something else, go to Appearance > Editor and edit the functions.php file of the child theme and edit the URL there.

If you make a mistake and the site white screens, login to your server via FTP or Hosting File Manager and delete the “ultra-child” folder found at /wp-content/themes/

I hope this helps 🙂 Let me know how it goes.