How to code the home page of a WordPress powered website

Let’s take a look at our home page design and its associative WordPress files. 

Header and Footer Files

Every website has a header and footer, and from a design perspective, they look same on every page of that website. So, it makes complete sense to put them in their own separate files so that we re-use them in other internal pages along with our homepage. 

WordPress allows us to create modular header and footer sections by letting us create header.php and footer.php files.

1) The header.php file contains all the markup that goes inside a typical website header. 

  1. HTML5 doctype, meta tags, stylesheet links
  2. The markup for displaying Logo and Navigation
  3. Typical header content that is present on every page of the website. For example, logo, navigation.

2) The footer.php file contains all the markup of typical footer portion of a website. 

  1. Any closed HTML tags that we opened in the header.php file. For example,</body></html>
  2. script tags
  3. Typical footer content that is present on every page of the website. For example, a copyright statement.

Creating the header and footer files is not mandatory, WordPress doesn’t force you to create them in any way. But it suggests you create those files for improving code modularity and reusability.

These header.php and footer.php files will be included inside every template file like index.php or front-page.php to render header and footer portions of the webpage. 

“Haha! Whenever there is a change in the header and footer of my client’s website, I used to edit every HTML file of the project. Now, I don’t have to go through that. Thanks to PHP and WordPress”.

Exactly! Code modularity is more a PHP feature. But WordPress takes it a step further with easy to use functions like get_header() and get_footer(). Yikes! Did I reveal the spoilers?

The front-page.php file for Static Home Page

When it comes to WordPress, it allows us to have two types of home pages.

  1. A Home Page with latest blog articles. Matt’s Website is the perfect example of a Home Page full of blog articles. Between, he is the founder of WordPress <3.
  2. A Static Home Page with sections like “our services”, “Our Team”, “App Features”. Did you saw the above design? It is a perfect example of a Static Home Page. 

WordPress uses  

  1. The front-page.php file for rendering a static home page 
  2. The home.php file for rendering a blog based home page

The header.php and footer.php files will be included inside the front-page.php file to render header and footer portions of the Homepage. The markup for the main content of the Homepage goes directly inside the front-page.php

Also, we are using the word “Static” for a reason. Once the content is finalized, the content like App Features, Services list etc. will stay same and rarely need any edits. So every time when someone visits our website’s homepage. They will stay the same. 

And this is the complete opposite of a Homepage with only the latest blog articles. Depending on how often an author publishes articles on the blog, the content of the website’s homepage is never the same. Get it?

Since our Dosth App website’s homepage is designed to showcase information about Mobile App with sections like “App Features”, “App Download” buttons and Since they are less likely to change for days to come, it comes under a “static page”. 

Let’s create them

Now, that you understand the responsibility of the above mentioned three template files, let’s create these files inside our nd-dosth theme directory ( wp-content/themes/nd-dosth ).

  1. header.php file
  2. footer.php file
  3. front-page.php file

After creating these three files, your theme directory contains the following files:

  1. index.php
  2. style.css
  3. functions.php
  4. header.php
  5. footer.php
  6. front-page.php
  7. screenshot.png

Let’s put some basic HTML code inside the header.php and footer.php files

Open up the header.php file and place the following code in it:


<!DOCTYPE html> 
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

Nothing much going on in the above HTML code. 

Although we have opened <html> and <body> tags, we did not close them. The closing </html> and </body> tags must be placed at the end of the webpage. The closing </html> tag marks the end of the webpage.

So, which template file holds the footer portion of a webpage?

“footer.php file”

Correct! So, open up the footer.php file and put the closing </html> and <body> tags in it.


   </body>
</html>

For now, We are just closing the tags that we opened inside the header.php file.

I can’t stress this enough. During WordPress theme development, it is quite common to forget to close an HTML element after opening it. This happens because we are working on multiple template files to render a single webpage. 

So, be alert.

Let’s deal with the front-page.php file

Open up the front-page.php file inside your code editor.

Almost every WordPress template file starts with a PHP comment explaining the purpose of the file. Sometimes it is mandatory, sometimes it is not. But having a comment at the opening of the every template file helps other coders who get access to these template files.

So type the following comment inside your front-page.php file.


<?php
/**
 * The front page template file.
 *
 * If the user has selected a static page for their homepage, this is what will
 * appear.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Dosth App
 */
	

The above comment is self-explanatory. It is saying what front-page.php file does.

Next, since every HTML web page starts with a Doctype, you have to include the header.php file just after the above comment.  

In a tradition PHP project, you have to use require_once() or include() functions to include contents of one file into another. But WordPress gives us the following handy functions to include one file inside another. 

  1. get_header() is used to include header.php file inside other template files like index.php, front-page.php, page.php etc.
  2. get_footer() is used to include footer.php file inside other template files like index.php, front-page.php, page.php etc.
  3. get_template_part() is used to include a particular chunk of content markup or PHP code inside all the template files. 

WordPress gave these handy functions a fancy name called Template Tags.

Introducing Template Tags

Don’t panic. It is just a buzzword. Simply put, A template tag is a PHP function that instructs WordPress to “do” or “get” something.

For example, get_header() template tag gets the header.php file from the active theme and includes it inside other template files. 

Now, WordPress ships with a ton of template tags for every purpose and only some of the template tags deal with the files. The lot of them pull and display tiny pieces content from the database. In fact, most of the functions that you are going use inside the template files are template tags. 

Here is the full list of template tags from the WordPress Codex:

https://codex.wordpress.org/Template_Tags

Important Realization: You can use the template tags only inside the template files. That means you can not use the template tags inside functions.php or any other custom PHP code files that you are including inside functions.php file.

Back to the front-page.php file

So to include header.php file inside front-page.php file, call get_header() function just after the PHP comment and end the PHP tag.


<?php
/**
 * The front page template file.
 *
 * If the user has selected a static page for their homepage, this is what will
 * appear.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Dosth App
 */
 
 get_header();
 ?> 

Now, we’ll place some dummy HTML markup just to test if WordPress is front-page.php for our Homepage. So, type the following text after the PHP end tag.<h1>This is home Page!</h1>

And finally, after the dummy text, 

  1. open the PHP tag
  2. Include the footer.php by calling get_footer() function call. 
  3. Close the PHP tag

The final front-page.php file looks like this:


<?php
/**
 * The front page template file.
 *
 * If the user has selected a static page for their homepage, this is what will
 * appear.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Dosth App
 */
 
 get_header();
 ?> 
 <h1>This is home Page!</h1>
 
 <?php get_footer(); ?>

HTML and PHP get along well. You can open and close PHP tags unlimitedly. 

Alright, it is time to test our front-page.php file. Go ahead and open up the Homepage of our Website in the browser. If you are using WAMP omit “:8888″ section from the URL.

http://localhost:3000/dosth/

Ah! WordPress is indeed using front-page.php for the home page. 

If we take a look at the page source, we can also see the markup from header.php and footer.php files

Now, let’s map the above Homepage’s page-source with the files from our nd-dosth theme.

See that? This is how WordPress stitches the final webpage together and sends it to the browser.

Now, You have to tell WordPress which type of homepage you are going after. By default, WordPress uses front-page.php to display the latest blog posts. But we need a Static Homepage. You can change the default WordPress behavior by changing a simple radio button setting inside the WordPress Admin Settings panel and you’ll learn how to do this in the next chapter.