ブログのみだとトップページだけ違うレイアウトというのは必要ないかもですが、
色んなページが含まれるwebサイトの場合はトップページだけレイアウトが違ったりしますね。
トップページだけ大きな画像を表示させたり。

ということで、トップページを作ろうー。

front-page.phpトップページのファイルはhome.php、またはfront-page.phpというファイル名、もしくはほかの名前でもOK。
とりあえずここでは、font-page.phpという名前のファイルを空のままFTPでアップロードします。

外観－テーマの編集から、front-page.phpを開きます。
真っ白なままですが、ここにテンプレート名を記述します。

<?php
/*
Template Name: フロントページ
*/
?>

分かりやすい名前であれば何でもいいですが、フロントページと書きました。

次に、page.phpの中身を全部コピーして、front-page.phpに貼り付けます。
※上で記述したテンプレート名の下に貼り付けて更新します。

固定ページ－新規追加画面で、トップページ用のタイトルを書いて更新します。
このタイトルは分かり易ければなんでもいいと思います。
TOPとかHOMEとかのタイトルだと分かりやすいかもですね。
※テンプレートは先ほど付けたテンプレート名を選びます。

設定－表示設定の画面で、フロントページの設定を固定ページにして、プルダウンからページを選択します。
さきほど固定ページに付けたタイトルを選択します。

この時点でサイトを表示させると投稿のタイトルが出ているので
これらの要らないものは、外観－テーマの編集画面に行ってfront-page.phpの中からタイトル部分を削除します。

また、トップページに必要なものを追加していきます。

<?php
/*
Template Name: front page
*/
?>

<?php get_header(); ?>

<main id="main" role="main">
<div class="container-fluid">
	<div class="custom-header">
		<div class="container">
		<div class="frontnewsBox">
			<ul>
			<?php dynamic_sidebar('header_area'); ?>
			</ul>
		</div>
		<!--//frontnewsBox -->
		</div>
		<!--//container -->
	</div>
	<!--//custom-header -->
</div>
<!--//container-fluid -->
	
<div class="container">
	<section>
	<div class="row">
		<div class="col-xs-12">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('top_area'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
	</div>
	<!--//row --> 
	</section>
	<!--//section-->
	
	<section>
	<div class="row">
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-2'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-3'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-4'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
	</div>
	<!--//row --> 
	</section>
	<!--//section-->
</div>
<!--//container --> 
</main>
<!--//#main -->
    
<?php get_footer(); ?>

ところどころに、sidebarのウィジェット入りになってます。
このサイトのトップページは複数のテキストウィジェットを配置して表示しています。
基本的には、ウィジェットでphpを使うことはできませんが、phpが使えるようになるプラグインもあるようです。