So you are a dab hand at HTML, CSS, JavaScript, and PHP. You’ve been making awesome websites for a while now, and you’ve heard about various wonders of WordPress. Maybe your clients asked for custom WordPress themes, or maybe you want to become a part of the sprawling WordPress community. Maybe you simply want to sell themes as digital products and live like royalty (it’s not unheard of).
Which is why you’re here, trying to learn how to code a WordPress theme from scratch.
I’ll walk you through the basics:
What you’ll need:
- WordPress installed on a Local Server setup
- A front-end / WordPress theme framework (optional)
Let’s begin.
To start with your theme, you need to create a sub-folder in your wp-content/themes directory (note that until you’re trying your hands at WordPress configuration, you’ll stick to wp-content directory exclusively!). The name of this folder will be the name of your theme. Let’s call it “PracticeTheme”.
This folder will hold all theme files: templates, functions, stylesheets.
Now WordPress default theme structure is pretty, well… basic. Each template controls the working and layout of a particular element on a page (header, footer, sidebar, comments, post types, etc.) or entire pages on its own (archive, search results, etc.).
Note: Make sure you familiarize yourself with WordPress Theme Components and functions, especially the template hierarchy and the loop.
A WordPress theme’s anatomy is made up of the following essential files:
- header.php – Houses above the fold space, navigation, etc.
- sidebar.php – This section houses your widgets;
- footer.php
- style.css – The main stylesheet for your theme
- index.php – This contains the call tags for other templates as you specify, ;
Note that the last two (style.css and index.php) are the only two mandatory files. Without these, a theme literally will not exist.
For a list of templates refer to the Template File Checklist.
It’s up to you to choose how to create those files: a text editor works fine if you want to create them on your local machine and upload them to directory via FTP. You can also use the File Manager tool in your cPanel to create them directly on your hosting account.
Here’s how each of the major templates will be created:
- header.php
<html>
<head>
<title> PracticeTheme </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
This is the file where you can further specify the meta tags for your pages, like title, description, keywords, etc.
- index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?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('No posts match your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
This file calls other templates and assembles them to be displayed on the page with call tags like these:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The rest of the code checks whether you have any posts ‘published’ through the blog. If you do, it displays those. If not, it returns a no-posts available message.This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.
An empty “div” inserted before calling the footer separates it from the Main Area and the Sidebar.
Note: This file is where you put in the WordPress loop.
- sidebar.php
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
We have used standard WordPress functions to use sidebar area to display categories and post archives in a list form (which is why we wrapped them here in unsorted list tag)
- footer.php
<?php wp_footer(); ?> </body> </html>
That’s it. Now you can modify your style.css file as you want, add JavaScript (not directly and always using wp_enqueue_script() function), and add custom functions in a functions.php file (you’ll need to comprehensively study the Functions Reference in the WordPress Codex to create something truly marvelous).
Tips:
- You can add support for Right to Left (RTL languages) without a plugins and directly in your theme through rtl.css stylesheet.
- You can create and configure a 404.php template in the theme for a special ‘404 Error Not Found’ page.
- Custom Page Templates make WordPress awesome: You can define a custom format for showing certain posts (like book/movie reviews, recipes, hotels, etc.) to make specialized themes for niche industries.
- While it’s not the same as Visual Composer, you can use add_theme_support() or Settings API to enable Theme Customizer to let clients configure theme settings easily.
Endnote
WordPress website development is easier than it looks (once you get the hang of it).
If you’re not quite ready to take on the challenge of creating a new theme by yourself, you can practice working on a child theme first.
Keep the WordPress Bible (aka The Codex) on the standby and you’ll be fine.
