Speed Contact Bar – WordPress plugin

In most themes the Speed Contact Bar works fine without any conflicts. Only if the theme comes with an own fixed top bar there can be a source of design conflicts with a fixed Speed Contact Bar.

In that case you can try to set the position of the Speed Contact Bar at the bottom of every page. That will avoid the conflict.

Speed Contact bar requires a WordPress installation version equal or higher than 3.5.

The most likely reason is the WordPress Admin Bar fixed on top of the page. In this case it overlaps the Speed Contact Bar.

You have two possibilities to see the bar:

1. Go to your user profile in the backend a deactivate the checkbox at “Show admin bar”
2. Use another browser, as unlogged visitor

Repeatedly users ask for special things to be included in the contact bar. Of course, if you know how to code with PHP, HTML and CSS you can change the plugin’s code and insert whatever you want.

But changing the plugin’s code is not a good idea. Every upgrade of the plugin will delete your inserted code.

Luckily there is a solution: hooks offered by this plugin. You can change the content and design of the contact bar with your own functions. And you can be sure that they will not be overwritten by future plugin’s upgrades when you place your function in the functions.php of your theme or in a self-written plugin.

Use the hooks:

1. speed_contact_bar_data for altering the personal contact informations list
2. speed_contact_bar_icons for altering the social media icons list
3. speed_contact_bar_style for altering the style of the contact bar

You can place the code in your functions.php of your theme or in your own plugin. Lets look at the following examples.

The following function does two things:

1. it adds a list item with the content ‘Hello World’ as the first item
2. and it changes the order of the list items.

At the end the function returns the changed list.

// Passed parameter: an array of personal contact data as list items
function change_speed_contact_bar_data ( $list_items ) {

    // Adds an item as first item in the list via array_unshift()
    // The content has to be surrounded by the LI element
    array_unshift( $list_items, '<li>Hello World</li>' );

    // Re-orders the list items and returns the new list
    // Here: ( a, b, c, d ) =&gt; ( c, d, a, b )
    return array(
        $list_items[ 2 ],
        $list_items[ 3 ],
        $list_items[ 0 ],
        $list_items[ 1 ],
    );

}
// Let the function work
add_filter( 'speed_contact_bar_data', 'change_speed_contact_bar_data' );

The following function appends the email address ‘foo@bar.zz’ with a dark 30 x 30x px icon to the list. At the end the function returns the changed list.

// Passed parameter: an array of personal contact data as list items
function add_speed_contact_bar_mailaddress ( $list_items ) {

    $email_address = antispambot( 'foo@bar.zz' );

    $list_items[] = sprintf(
        '<li class="scb-email"><a rel="nofollow" href="https://wordpress.org/%s"><img src="%sassets/images/email_%s.svg" width="%d" height="%d" alt="https://wordpress.org/%s" /><span>%s</span></a></li>',
        esc_url( 'mailto:' . $email_address, array( 'mailto' ) ),
        '/wp-content/plugins/speed-contact-bar/public/',
        'dark',
        30,
        30,
        esc_attr__( 'Email', 'speed-contact-bar' ),
        esc_html( $email_address )
    );

    return $list_items; 
}
// Let the function work
add_filter( 'speed_contact_bar_data', 'add_speed_contact_bar_mailaddress' );

The following function does two things:

1. it appends a list item with the content ‘Foo Bar’ at the end of the list,
2. and it inserts a list item with a standard WordPress search form at a desired position in the list.

At the end the function returns the changed list.

// Passed parameter: an array of social media icons as list items
function change_speed_contact_bar_icons ( $list_items ) {

    // Add an item as last item in the list, via $array[]
    // The content has to be surrounded by the LI element
    $list_items[] = '<li>Foo Bar</li>';

    // Adds an item at any position in the list via array_splice()
    // Way of thinking: the new item should be the x-th element:
    // so is x - 1 the parameter value for the position
    // Example: if 4th element then parameter value is 4 - 1 = 3
    // You can find more tipps for array_splice() at 
    // http://php.net/manual/en/function.array-splice.php
    // The content has to be surrounded by the LI element
    // In this example the LI element is extended by an ID attribute
    // to have an exact selector for CSS
    array_splice(
        $list_items, // array to change
        3, // position: array index where to insert the new item
        0, // number of items to replace
        // content of new item:
        '<li id="spc-search-form">' . get_search_form( false ) . '</li>' 
    );

    // Returns changed list
    return $list_items;
}

// Let the function work
add_filter( 'speed_contact_bar_icons', 'change_speed_contact_bar_icons' );

The following function appends some Cascading Style Sheets code for the search form inserted by the previous function.

At the end the function returns the changed CSS code.

// Passed parameter: a string of CSS
function change_speed_contact_bar_style ( $css_code ) {

    // Adds style for search form, appends it to existing code with '.='
    // The content has to be surrounded by the STYLE element
    $css_code .= "<style type='text/css'>n";
    $css_code .= "#spc-search-form form { display: inline; }n";
    $css_code .= "#spc-search-form input { width: 7em; }n";
    $css_code .= "</style>n";

    // Returns changed CSS
    return $css_code;

}

// Let the function work
add_filter( 'speed_contact_bar_style', 'change_speed_contact_bar_style' );

Most of the icons in the Speed Contact Bar are in SVG format. It is a scalable image format which keeps the images fine in every size.

The reason of the broken icons is a misconfiguration of your server. It sends the wrong HTTP header for SVG files.

Your web server needs an extra line in the configuration file:
AddType image/svg+xml svg

For Apache servers the configuration file is called ‘.htaccess’.

Just deactivate the plugin. The contact bar does not appear and all your data are kept stored. If you activate the plugin again you see the contact bar with the last stored settings.

If you deactivate and delete the plugin on the plugins page all files and settings of the contact bar will be deleted residue-free.

Translations are available in English, Spanish, Russian, German and Polish. If you want to see another language it would be great if you would provide the translation.

Please write your request in the plugin’s support forum at wordpress.org. We will try to take a look and answer as soon as possible.