How to create WordPress theme from scratch


Developing WordPress themes from scratch is pretty interesting task that involves well understanding of how WordPress exactly works and what are its internal hooks and functions. I personally recommend following the general standards to avoid conflicts with the other extensions or themes, especially when it comes to naming convention. Today we are going to learn the basics of how to create custom wordpress theme from scratch.

Unlike the other tutorials I found online that explain how to work on the server by using FTP, I will explain how to create the WordPress theme files on your local device, add the necessary header information, then zip them and install the theme using the WordPress native installer.

create custom wordpress theme – step by step

Before starting let’s review the layout I picked up for testing purposes:

Create a WordPress theme from scratch

Create a WordPress theme from scratch

What we have here is header, breadcrumbs section, body, sidebar and footer sections. Each one has its own file that controls the visualization and options. There is also style.css file. Its purpose is to handle the styling of your website. In this tutorial we will use just one basic CSS file, but when working on complex projects you may use more, by defining them in the header or directly enqueue-ing in functions.php file. The second approach is based on wp_enqueue_style() which is core function and it is also recommended when it comes to directly injecting additional styles.

How to create WordPress header.php

Now let’s start creating WordPress theme files from scratch. Here is how our first header.php should look like:

<html>

<head>

<title><?php wp_title(); ?></title>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>

<?php wp_head(); ?>

</head>

<body>

<div class=”container”>

<div class=”header rounded”>

This is the header section

</div>

<div class=”breadcrumbs rounded”>Breadcrumbs</div>

In this piece of code we added wp_title, defined the location of our CSS file and also included our first action hook. Note that wp_title is filter that handles and shows the title of a WordPress instance while wp_head is an action hook that is triggered in header section by wp_head function. In addition we added one class called container that will wrap the layout and also defined header class with simple text in it.

How to create WordPress index.php

The next main file is called index.php. Here are the functions included in it:

<?php get_header(); ?>

<div class=”main”>

<?php get_sidebar(); ?>

<div class=”content rounded”>

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

<h1><?php the_title(); ?></h1>

<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>

<p><?php the_content(__(‘(more…)’)); ?></p>

<hr> <?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p><?php endif; ?>

</div>

</div>

<?php get_footer(); ?>

The file starts with get_header();, which is an internal function that calls header.php file. If theme does not have such file, then the default one that comes within WordPress code files wp-includes/theme-compat/header.php will be included. The next two lines define two classes, one that wraps the sidebar and body and one more for the body itself. Coding this way gives us more options to control these two elements separately. The other lines define the main WordPress loop and also include the footer.

How to create WordPress sidebar.php

After saving index file, we are ready to continue with the next important one called sidebar.php. Here is an example of how this file could look like:

The next step is the footer. What you have to do is create footer.php and add the following code inside it:

<div class=”footer rounded”>

<h1>FOOTER</h1>

</div>

</div>

</body>

</html>

A few important things about this file:

  • The footer area is again wrapped in its own class
  • This file contains closing body and html tags
  • These two were opened in header.php file

How to create WordPress style.css

Now it is time to set up style.css file. It is very important because it is responsible for the entire style and visualization of the layout. Here is a sample that would help you understand better the basic of CSS:

/*
Theme Name: My theme
Theme URI: http://wppotion.com
Author: Leonid G.
Author URI: http://wppotion.com
Description: This is test theme
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
*/

body { text-align: center; }
.rounded {-moz-border-radius: 10px; -webkit-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;background: #ccc;}
.container {top: 0;left: 0;width: 100%;top: 0;position: absolute;}
.header {width: 80%;margin: 0 auto;background-color: #ccc;height: 100px;line-height: 100px;margin-bottom: 10px;}
.main {width: 80%;margin: 0 auto; display: flex;margin-top: 10px;}
.breadcrumbs {height: 30px;line-height: 30px;margin: 0 auto;width: 80%;}
.sidebar {width: 100%; margin-right: 20px;}
.content {}
.footer {clear: left;width: 80%;margin: 0 auto;background: #ccc;}

There is also one more file called screenshot.png. This is the thumbnail of the test theme. If it does not exist, then in themes section you will see a blank image when checking the existing themes. Of course this would not affect the normal functionality of the theme in any way.

Summary
Create custom wordpress theme from scratch - detailed tutorial
Article Name
Create custom wordpress theme from scratch - detailed tutorial
Description
How to develop a custom wordpress theme from scratch. Detailed tutorials with step by step guide and code examples. Custom styling, functions and files.
Author
Publisher Name
wppotion


Do you want to share your opinion?

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


*

We are not industry specific. We are WordPress specific. We work with everyone to help them find solutions with their troubles.
If you show us the problem you are experiencing, we will show you how to fix it. It is that simple.


Reported WordPress issues

  1. Wordpress User Login in Android App
  2. Long form upon submit form disappear but page stuck at bottom while confirm message at top
  3. Do you know about WordPress “Portfolio”?
  4. when i try to post to my wordpress site using curl in php, it says that cookies are not supported in my browser
  5. Changing post type slug to '/' breaks all pages
  6. Add multiselect Dropdown as an conditional logic field in WP UserFrontendPro
  7. PHP Fatal error: Uncaught Error: Class 'WP_Theme' not found
  8. How to prevent WordPress theme from removing analytics tracking parameters
  9. Does souncloud offer custom made soundcloud plugins for use by third party websites
  10. Hide html if metabox is empty, using custom post types

WordPress problems we are working on

  1. Home URL with query string not being called correctly - Wordpress
  2. Importing a Wordpress site to MAMP Pro 5
  3. WordPress site using the kale theme - site appears off screen and needs scrolling to appear on mobile devices
  4. Need Help in Implementing Responsive Hexagon Grid in WordPress
  5. How can I change my image src tags from absolute to relative urls on Wordpress?
  6. WordPress plugin create trigger not working
  7. Identifying which item was selected from a dynamically created form in WordPress / PHP
  8. Password Protect wp-login.php page nginx
  9. mysql setup with wordpress
  10. Skewed Letter “B” in Bebas Neue Font on Chrome Windows

Resolved issues

  1. What “route” should I take? Wordpress (as headless CMS) or the MERN way?
  2. Wordpress Themeco Theme X Pro Cornerstone custom sorting element accessing parent variables
  3. Remove unwanted Symbol from Pardot Landing Page using Wordpress Page Code
  4. Gravity Form - Want To Duplicate Sign In Sheet Entries So Names Don't Need To Be Re-Entered Daily
  5. JQMIGRATE and Wordpress Elementor: n.easing[this.easing] is not a function. jquery.js?ver=1.12.4:4
  6. My website's input fields color changing to white on iphone, ipad and mac
  7. Category listing required based on select product tags
  8. Hot to extend a class from child theme in wordpress?
  9. Wordpress SSO with OneLogin
  10. Add custom flow on member registration form in Wordpress website
wppotion - powered by persistence and passion