Mobile Contact Bar

Description

Mobile Contact Bar is a compact and highly customizable plugin, which allows your visitors to contact you directly via phone, email, Social Media, or any custom URL.

Display settings for bar, icons and contacts are editable under the Settings → Mobile Contact Bar menu in WordPress Admin.

The contact bar appears if at least one contact information is set, and on those screens where the width is below of the Maximum Screen Width setting.

Features

  • Set your contact information and Social Media profiles
  • Design bar and icons via plugin settings or directly via CSS
  • Change the order of the icons as you wish
  • Add subject, body, cc, bcc parameters to email, add predefined text messages
  • Show or hide bar toggle – depending on your needs
  • Add custom URLs (e.g. WooCommerce Cart) using the mcb_admin_update_contacts filter and Font Awesome Icons

For more information see the FAQ.

Tested with

  • Twenty Ten
  • Twenty Eleven
  • Twenty Twelve
  • Twenty Thirteen
  • Twenty Fourteen
  • Twenty Fifteen :S
  • Twenty Sixteen
  • Twenty Seventeen

Custom Icons / WooCommerce Cart

First insert the following code snippet into your active theme’s functions.php file.
Next go to the MCB settings page, and check your newly created contact field at the bottom of the list.
Finally fill the field in with your cart page’s URL, and save.

function my_mcb_admin_update_contacts( $contacts ) {

    $contacts['woocommerce_cart'] = array(
        'icon'        => 'shopping-cart',       // Font Awesome 4.7.0 icon name
        'title'       => 'WooCommerce',
        'protocol'    => 'https',
        'placeholder' => 'https://mysite.com/cart'
    );
    return $contacts;
}
add_filter( 'mcb_admin_update_contacts', 'my_mcb_admin_update_contacts' );

Developers

Administration Hooks

  • mcb_admin_update_contacts( array $contacts ) filter allows you to modify the Contact List section. Typically, you add new items to that list.

  • mcb_admin_update_settings( array $settings ) filter allows you to modify the Bar Display Settings section and the Icon Display Settings section. If you can not wait for the official enhancement, you can add settings to those sections by yourself.

Front end Hooks

  • mcb_front_escape_uri( string $uri, string $id, string $protocol, string $resource ) filter allows you to perform custom specification and validation of a contact’s reference. The plugin already supports the http, https, mailto, skype, sms and the tel protocols.

  • mcb_front_render_html( array $contacts, array $settings ) action gives you full control over the representation.

Credits

Screenshots

  • WordPress Admin → Settings → Mobile Contact Bar

Installation

  1. Upload mobile-contact-bar to the /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins menu in WordPress Admin
  3. Click on the new submenu item Mobile Contact Bar under the Settings menu
  4. Edit your contact bar settings
  5. Fill in the information that you want displayed (email address, phone number, Social Media profiles)
  6. Check your site and its contact bar appearance on a mobile device

FAQ

Installation Instructions
  1. Upload mobile-contact-bar to the /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins menu in WordPress Admin
  3. Click on the new submenu item Mobile Contact Bar under the Settings menu
  4. Edit your contact bar settings
  5. Fill in the information that you want displayed (email address, phone number, Social Media profiles)
  6. Check your site and its contact bar appearance on a mobile device
I want to display contacts which are not listed on the MCB settings page like SlideShare, Reddit or Steam. Can I do that?

Yes, you can. The mcb_admin_update_contacts filter allows you to modify the contact list. You can add new items to that list, and they will appear at the bottom of the MCB settings page. For proper icon names check the Font Awesome Icons.

E.g. insert the following code snippet to your active theme’s functions.php file:

function my_mcb_admin_update_contacts( $contacts ) {

    $contacts['slideshare'] = array(
        'icon'        => 'slideshare',   // Font Awesome 4.7.0 icon name
        'title'       => 'SlideShare',
        'protocol'    => 'http',
        'placeholder' => 'http://www.slideshare.net/username'
    );
    return $contacts;
}

add_filter( 'mcb_admin_update_contacts', 'my_mcb_admin_update_contacts' );
Add two icons at once

function my_mcb_admin_update_contacts( $contacts ) {

    $contacts['slideshare'] = array(
        'icon'        => 'slideshare',   // Font Awesome 4.7.0 icon name
        'title'       => 'SlideShare',
        'protocol'    => 'http',
        'placeholder' => 'http://www.slideshare.net/username'
    );
    $contacts['imdb'] = array(
        'icon'        => 'imdb',         // Font Awesome 4.7.0 icon name
        'title'       => 'IMDb',
        'protocol'    => 'http',
        'placeholder' => 'http://www.imdb.com/user/urID/'
    );
    return $contacts;
}

add_filter( 'mcb_admin_update_contacts', 'my_mcb_admin_update_contacts' );
Different styles on front-page and on the rest of the site

WordPress adds home class to the body tag of the front-page. Narrow down the MCB related selection with the .home class selector:

.home #mcb-bar .fa {
    color: yellow;
}
I need a copyright icon which links visitors to my copyright page

Use the mcb_admin_update_contacts filter for adding the copyright icon to the contact list. Enter the URL of your existing page to the newly created contact item.

function my_mcb_admin_update_contacts( $contacts ) {

    $contacts['copyright'] = array(
        'icon'        => 'copyright',   // Font Awesome 4.7.0 icon name
        'title'       => 'Copyright',
        'protocol'    => 'http',
        'placeholder' => 'http://mysite.com/page_or_post'
    );
    return $contacts;
}

add_filter( 'mcb_admin_update_contacts', 'my_mcb_admin_update_contacts' );

Reviews

Great Idea If It Worked Properly

This is a great idea. But the plug-in needs A LOT of work!

It does not seem to show all the icons for each contact method. On my phone, I only see an icon for phone and for everything else, Skype, email, social media, etc. it just shows a blank box.

Also, when you touch on some of the items, it does not do anything.

Get it to work properly and I’ll give it a 5 stars, for sure!

super plugin

Excellent plug-in, only the necessary functions, nothing superfluous!
If you could add function to save toggle state (so not to fold it each time manually) or add text labels then it would be defenetly 5stars +++

Read all 13 reviews

Contributors & Developers

“Mobile Contact Bar” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Mobile Contact Bar” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.4.1

  • [Fixed] Bar width and bar alignment

1.4.0

  • [Fixed] Plugin upgrade on network
  • [Added] Bar Width and Horizontal Align options – https://wordpress.org/support/topic/bar-width-2/
  • [Added] Instagram icon – https://wordpress.org/support/topic/no-instagram-icon/

1.3.1

  • [Tested] Tested up to WordPress 4.9

1.3.0

  • [Added] Texting option – https://wordpress.org/support/topic/text-with-pre-filled-option/

1.2.3

  • [Fixed] Use <tbody> explicitely in contacts’ table
  • [Fixed] Fix issue with array_filter()

1.2.2

  • [Fixed] Fix issue with array_filter()

1.2.1

  • [Fixed] Fix issue with empty arrays

1.2.0

  • [Added] Dragable / orderable contacts
  • [Added] Add option for setting subject, body, cc, bcc of email – https://wordpress.org/support/topic/add-subject-and-body-to-email/
  • [Updated] Refresh option page UI using meta boxes
  • [Updated] Font Awesome 4.7.0
  • [Fixed] Prepare plugin for localization
  • [Fixed] Full form of plugin name in class and global names
  • [Fixed] Sanitize phone number and add a plus sign (+) prefix
  • [Fixed] Sanitize all keys of the settings and the contacts arrays

1.1.2

  • [Updated] Font Awesome 4.6.3
  • [Fixed] Fix the left aligned icons in the CSS – https://wordpress.org/support/topic/does-your-plugin-support-the-hemingway-theme/

1.1.1

  • [Updated] Font Awesome 4.6.1
  • [Fixed] Fix admin styles
  • [Fixed] Fix bar styles

1.1.0

  • [Added] Add new option for opening links in a new tab – https://wordpress.org/support/topic/no-instagram-icon/

1.0.1

  • [Fixed] Improve setting and contact validation (sanitization)
  • [Fixed] Set the default value of the fixed bar position to true
  • [Fixed] Remove obsolate workarounds

1.0.0

  • [Upgraded] Official release

0.0.2

  • [Fixed] Fix default option creation issue during network activation

0.0.1

  • [Started] Initial release