This article has tried to put in an effort to guide the readers the basic of building a WordPress theme. A WordPress theme simply changes the design of the website, generally including its layout. There are thousands of free WordPress theme that can be found in WordPress.org Theme Directory, in which many sites use custom themes.
Templates are the files which control how a WordPress website will be displayed and are the basic files of WordPress theme building. These files generally work together to create the design and functionality of a neat WordPress theme. WordPress also gives the power to allow us to define as few or as many templates as we like to build a single WordPress theme. Other valuable information can be found at Theme Development.
To kick off by building a basic WordPress theme, we will need some basic and important template files. These files are listed below and are their roles are defined with proper examples.
index.php
style.css
single.php
archive.php
page.php
404.php
functions.php
comments.php
index.php
This page displays the Post post types if there is an absence of other template files. This page is used to display a page when queries are not specifically matched. For example, it simply puts together the home page when there is no home.php file.
<?php
get_header();
if ( have_posts() ) :
?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
while ( have_posts() ) :
the_post();
get_template_part('template-parts/content', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
get_footer();
style.css
This file basically provides the basic details about the theme in the form of comments at the starting of the page. Problems may arise if two or themes have the details of the same comment listed in headers. Even if the theme is copied from an existing one, make sure to change the information.
/* Theme Name: Getting started with the basics of WordPress Theme Building Theme URI: https://cpm.com.np Author: Ajay Tamang Lama Author URI: https://lamablog.com.np Description: Basic WordPress theme for theme building tutorial Version: 1.0.0 */
single.php
The single.php template is a basic file which should be included while creating a theme. This file generally presents posts/articles that are created and also fetches the contents of the article along with header.php, comments.php and footer.php. The template file also displays: comment list, comment form, navigation links in the previous and next posts.
<?php /** * The template for displaying all single posts and attachments */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php // Start the loop. while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', get_post_type() ); // End the loop. endwhile; ?> </main> </div> <?php get_footer(); ?>: 1.0.0 */
archive.php
The archive template is used for querying a category, author or date. Simply put, this file comes before index.php in the WordPress Template Hierarchy to display category, author, and date. WordPress will use index.php if an archive.php file doesn’t exist. One may create a new template file to further customize these archive views.
Note: This template will be overridden by author.php, category.php, and date.php for their respective query types.
<?php
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
get_template_part('template-parts/content', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
</div>
<?php
get_footer();
page.php
This page.php file is used for displaying all pages. This template displays all pages by default. Please note that this is the WordPress construct of pages and that other ‘pages’ of ones WordPress site may use a different template.
<?php get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main"> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', 'page' ); if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; ?> </main> </div> <?php get_footer();
404.php
Even in the best websites, visitors may encounter errors which might be due to out-of-date posts, that has been linked inside a page of another website (After the deletion of original post). Clicking on a link to a missing page can result in web servers sending error messages. For example: 404 Not Found. WordPress automatically uses 404.php file if any Page/Post Not found error occurs.
<?php get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'basicWP' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'basicWP' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'basicWP' ); ?></p> <?php get_search_form(); ?> </div> </div> </div> </div> <?php get_footer(); ?>
functions.php
Simply put, this file is used by WordPress themes which normally acts as a plugin and can be loaded (automatically) in both admin and front-end pages of a normal WordPress site. This file can also be used to add functionality and features including actions and filters, enabling post thumbnails, navigation menus and post formats.
<?php
//To set featured image
add_theme_support( 'post-thumbnails' );
//function to include css and javaScript
function demo_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/custom.css' );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'demo_resources' );
comments.php
comments.php template is used for displaying comments. This template displays the area of the page that contains both the comment form and the current comments.
<?php
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="comments-area">
<?php
if ( have_comments() ) :
?>
<h2 class="comments-title">
<?php
$basicWP_comment_count = get_comments_number();
if ( '1' === $basicWP_comment_count ) {
printf(
esc_html__( 'One thought on “%1$s”', 'basicWP' ),
'<span>' . get_the_title() . '</span>'
);
} else {
printf(
esc_html(_nx('%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $basicWP_comment_count, 'comments title', 'basicWP' ) ),
number_format_i18n( $basicWP_comment_count ),
'<span>' . get_the_title() . '</span>'
);
}
?>
</h2>
<?php the_comments_navigation(); ?>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
) );
?>
</ol>
<?php
the_comments_navigation();
if ( ! comments_open() ) :
?>
<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'basicWP' ); ?></p>
<?php
endif;
endif;
comment_form();
?>
</div>
Conclusion
The above-mentioned template files are the basic of WordPress theme building. We can add as many template files as we like that are required while creating themes. By building our own WordPress theme, it will give us an opportunity to put our expertise with HTML, CSS, and PHP to work. It helps one’s creative design and ideas contribute to his/her own WordPress theme by adding the touch of uniqueness and versatility.
