How To Create a WordPress Custom Theme?

In this article and video about WordPress custom theme development, I will explain what you need to create a WordPress theme, and I will cover in this article and video all these questions:

• Why do you need a custom theme?
• What is the basic structure of a WordPress Theme?
• What is the content of the WordPress Theme style.css?
• How to create the theme photo?
• What does the WordPress website contain?

I will explain all you need to define a WordPress custom theme, as explained in the WordPress Documentation. you will have all you need to start developing your own WordPress custom theme from scratch (all you need to start becoming a WordPress developer)

What is the basic structure of a WordPress Theme?

a lot of the tutors who answer this question will say you need 2 files only the style.css and the index.php, but these are the minimum requirements I will show you more than that to start really as an organized ready to advance in WordPress development.

What is the content of WordPress custom theme style.css?

you will need this basic information for your custom theme, written in a comment at the top of the style.css file

/*
Theme Name: Basic WordPress Theme
Text Domain: Basic WordPress Theme
Theme URI: https: //www.geminitutorials.com/
Author: Tokyo Academics
Author URI: https: //www.geminitutorials.com/
Version: 1.0
Description: Basic Custom WordPress Theme Designed And Developed By Emad Zedan.
Tags: Fancy Design, Responsive, Animated, Interactive, custom-header, custom footer
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

How to create the WordPress custom theme photo?

you will need a photo editing program to do that, anything will do the job, the theme photo is (1200px of width and 900px in height), try to make a good design for your theme, and you can take ideas and free stock photos from this website:

https://www.freepik.com

This is how the “Basic WordPress Theme” looks on the themes page under the appearance menu:

What does the WordPress website contain?

there are some starter templates that you can benefit from like:

Including most of the basic JavaScript and CSS you will need in any website:

functions.php content:

<?php

//this if statement enables using sessions in PHP
if (!session_id()) {
	session_start();
}

require get_template_directory() . '/inc/function-frontend-styles.php';
require get_template_directory() . '/inc/function-frontend-scripts.php';
require get_template_directory() . '/inc/function-theme-support.php';

function-frontend-styles.php:

<?php
// Styles=========================================
function gemini_tutorials_register_styles()
{
	//Reset All CSS for All Browswers Defaults
	wp_enqueue_style('gemini-tutorials-reset', "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css", array(), '2.0', 'all');
	//Font Awesome
	wp_enqueue_style('gemini-tutorials-fontawesome', "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css", array(), '5.13.0', 'all');
	//Bootstrap CSS 4.6.1
	wp_enqueue_style('gemini-tutorials-bootstrap', "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css", array(), '4.6.1', 'all');
	//https://animate.style
	wp_enqueue_style('gemini-tutorials-animate', "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css", array(), '4.1.1', 'all');
	//Theme Custom CSS
	wp_enqueue_style('gemini-tutorials-css', get_template_directory_uri() . "/assets/css/css.css", array('gemini-tutorials-reset', 'gemini-tutorials-bootstrap', 'gemini-tutorials-fontawesome', 'gemini-tutorials-animate'), '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'gemini_tutorials_register_styles');
// End of Styles==================================

function-frontend-scripts.php:

<?php
// Javascript=====================================
function gemini_tutorials_register_scripts()
{
	//All You Need From jQuery and bootstarp
	wp_enqueue_script('gemini-tutorials-jquery', "https://code.jquery.com/jquery-3.6.0.min.js", array(), '3.6.0', true);
	wp_enqueue_script('gemini-tutorials-bootstrap', "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js", array('gemini-tutorials-jquery'), '4.6.1', true);
	wp_enqueue_script('gemini-tutorials-jquery-ui', "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", array('gemini-tutorials-jquery', 'gemini-tutorials-bootstrap'), '1.12.1', true);
	wp_enqueue_script('gemini-tutorials-jquery-ui-touch-punch', "https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js", array('gemini-tutorials-jquery', 'gemini-tutorials-bootstrap', 'gemini-tutorials-jquery-ui'), '0.2.3', true);
	wp_enqueue_script('gemini-tutorials-jquery-easing', "https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js", array('gemini-tutorials-jquery', 'gemini-tutorials-bootstrap', 'gemini-tutorials-jquery-ui', 'gemini-tutorials-jquery-ui-touch-punch'), '2.2.1', true);

	//Library for easy cookies setting and getting: https://github.com/js-cookie/js-cookie
	wp_enqueue_script('gemini-tutorials-cookie', "https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js", array('gemini-tutorials-jquery', 'gemini-tutorials-bootstrap', 'gemini-tutorials-jquery-ui', 'gemini-tutorials-jquery-ui-touch-punch', 'gemini-tutorials-jquery-easing'), '2.2.1', true);

	//Theme Custom javascript
	wp_enqueue_script('gemini-tutorials-js', get_template_directory_uri() . "/assets/js/js.js", array('gemini-tutorials-jquery', 'gemini-tutorials-bootstrap', 'gemini-tutorials-jquery-ui', 'gemini-tutorials-jquery-ui-touch-punch', 'gemini-tutorials-jquery-easing', 'gemini-tutorials-cookie'), '1.0.0', true);
}

add_action('wp_enqueue_scripts', 'gemini_tutorials_register_scripts');
// End of Javascript==============================

function-theme-support.php:

<?php
// Theme Support =================================
function ta_theme_features()
{
	//Enable Post Thumbnail
	add_theme_support('post-thumbnails');
	//Add Your Own Custom THumbnails Sizes
	add_image_size('postThumb', 600, 300, true);
	add_image_size('tutorThumb', 60, 60, true);
	//Define Logo In The Custimze Sidebar
	$defaults = array(
		'height'               => 70,
		'width'                => 200,
		'flex-height'          => true,
		'flex-width'           => true,
		'header-text'          => array('Basic WordPress Theme', 'Starter Template'),
		'unlink-homepage-logo' => true,
	);
	add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'ta_theme_features');
// End of Theme Support ==========================

Code to link to the homepage and any other page in the website:

<a class="nav-link" href="<?php echo site_url(''); ?>">Home</a>
<a class="nav-link" href="<?php echo site_url('blog'); ?>">Blog</a>
<a class="nav-link" href="<?php echo site_url('inner-page'); ?>">Inner Page</a>

Code to import a PHP template into any page into the website:

 <?php get_template_part('template-parts/section-to-import'); ?>

Code to customize the logo of the website and use it in the customize sidebar: (use it after inserting the theme support code)

<a class="navbar-brand" href="<?php echo site_url(''); ?>">
	<span class="custom-logo-link">
        	<?php
                	if (function_exists('the_custom_logo')) {
                        	the_custom_logo();
                        }
                ?>
	</span>
</a>

Basic Code of any WordPress page: (index.php=>blog and front-end=>homepage)

<?php get_header(); ?>
<?php the_content(); ?>
<?php get_footer(); ?>

404.php page:

<?php get_header(); ?>
<div class="container text-center p-5">
      <div id="page404">
            <div class="page404Content">
                  <h1 class="page404Title">404</h1>
                  <h3 class="font-weight-bold">
                        Oops, This Page Could Not Be Found!
                  </h3>
                  <p style="font-size:18px;color:#636363;">
                        The page you are looking for might have been removed, had its name changed,<br /> or is
                        temporarily unavailable.
                  </p>
                  <a class="white-button" href="<?php echo site_url(); ?>">Take Me Home</a>
            </div>
      </div>
</div>
<?php get_footer(); ?>

Also header.php and footer.php

Read More:

Create a WordPress Custom plugin

On Our Blog: How To Create Basic WordPress Plugin (GDPR Notice Plugin)?

Feel Free to bookmark my website to keep it as a reference for your work in the future.