Basic structure

Website with three separate sections displayed on iPhone

Author: Dawid Adach

-

    Basic structure.

    It's a good practice to divide into three sections: header, main, and footer.

    Site divided into three sections
  1. Let's create two new files header.php and 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:
  2. 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.

  3. Let's replace the code from the previous lesson in index.php with following the functions:
  4. 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.


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...