WordPress Custom Header and Footer


In this article, we going to create WordPress Custom Header and Footer. In the previous article, we had created a simple WordPress theme that contains index.php and style.css file. If you are creating your own theme then you really need to create custom header and footer. The way where yo achieve that is to create header.php and footer.php file.

WordPress Custom Header and Footer

So now we will first know about header.php and footer.php files. If you haven’t seen the previous tutorial then must read it first. Go to the previous article.

header.php

Header.php is just a file which allows you to create your own header which contains blog or website title, and description. if you don’t have the header.php file in the theme hierarchy then WordPress will choose default header for the theme. WordPress header is just a simple piece of code.

In the previous article, we had created a simple theme with default header and footer. So, we will replace this default header with our own header and footer.

Create a header.php file in the theme root folder. Make use you used exact header.php file except using headers.php or head.php file. If you do this files are not recognized in WordPress theme hierarchy. So keep in mind create an exact header.php file name.

Now create a simple code in a header.php file.

Insert simple HTML  <!DOCTYPE HTML>  and document language  <html <?php language_attributes(); ?>> Displays the language attributes for the <html> tag. The choice of language is depends on the $doctype. Then create head tag in that add meta charset. <meta charset="<?php bloginfo('charset'); ?>">  The default charset used by wordpress is “UTF-8”.

Now create meta name viewport to create responsive pages. Then specify website or blog title using  <?php bloginfo('name'); ?>  php bloginfo function.  bloginfo('name')  Function display the site title. After that create wp_head() Function. Put this function just before the </head> tag. wp_head() Function breack many plugins. It is generally use for add elements like style, script and meta tag.

After that add <body> part of the page.

In the <body> part we had added body_class() Function. This function gives body element classes, so the author can change their sites effectively with CSS.

Afterward, Create <header> tag with class site-header. In this header, tag creates the title in the h1 tag. we will wrap title in an anchor tag. In href attribute, we will specify our site URL. WordPress will provide you a special function home_url() that navigate you to the home page. Then add  bloginfo('name');  Function. Insert h3 tag and add site description. The  bloginfo('description'); basically displays tagline of the website.

Footer.php

Footer.php basically use for creating footer element. If you create a footer.php file then this file will replace with the default WordPress footer. In the header.php you will see there is not any closing </body> and closing </html> tag. You need to Insert this closing tag in the footer.php file.

So now, We will create a custom footer

create footer tag with site-footer class. Then create paragraph tag. In paragraph tag create php bloginfo(‘name’) function that returns website or blog title. In the same line create copyright symbol with date PHP functions. So we will just add echo date(‘Y’) function that displays year.

Just before closing </body> tag add wp_footer() function. This function is eqaul as wp_head() fuction because this function are action hook that dynamacally add code in the theme.

 That’s it.

I hope you will understand better WordPress Custom Header and Footer. In the next article, we will link style and script files to WordPress theme and style our theme. So don’t miss this tutorial.

We will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *