WordPress Theme Development Tutorial. Part #2

WordPress Theme Development Tutorial. Part 1

Hi guys! Today we are going to talk about partials.

To add beauty and organization and easyness of editing to our theme we can divide code into smaller pieces – partials. For example, we can create header.php and place there all the code for the header of every of our template files (post or page etc.).

Common template partials include:

  • header.php
  • footer.php
  • sidebar.php

So, let’s create these files.

The simplest header.php can be like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <?php wp_head(); ?>
</head>
<body>
The only thing you should do to call a functon get_header(); in the beginning of index.php.
I have to explain one more thing: wp_head(); in header file. We are calling this function that WordPress load all it needs in header section. Such as propper way to include styles and scripts. But about this later.
The same thing we are going to do with footer.
It contains now:
<?php wp_footer(); ?>
</body>
</html>
And add get_footer(); function into index.php of course.
We also can add get_sidebar( ); function. So, our index.php can be like this:
<?php 
    get_header( );
?>
    <?php
    if ( have_posts() ) : 
        while ( have_posts() ) : the_post();
            the_content();
        endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    ?>
<?php 
    get_sidebar( );
    get_footer( );
?>

Leave a Reply

Your email address will not be published. Required fields are marked *