Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Basic structure

by Dawid Adach,

Final result preview
Live preview

Basic structure.

We will divide our site into three sections, header, main, and footer.

Site divided into three sections

Let's create 2 new files header.php and footer.php. index.php which we have created before will take care of main part. Now fill files with content as below:

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') - prints out our blog title.

wp_head() - this function is a placeholder for custom code provided by different plugins. If the certain plugin requires some additional code in the header, it will add in this placement. This makes our template compatible with 3rd party plugins.

wp_footer() - similar to wp_head(), this function makes our template compatible with plugins. Whenever certain plugin requires adding some code (usually java script) to our template, it will be added in the same place where we put wp_footer() function.

In order to combine header.php and footer.php, we will use another two functions from WordpPress. Let's replace code from the previous lesson in index.php with following functions:

index.php

<?php get_header(); ?>
<?php get_footer(); ?>
             

Such a structure allows us to avoid duplication of code. WordPress supports multiple "post type" like post, page, gallery etc. Splitting header and footer apart from content save us a lot of code and time. Regardless of the "middle" part of the website, header and footer will always remain the same.

Lesson summary

We have created 2 new files, header.php and footer.php which are loaded on top and the end of the index.php respectively.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous lesson Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise class systems for the biggest companies within domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 1

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more