Author: Dawid Adach
Free live lesson
- Let's create two new files
footer.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:
It's a good practice to divide into three sections:
<!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>
<?php wp_footer(); ?> </body> </html>
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
index.php, we will use two other functions from WordPress.
<?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.
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: