Author: Dawid Adach
- Let's create two new files
header.phpandfooter.php. The file index.php which we have created before, will take care of main part. Now fill the two other files with content as below: - Let's replace the code from the previous lesson in index.php with following the functions:
Basic structure.
It's a good practice to divide into three sections: header, main, and footer.
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
<?php bloginfo( 'name'); ?>
</title>
<?php wp_head(); ?>
</head>
<body>
footer.php
<?php wp_footer(); ?>
</body>
</html>
New functions
We used 3 WordPress functions:
bloginfo( 'name')- this prints out our blog title.
wp_head()- this function is a loader for custom code provided by different plugins. If a certain plugin requires some additional code in the header, it will add in here. This makes our template compatible with 3rd party plugins.
wp_footer()- similar to wp_head(), this function makes our template compatible with plugins. Whenever a certain plugin requires the addition of some code (usually java script) to our template, it will be added in the same place where we put the wp_footer() function.
In order to use header.php and footer.php in index.php, we will use two other functions from WordPress.
index.php
<?php get_header(); ?>
<?php get_footer(); ?>
Such a structure allows us to avoid code duplication. WordPress supports multiple "post types" like post, page, gallery etc. Splitting the header and footer apart from the content saves us a lot of code and time. Regardless of the "middle" part of the website, the header and footer will always remain the same.
Lesson summary
We have created 2 new files: header.php and footer.php, which are loaded into the top and the bottom of the index.php page respectively.
Previous lesson Download Next lesson
Spread the word:
