Header is the first part of theme you should develop. It`s placed in header.php file wich contains html head section, and content (usualy it is logo, menu and registrated widgets area).
First part of header.php file is head area. Be shure that things listed below are included corectly:
<html>
tah with language_attributes()
<meta>
charset element should be placed as firstbloginfo()
to set the <meta>
charset and description elementswp_title()
to seth the <title>
elementwp_head()
before you close </head>
tag.Remember - do not link the theme stylesheets in the Header template. Use the wp_enqueue_script
and wp_enqueue_style
action hooks in inc/static.php file.
Example of correctly-formatted HTML head area:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
Do not put cutom classes on body element. To pust custom classes on body use function in function.php file (fw_ct_bee_filter_add_body_classes()
).
Usually we should place here a logo and link to the main page but there is very important to protect theme to display page titile when header image is not attached. To use header image you must register function in fuction.php file, to see how you can do it visit Codex
Example of correct-placed logo and page title section.
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand">
<?php if ( has_header_image() ) : ?>
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
<?php else: ?> <h1> <?php echo esc_attr( get_bloginfo( 'name' ) ); ?></h1> <?php endif; ?>
</a>
Note
As you now the theme should be widgetized as fully as its possible it means that in header should be registered at least one widget area.
Every additional things (like buttons, links, phone numbers and other that are not a widgets) should be placed in customizer in header/navigation section. Think about put every options for header/navigation (eg. type of navigation - big/small or text in aditional button) to section header/navigation in customizer.
For more info abiut developing customizer options see Customizer section in this documentation.