Creating your first WordPress theme – Part 3 – Important files

Hello all!

Let’s continue with our WordPress series. Today I’ll write about the main files in a WordPress theme.

First files

Above we have some files that are basic for your new theme:

index.php

This file is the root file, the home page. When you open your WordPress website it’ll get this file content. Is can also be renamed to home.php, not problem. WordPress will understand that.

header.php

As we saw in the first post about WordPress themes, this is the file you’ll have your header content. Things like navigation, logo, users welcome messages and more, you’ll find in this file.

footer.php

The same think with header.php file, but with footer content. Here you get store signatures, quick links, policy terms and more.

style.css

Do you remember this file? This file is used to tell to WordPress about your theme, like name, description, author details and more. You can get some example about fill this file in the first post.

Post Files

As said WordPress is based on posts and pages, so everything you need to manage is one of this 2 types.

single.php

This is the basic file that will be renderer if you are talking about 1 (just one) post. For example, if you have a post called “My first post”, when is visit it the WordPress will render the “single.php” file. Inside it you will work with some functions we already know, like:

<?php the_post() ?>
<h1><?php the_title() ?></h1>
<p><?php the_content() ?></p>

single-post-type.php

As we saw on the first post about WordPress themes, we can create custom Post Types. For example, we can create a custom post type called “Services”, to list all services the company does. So, if our custom post type is called “Services” and we want to show one service we can create the single-services.php file.

If you want to show all services the company does we can do that where you want. For example, we can have the “About Us” page, with one title and content. In the page template we can call the post type services and list all of them that.

Page Files

As posts, pages have their own files to render too. You can customize files or use the default.

page.php

This file will be called if you don’t have more specific page files. Let’s go back to the “About Us” page. If we don’t insert the Template Name inside some file, WordPress will search for the page.php file.

custom.php

As we saw, you can add the code above inside a file (you choose the filename) to be linked to a specific page.

<?php
/*
 * Template Name: About Us
 */
?>

page-id.php and page-slug.php

You can link a file to a page you’ve created using other 2 ways. You can get the page ID and create a file using it, or you can use the page slug for that too.

Using our “About Us” page. Let’s assume it has the ID 67 and the slug “about-us”. We can reference this page two ways: creating page-67.php or creating page-about-us.php. I don’t like to use this last named style. A slug can change and your work will increase. I prefer use “Template Name” way or “page-ID.php”.

Searching with WordPress

WordPress has a built in search function. What you must have is a text input tag named “s”, the form action to the home page and the form method to GET. Just that.

searchform.php

To do the search operation you can put the form where you want. Using best practices, we use to create a new PHP file named searchform.php. Inside it we can insert, for example, the follow (you can customize too):

<?php // searchform.php ?>    
<form method="get" action="<?php echo home_url('/') ?>">
    <input type="text" placeholder="Procurar" name="s" id="query" />
    <input type="submit" value="Search" />
</form>

Ok, but how can I insert the form in my header.php for example? You can require or include it but there is the function called get_search_form that ECHO the form inside the searchform.php file.

<?php // Inside the header.php or the file you want ?>
<?php get_search_form() ?>

Search results and search.php

To show the search results is easy. You must only create the search.php file and work as a page file or custom post file. Let’s write one file example.

<?php get_header() ?>

<h1>Search</h1>
<h2>Search results for "<?php echo get_search_query() ?>":</h2>
<?php while (have_posts()) : the_post() ?>
    <h3><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
    <a href="<?php the_permalink() ?>">Go to post</a>
<?php endwhile; ?>

<?php get_footer() ?>

404 Error File and Others

You can customize your 404 error too. It’s simple, just creating the 404.php file and customize it the way you want.

WordPress is a very large CMS tool and you can do even more with it. There are a lot of files we didn’t write about in this post. You can get more information about them in the “WordPress Template Hierarchy” page, that I’m talking about above.

These non covered files are about categories, taxonomy, tags, authors, dates, archives, attachments, comments and more. I hope write a post about comments in WordPress and will update the link here.

WordPress Template Hierarchy

WordPress has a very good page to explain about theme’s files. I suggest you read the WordPress Template Hierarchy page for more information. This page has a very good graph that I reference above.

You can get a snapshot about WordPress themes files in the image below.

Wordpress Template Hierarchy

Thanks for reading!

Published by

Junior Grossi

senior software engineer & stutterer conference speaker. happy husband & dad. maintains Corcel PHP, elePHPant.me and PHPMG. Engineering Manager @ Paddle

Leave a Reply

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