Hi, in Develop theme header of WordPress post I am going to show you how to develop a custom header.php or common header for WordPress theme from an HTML pice saved as header.php
First I am describing the code should be used for header portion and then will show a sample header code with HTML
- The code or function
<html <?php language_attributes(); ?>>is used in the starting HTML tag for the language of the site. <meta charset="<?php bloginfo( 'charset' ); ?>">is used to get the HTML default charset.<title><?php wp_title ( '' ); if (is_front_page()) { bloginfo ( 'name' ); echo ' - '; bloginfo ( 'description' ); } ?></title>is used to get the page title according to the site name and page name and description.<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" />is used for getting the theme defining style.css file which is located in the theme root folder.<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">is used to get the pingback URL<?php wp_head(); ?>is used to get the default header portion as CSS some js of WordPress.<?php body_class(); ?>is used to define the unit body class for each page it also generated some default classes of WordPress body.- To include the other CSS located in the theme directory include theme style.css which is located in the root directory of the theme defining the theme. Or place
<?php echo get_bloginfo ( 'template_url' ) . '/' ?>to give the theme URL or its links.
Now the sample code
<?php
//to get the template path
$template_path = get_bloginfo ( 'template_url' ) . '/';
//Uses:--- echo $template_path;
?>
<!-- To Get Html Default Language -->
<html <?php language_attributes(); ?>>
<!-- To Get The Html charset -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<!-- to get the title as per pagename and post name and also archive and front page -->
<title><?php wp_title ( '' ); if (is_home ()) { bloginfo ( 'name' ); echo ' - '; bloginfo ( 'description' ); } ?></title>
<!-- to get the theme defining style url -->
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" />
<!-- to get the pingback url -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!-- t oget the default wordpress header style and js -->
<!—sample style inside theme folder -->
<link href="<?php echo $template_path; ?>css/style.css” rel="stylesheet" />
<?php wp_head(); ?>
<!-- wordpress default body classes -->
<body <?php body_class(); ?>>
in this post, you have learned how to develop a custom header.php or common header for WordPress theme,
In our next post will learn how to define menus in functions.php and used them in frontend and make them dynamic.