Home Tutorials Theme Development Lesson #2: WP Theme Layout and Template Files

Lesson #2: WP Theme Layout and Template Files

Author

Date

Updated on

Category

Now that we’ve gotten past the structure and terminology of themes, this lesson will go into the depth of WordPress template files and the layout of each custom page.

This article is a follow-up of my WordPress theme tutorial series. If you haven’t read Lesson #1, I would suggest you read that first to clear some concepts. Otherwise, you will not understand the terms used in this tutorial.

Diving deep into the WP website’s layout

Remember that each page of your theme is made up of multiple WordPress template files. The same goes for the front or homepage’s layout:

index template

* header.php template file: Your blog’s title and description sit in this file. They usually remain the same throughout the whole blog. The header file also contains title tag and meta description that you can utilize for SEO purpose. The key-terms of your WordPress page are also mentioned here.

header-template

* index.php template file: This crucial component of layout contains your web page’s title and content (text and images of each entry). Like other parts of theme, it uses WordPress functions that have already been coded in the backend which saves a lot of time and effort. All other files are called through the function <?php get_ (); blah> of CMS WordPress in order to be included in the front-page of theme.

index-template

* sidebar.php template file: Create a neat look for your theme by using the sidebar. WordPress methods are used in this code to display your creative content sorted in archives or categories in the form of lists.

sidebar-template

Note: The Sidebar does not need to be on the right side of the layout. The example I’m using is a typical two-column blog layout.

* footer.php: Like the header.php template file, the footer usually does not change from one page to another. The code in this file can be modified accordingly to include copyright information, CEO’s message, and company’s history.

footer-template

Now let me explain why index.php is red in the diagram above. Index.php is red to indicate that it will change depending on which page of the blog you are on. The layout of the website will remain intact though.

If you were on a single post page then it would consist of these four template files: header.php, single.php, sidebar.php and footer.php.

You can go to WordPress Theme Tutorial Series in case you missed something.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

10 Ways To Speed Up Post-Building Process With WordPress Gutenberg Themes

There’s no need to explain why I decided to start with Gutenberg-supporting products. All in all, Gutenberg is a well-known and long-awaited product. It is more...

HostPapa Linux Hosting: Reliable, robust and fast

As a small business owner, it can be challenging to find the right hosting provider for your website. HostPapa distinguishes itself from other web...

Are You Making These Costly Mistakes When Outsourcing?

In today’s world, it is almost impossible to find a small business where everything about the business process is done in-house. For most small...

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

Recent comments