How to code Wordpress theme from zero - Part 3

Adding sections to page

29) Go to page.php and copy all code. Go to content-template.php and paste it under comment. All code is:

<?php

/*
Template Name: Contact Me page template
*/

?>

<?php get_header();?>

<div class="container">

<h1><?php the_title();?></h1>

<?php get_template_part('includes/section', 'content');?>

</div>

<?php get_footer();?>

After h1 tag add this

<div class="row">
   <div class="col-lg-6">
      This is for contact form.
   </div>

Then cut include part line of code and paste it to second column.





   <div class="col-lg-6">
   <?php get_template_part('includes/section', 'content');?>
   </div>

</div>

Now the all code is:

<?php
/*
Template Name: Contact Me page template
*/
?>

<?php get_header();?>

<div class="container">

<h1><?php the_title();?></h1>

<div class="row">
<div class="col-lg-6">
This is for contact form
</div>
<div class="col-lg-6">
<?php get_template_part('includes/section', 'content');?>
</div>
</div>
</div>

<?php get_footer();?>

Go to Contact Me page.

30) Create new file and save it as header-2.php. Go to front-page.php and add the second part of name, in this example it's two.

'two' 

to get_header function.

All code is

<?php get_header('two');?>

<div class="container">

<h1><?php the_title();?></h1>

<?php get_template_part('includes/section', 'content');?>

</div>

<?php get_footer();?>

Go to Home page and refresh it.

31) Go to themes folder and create new new file and save it as main.css.

32) Go to functions.php and copy and paste next code under the second function in load_css function.

All code in functions.php is:

<?php 

// to enque stylesheets 
function load_css() {
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');
wp_enqueue_style('bootstrap');

wp_register_style('main', get_template_directory_uri() . '/css/bootstrap.css', array(), false, 'all');
wp_enqueue_style('main');
}

add_action('wp_enqueue_scripts', 'load_css');

function load_js() {
wp_enqueue_script('jquery');

wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
wp_enqueue_script('bootstrap');
}

add_action('wp_enqueue_scripts', 'load_js');

33) Important thing to do before we go on. Go back to front-page.php and in get_header function remove 'two'. So it can call our prime header.

Now code in front-page.php is

<?php get_header();?>


<div class="page-wrap">
<div class="container">

<h1><?php the_title();?></h1>

<?php get_template_part('includes/section', 'content');?>

</div>
</div>

<?php get_footer();?>

Go to Users -> Your Profile and scroll down to Toolbar and un check the box to remove admin bar.

34) Go to header.php and under the opening body tag add header tags.

<header>


</header>

35) Go to main.css and add

header {
background-color: black;
width: 100%;
height: 120px;

}

Go to front-page.php and around div container add section tag with class page wrap.

<?php get_header();?>

<section class="page-wrap">
<div class="container">
<h1><?php the_title();?></h1>
<?php get_template_part('includes/section', 'content');?>
</div>
</section>

<?php get_footer();?>

Then go to main.css and add

.page-wrap {
padding: 2rem 0;

}