- This topic has 3 replies, 2 voices, and was last updated 8 years, 8 months ago by Andrew Misplon.
- AuthorPosts
- April 3, 2016 at 12:40 pm #3314
Steffen WegersParticipantHi 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
SteffenApril 3, 2016 at 7:04 pm #3316
Andrew MisplonKeymasterHi 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 🙂
April 3, 2016 at 9:13 pm #3317
Steffen WegersParticipantHi,
oh yes, that would be pretty nice 🙂
April 4, 2016 at 7:57 pm #3325
Andrew MisplonKeymasterThanks 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.
- AuthorPosts
You must be logged in to reply to this topic.