Hi Friends, here I am going to explain how to create a top bar or say information bar before the header. There are many plugins available for this and you can go for it if you don’t want to code. I have listed a few plugins which I found in the web.
If you still want to go for coding, follow the below steps. To add a top bar, either we can create a plugin or a child theme. Here I used the child theme.
Create Child Theme
Inside your theme directory, create a new folder with the name you like. I named it as storefront-child.
1. Create a new CSS file with name style.css and add the below lines to it. Make sure to add the exact name of the parent theme for Template.
/* Theme Name: Storefront Child Template: storefront */
2. Create a PHP file with name functions.php and add the below lines to it.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles()
{
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
3. Go to your dashboard and activate your child theme.
Add controls to the Customization window.
We have a new object $wp_customize available from WordPress 3.4 or newer versions. This allows us to customize and add controls to the Appearance -> Customize admin screen.
First, we need to register the hook to use the $wp_customize object through ‘customize_register’ action.
class MyTheme_TopBar_Customize{
public static function register ( $wp_customize ) {
//All our sections, settings, and controls will be added here
}
}
add_action( 'customize_register' , array( 'MyTheme_TopBar_Customize' , 'register' ) );
Once this is done, we need to add a Section, settings, and controls to see it in the Admin dashboard.
- Add a New section
The title is the name which will show in the Customization screen. Sections are used to group the settings and controls. Please note that you can add settings and controls to an existing section as well. In the below code ‘sf_to_bar’ is the id of the section and it should be unique.
$wp_customize->add_section('sf_top_bar',
array(
'title' => __( 'Info Bar', 'storefront-child' ),
'priority' => 30,
));
2. Add a New Setting
The below code will add a new setting to the DB with name sf_topbar_bgcolor in the wp_options table. we can save the setting for a specific theme or for all the themes. Here I saved the setting for all themes. if you want to add it for a specific theme remove the ‘type’ section from the below code or mention ‘theme_mod’ instead of ‘option’
$wp_customize->add_setting('sf_topbar_bgcolor',
array(
'default' => apply_filters( 'sf_topbar_bgcolor', '#5b5b5b' ),
'sanitize_callback' => 'sanitize_hex_color', // this will return a color picker in Admin Dashboard
'type' => 'option', // Options are 'option' & 'theme_mod' default - theme_mod
));
3. Add a New Controller
A control is an HTML form element that renders on the Theme Customizer page and allows admins to change a setting and preview those changes in real time. Controls are linked to a single setting and a single section.
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'sf_topbar_bgcolor',
array(
'label' => __( 'Background Color', 'storefront-child' ),
'section' => 'sf_top_bar', //section_id
'settings' => 'sf_topbar_bgcolor', //setting_id
) )
);
Now you will be able to see a new section in the Customization tab. I have added some more settings and controls to my code. Please see below my complete code.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles(){
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/Style.css' );
}
class MyTheme_TopBar_Customize{
public static function register ( $wp_customize ) {
$wp_customize->add_section('sf_top_bar', array(
'title' => __( 'Info Bar', 'storefront-child' ),
'priority' => 30,
));
$wp_customize->add_setting( 'sf_topbar_bgcolor', array(
'default' => apply_filters( 'sf_topbar_bgcolor', '#5b5b5b' ),
'sanitize_callback' => 'sanitize_hex_color',
'type' => 'option',
));
$wp_customize->add_setting( 'sf_topbar_textcolor', array(
'default' => apply_filters( 'sf_topbar_textcolor', '#5b5b5b' ),
'sanitize_callback' => 'sanitize_hex_color',
'type' => 'option',
));
$wp_customize->add_setting('sf_child_phone', array(
'default' => '+91',
'capability' => 'edit_theme_options',
'type' => 'option',
));
$wp_customize->add_setting('sf_child_contact', array(
'default' => 'info@domain.com',
'capability' => 'edit_theme_options',
'type' => 'option',
));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'sf_topbar_bgcolor',
array(
'label' => __( 'Background Color', 'storefront-child' ),
'section' => 'sf_top_bar',
'settings' => 'sf_topbar_bgcolor',
) ));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sf_topbar_textcolor',
array(
'label' => __( 'Text Color', 'storefront-child' ),
'section' => 'sf_top_bar',
'settings' => 'sf_topbar_textcolor',
) ) );
$wp_customize->add_control(
new WP_Customize_Color_Control($wp_customize,'sf_child_phone',
array(
'label' => __('Phone', 'storefront-child'),
'section' => 'sf_top_bar',
'settings' => 'sf_child_phone',
'priority' => 10,
'type' => 'text'
)) );
$wp_customize->add_control(
new WP_Customize_Color_Control($wp_customize,'sf_child_contact',
array(
'label' => __('Email', 'storefront-child'),
'section' => 'sf_top_bar',
'settings' => 'sf_child_contact',
'priority' => 10,
'type' => 'text'
)) );
}
public static function inject_css()
{
$background = get_option('sf_topbar_bgcolor');
$textcolor = get_option('sf_topbar_textcolor');
?><style>
.sf_top_bar{ position:fixed;z-index:99999; width:100%; background:<?php echo $background;?>; color:<?php echo $textcolor;?>; padding: 2px 10px;}
</style><?php
}
public static function top_bar_html( $wp_customize ){
$phone=get_option('sf_child_phone');?>
<div class="sf_top_bar"><?php echo $phone;?></div>
<?php }
}
add_action( 'customize_register' , array( 'MyTheme_TopBar_Customize' , 'register' ) );
add_action('wp_head',array( 'MyTheme_TopBar_Customize' , 'inject_css' ));
add_action('storefront_before_header', array( 'MyTheme_TopBar_Customize' , 'top_bar_html' ));
?>
Show the Top Bar
To show the output before the header I used ‘storefront_before_header’ hook which is already there in the theme.
add_action('storefront_before_header', array( 'MyTheme_TopBar_Customize' , 'top_bar_html' )); //child theme functions.php
There is no action hook is available in the WordPress default theme. So if you want to add the bar right after the body element please add the below line in your header.php. It will be good if you copy the header.php file from the parent theme to the child theme as if the theme has some update it didn’t affect the top bar.
<body <?php body_class(); ?>> <?php do_action( 'MyTheme_before_header' ); ?>
And change storefront_before_header to MyTheme_before_header in your child theme function.php.
add_action('MyTheme_before_header', array( 'MyTheme_TopBar_Customize' , 'top_bar_html' ));
Hope this helps you guys. let me know your feedback in comment section below.
Thank you for the info. I am, however, not sure where do you paste the full code for the wordpress website? Do you create a plug-in or can you put it all into the functions.php?
It’s really up to your choice. But I prefer to create a plugin for the modification which I want to in WordPress. If you edit it in functions.php, it might get removed when we upgrade the wordpress. Hope this answer your question.