There are many free (and paid) themes available on WordPress to choose from that will aid in the running of a website. Unfortunately, finding one that can fit the exact match and functionality required can be the difficult part. Creating a custom theme would be the way to go. However, for a beginner this can become an overwhelming task.

A basic understanding of HTML, CSS & JavaScript can be a great benefit. However, simply following the steps in this tutorial will be a huge benefit. By the end, you will have a better understanding of the basic framework required to create a theme for WordPress.

1. Structure the theme

WordPress is structured in such a way where everything that is done in WordPress is stored in the wp-content file. Everything outside of this is the core code to make WordPress as a whole functional and you don’t want to mess with that. The theme folder is where all the installed themes are stored. Create a new folder in this folder and give it a conventual name such as starter.

Create the following files and save them in the folder recently created:

• style.css – responsible for the theme styles.
• index.php – main file for the theme that contains the main code and where the other files will be included.

These specific files are the bare bones for any theme to function and alerts WordPress that the theme exists. To fully understand the themes’ file structure, include the remaining files:

• functions.php – contains the functions to further enhance the theme functionality. This includes logos, menus, colour, thumbnails, scripts and stylesheets.
• header.php – contains the code for the header section.
• footer.php – contains the code for the footer section.
• sidebar.php – contains the information about the sidebar.
• single.php – includes the code to display the full article on a single page.
• page.php – includes the code to display a single page’s content
• archive.php – displays a list of posts in the archive dynamically, as well as the categories that the user has defined.
• date.php – displays a list of posts by date dynamically
• 404.php – contains the error code

Now let’s move on to making theme functional.

2. Create a custom theme

Open style.css and index.php in your chosen editor as they will be required for the theme. The information below will be needed for style.css, let’s take a look at what each indicates:

Theme Name: Include the theme name as it should always be provided.

Theme URI: Include a link to a website to find out more information on the theme

Author: This is where you put your name

Author URI: Include a link to your website

Description: Include a description in the WordPress theme listing and the wp-admin theme modal

Version: Include the theme version number. It’s important that developers to ensure customers have the recent iteration of the theme.

License: Include the license to allow for distribution of the theme.

These are some other fields available but they don’t really play a vital role in theme development. Below is an example of the fields that have been assigned to allow the theme to be activated without issue.

/*
Theme Name: customtheme
Author: Stephen
Description: Fresh starter theme
Version: 0.1
License: GNU General Public License v2 or later
*/

3. Activate theme in WordPress

To see if the newly made theme is listed, go to your WordPress dashboard and click on Appearance > Themes. Theme Details should contain the correct information as what should be in the style.css file. Click activate and return to the main URL.

4. Loop through existing posts on WordPress

The custom theme outputs nothing, it should be a blank page. To fetch the data from the database and output the result onto the page, we need to fetch the post title and the post content of all posts and view them on the homepage. On the WordPress dashboard a default post can be located. Theme developers can check for posts and display them as needed or display a message via this loop.

<?php

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

?>

5. Divide sections of page

The header and footer of the page is almost as important as retrieving the post data for the website. All the content is stored in index.php so it’ll be divided into sections, header.php and footer.php, so they will be available on all pages associated with the theme.

In order for certain aspects of WordPress to function correctly, a couple important functions are required. See below:

wp_head

Inserted into header.php, ideally just before the closing tag of the theme. This core function inserts crucial elements into the file. This includes scripts, styles and meta tags. WordPress, Plugins and other files require this function to work correctly.

wp_footer

Inserted into footer.php, ideally at the end of the file. This core function allows the ability to add javascript to the bottom of the footer page.

5. Create a functions.php file

The next most important file to have in the custom theme is the functions.php file. This gives WordPress some personality by calling PHP functions, WordPress functions, or custom functions to change the default behaviour. More importantly, this only works when the theme is active and only applies to the current theme.

Conclusion

Although there is so much more to learn about WordPress, I hope this introductory article has provided you with an insight in learning the basic fundamentals for theme development. Now that you’re aware, converting any website to a WordPress theme will be a breeze without the use of plugins, widgets or modifying existing themes.