How to make WordPress theme header file

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

  1. The code or function <html <?php language_attributes(); ?>> is used in the starting HTML tag for the language of the site.
  2. <meta charset="<?php bloginfo( 'charset' ); ?>"> is used to get the HTML default charset.
  3. <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.
  4. <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.
  5. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> is used to get the pingback URL
  6. <?php wp_head(); ?> is used to get the default header portion as CSS some js of WordPress.
  7. <?php body_class(); ?> is used to define the unit body class for each page it also generated some default classes of WordPress body.
  8. 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

//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.

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.