Add Contact to Top Bar

  • Author
  • #3314

    Steffen Wegers

    Hi Guys,

    I wanna add a third “field” named contact to the Top Bar of your theme like this:

    How can i realize that?

    Best wishes


    Andrew Misplon

    Hi Steffen

    Thanks for reaching out, great to hear from you.

    Would the Font Awesome pencil icon work for you: 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 🙂


    Steffen Wegers


    oh yes, that would be pretty nice 🙂


    Andrew Misplon

    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' );

    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 a:before {
        content: "\f040";

    Option Two: With a Child Theme

    Download this child theme to your desktop:

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Scroll to top