Beginner’s guide to creating WordPress themes from scratch

A WordPress theme defines your site’s design.

Creating new themes helps you improve your site’s user experience, front-end, and functionality.

Although theme development is a technical routine, basic knowledge helps you cover fundamentals.

Today’s tutorial helps you learn to create WordPress themes from scratch.

You can make use of the basics at a beginner level. However, you may need to hire professionals for advanced theme development.

After reading this write-up, you’ll be able to create a basic theme’s structure, upload, and activate your custom theme. If you’d like to proceed with the new template, you’ll need to dig deeper into developmental skills.

Creating WordPress themes from scratch

The process of creating WordPress themes from scratch is a six-step process. Below, we cover simple steps to create a basic WordPress theme.

Step 1: Install WordPress locally

The first step consists of installing WordPress on your computer, also known as installing WordPress locally. It helps us test out themes on the computer before we finalize and upload to the Internet. You can call it making a local environment for development.

There are two ways to install WordPress locally on your computer. The first method consists of downloading the WAMP software, a package that makes your PC a server, along with setting up the WordPress package. The second method comprises of a single installation of a package that consists of both characteristics – WAMP and WordPress installation.

The latter method is comparatively easy for beginners.

To get started, download the Desktop Server from its official website and follow the instructions to install WordPress locally on your computer.

Step 2: Create a folder for your new theme

Once you install the Desktop Server, the next step is naming your new WordPress template. To get started, create a new folder at location – /wp-content/themes/, and call it as desired. You can find the said folder after setting up the full environment, including the installation of the Desktop Server and WordPress.

The /wp-content/themes/ folder holds themes in a WordPress website. As WordPress comes with three themes by default; once you create a new folder, you will see four directories in the themes folder.

creating wordpress themes from scratch wpcrib blog

3. Create index.php and style.css files in your newly created theme folder

We need to code the necessary data for our new template.

To get started, open the Notepad and save it as index.php. Make sure you select All Files while saving your file.

creating wordpress themes from scratch

Similarly, create an empty file in Notepad and save it as style.css.

Index.php is the file browser calls when someone accesses your website. On the other hand, Style.css file defines the style and design of your WordPress website.

Let’s proceed to place the sample code in Style.css file. Copy the code below and save changes at the end.

          /*
          Theme Name: customtheme
          Author: WPCRIB
          Author URI: https://wpcrib.com/
          Version: 1.0
          */

In the same manner, place <h2>my custom theme</h2> in the index.php file. Once you save changes at the end, you can proceed to the next step.

4. Activate your new theme

On the themes page, you can see a list of items on your WordPress website.

You can find themes page in Appearance menu. Locate your custom theme and proceed to activate it.

creating wordpress themes from scratch wpcrib blog

Once finished, you can browse to the site’s home page (locally). On Windows, you can navigate to localhost/yourthemename/ or 127.0.0.1/yourthemename/. If you see the “my custom theme” on the home page, you’ve completed the above routine.

5. Adding header and footer

Header refers to the top section of your site, containing a menu bar, logo, and search box. Similarly, Footer is the lower section that includes links, Terms, About text, and a copyright statement.

Let’s proceed to add Header and Footer to our new custom theme.

Open the Index.php file in Notepad, add new code for header and footer. Don’t forget to save changes at the end. After you finish, your Index.php file should contain the following code.

<?php
get_header();
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
<?php the_content() ?>
<?php endwhile;
else :
echo ‘<p>There are no posts!</p>’;
endif;
get_footer();
?>

You can see your custom theme’s home page has changed. The header and footer sections are added to the homepage.

Also, you can see the Header and Footer with default text. To make more changes to our custom theme homepage, let’s proceed to create separate files for header and footer.

6. Create header.php and footer.php

Creating custom files for header and footer helps you improve your homepage’s respective sections.

Open Notepad, add <h2>Header</h2> to it and save the file as header.php. Make sure you select All Files while saving the notepad file.

Similarly, create a new file named footer.php, and add the <h2>Footer</h2> to it.

After you finish the said process, visit the homepage of your custom theme to see changes. You can see the new files have changed your site’s Header and Footer.

Summing up

As a beginner, you can quickly develop a basic WordPress theme. It doesn’t require fancy tools or technical knowledge at all. However, developing a feature-rich WordPress theme requires professional skills.

You can start by installing the Desktop Server. It helps you set up an environment for development purposes. We can call it installing WordPress locally, as the said package helps you cover two things – making your PC a local server and install the WordPress package.

After you install the Desktop Server, you need to create a folder for your new theme, followed by creating necessary files, such as index.php, style.css, header.php, and footer.php.

Next, the process goes through editing the files. As you make changes in the code, you can test the changes by visiting your site in the browser.

As of now, you’ve created a basic WordPress theme. To add more functionality, design features, and layouts to the WordPress template, you can proceed with technical aspects such as creating a functions.php file. It requires coding expertise, sometimes the services of professional theme developers.

Don’t forget to read this tutorial for more information on creating WordPress themes from scratch. Also, you can join the conversation in the comments and let us know about your journey as a WordPress theme developer.

More on wpcrib

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.