Add Contact to Top Bar

This topic contains 3 replies, has 2 voices, and was last updated by  Andrew Misplon 2 years ago.

  • Author
    Posts
  • #3314

    Steffen Wegers
    Participant

    Hi Guys,

    I wanna add a third “field” named contact to the Top Bar of your theme like this: http://de.tinypic.com/r/2icb9fn/9

    How can i realize that?

    Best wishes
    Steffen

    #3316

    Andrew Misplon
    Keymaster

    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 🙂

    #3317

    Steffen Wegers
    Participant

    Hi,

    oh yes, that would be pretty nice 🙂

    #3325

    Andrew Misplon
    Keymaster

    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: http://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.

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

You must be logged in to reply to this topic.

Scroll to top