Creating header and footer for each pages and posts inside your code is little repetitive and takes relevant amount of time because you will have to copy and duplicate header every time you include some content in your website.
The good part is, that WordPress allows you to create custom header that can be applied to all page & post templates by including the created header or footer file in header & footer of templates.
So, to include header and footer to all templates, you will have to create a separate file called header.php and footer.php inside the main folder where your custom theme file is located
Creating Header & Footer files
- Inside your custom theme folder, (the folder where you created index.php file located at “wp-content/themes/your-custom-theme” ), create a new file named header.php & footer.php
- Customize the header.php file to define the layout and content of your global header. This typically includes elements like the site logo, navigation menu, search bar, and any other header content you want to include.
- Save the header.php file with your desired header layout and styling
Adding the created header & footer to pages & post template
After creating header and footer.php files and designing depending on your desired format, you got to insert inside posts and pages templates, so that it will be displayed in every where in your website.
- Open the template files for pages and posts in your theme folder (e.g., page.php and single.php) with your desired code editor app. Mine is VS code download it from here.
- Locate the header part on your file (usually located at the top of the code)
- Add the code provided here at the top of the code. If you have already coded hardly on each pages or you found an HTML template with header in all pages, replace the header part with:
<?php get_header(); ?>or<?php get_footer(); ?> - Save the template files after making the changes.
Verify That Header & Footer is Displayed on Page & Post Templates
- Navigate to your WordPress dashboard and visit different pages and posts on your website
- Ensure that the header content defined in header.php is displayed consistently across all pages and posts
- Make any necessary adjustments to the header.php file or template files to achieve the desired header layout and functionality
If you want to use another file name rather than header.php & footer.php,
Remember, you can give your global header file any name you prefer, as long as you include it consistently in your template files. For example, if you name your global header file “global-header.php“, you would include it in your template files using the following PHP code snippet:<?php get_template_part( 'global-header' ); ?>
This code snippet instructs WordPress to include the contents of the “global-header.php” file in the respective template file.
Just make sure to replace “global-header” with the actual name of your header file without the “.php” extension.
Load CSS inside header part of the website
If you have worked with html and external css, the style.css file is integrated in the head part of the html file like <link rel="stylesheet" href="style.css">. in WordPress, there is a function called wp_head(); that can be used in head part of the html file. This way, WordPress will be in control of the head part of the page. This is very essential for let’s say in the future you want to install plugins & the plugins want to integrate their own CSS on the pages. so calling wp_head() tells WordPress to load what ever is in the header file.
Simply call wp_head(); inside the head part of the header.
<html> <head> <?php wp_head(); ?> </head> <body> <h1>The content of website here</h1> </body> </html>
To load up our CSS we add functions.php file (which is used to add functionalities like adding hooks & actions) inside the main-folder to programmatically link our CSS.
What is function.php ?
functions.php file is special file helps to communicate with WordPress. It is like a toolbox for customizing your theme’s functionality. It’s where you can add PHP code to modify how your theme works, like adding new features, styles, or functionality to your website without changing the core WordPress files. So, here are steps to follow to link your style & script files with your website header.
- Create a
custom_function() - Inside the function call WordPress predefined function called
wp_enqueue_style();which takes your custom name & the url for the file (CSS) as input like this:wp_enqueue_style('any_custom_name', get_stylesheet_uri()); - In WordPress there is a function called
add_action();which takes the moment of the function to run & Name of our custom function. So, you have to call your function like thisadd_action('wp_enqueue_scripts', 'custom_function');
Finally it will look something like this:
function custom_function() {
wp_enqueue_style('any_custom_name', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'custom_function');
The get_stylesheet_uri() is wp function used to load style.css file from current folder
In add action function the wp_enqueue_scripts function used to load up CSS, JS & other files. Adding the second function as our own function name, we can load up our custom CSS & JS.
Loading up the top admin bar in the front-end
Top admin bar is loaded up with footer part of the WordPress content when you call wp_footer() in footer.php file
I order to actually integrate all the parts of the header body and footer, if you already know working with html code, the format will look like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- The body content here -->
</body>
</html>
Using this structure, you have to move the upper part which is before closing </body> tag to header.php and instead of meta info, call wp_head(); function <head> inside the </head> tag like this:
<!DOCTYPE html>
<html lang="en">
<head>
<?php wp_head(); ?>
</head>
<body>
<h1>Hello, This is from header.php</h1>
The body part will be written in each template after calling get_header(); function which will fetch the header.php file that contains wp_head(information).
Each page content template will look something like this
<?php get_header();
while(have_posts()){
the_post();
?>
<h1><?php the_title() ?></h1>
<p><?php the_content() ?></p>
<?php }
get_footer();
?>
The same goes to footer.php file
<h2>Hello this is from footer</h2> <?php wp_footer(); ?> </body> </html>
