Building a WordPress Theme from Scratch – Starting a Theme
There is no denying that there is an abundance of free WordPress themes. I love a lot of them. Some of them even push the boundaries of where free is by offering you premium quality themes for no fee at all. But there’s always a cost and in the case of using a ready-made theme that cost is a lack of originality. While it’s not a major downside the upside to building your own theme is staggering. From design and layout choices to major SEO benefits and speed optimizations the list of benefits are staggering.
Starting to Build a WordPress Theme
There are only 2 requirements for the most basic of themes: index.php and style.css but only an absolute minimum of sites will be able to get by with just those 2 files. Coming now sites, for instance, would work well with just those files Or you could use the WordPress selectors in index.php to build slightly different pages from the 2 files depending on what type of content your viewing but that would still work better as separate files.
As a standard WordPress themes have a collection of default files. header.php, footer.php and sidebar.php are a few that almost all themes have along with the index.php and style.css because most sites have all those elements on most if not all of the pages. It makes sense to create a set of files for those elements and simply include those files on every page. It’s considered to be the basic anatomy of a WordPress theme.
How to Start a WordPress Theme
It will take us just 5 simple steps to make our own WordPress theme. I’ll obviously be using the latest version of WordPress, Notepad ++ for coding and Filezilla as my FTP client. You can download the theme I build here to use as your own base by clicking the button below.
Download Source1. Create a Folder
Call the folder your theme name. I’ll call mine theme-dev. It’s worth noting that you shouldn’t include numbers in the folder name as it will prevent it from showing up in the Themes page.
2. Create 2 Empty Files
Put the files in your theme’s folder and name them ‘style.css’ and ‘index.php’.
3. Define Your Theme
Open up style.css in a text editor. I use Notepad++ for all my coding and develop all my WordPress themes and plugins purely within it. It’s a free, open source, software and has built in syntax highlighting for dozens of languages.
This file is the one that tells WordPress what your theme is called and gives the description and links etc. that you see on the Themes page in the dashboard. Obviously this is the place where you style your website too but for now we just need to tell WordPress this is a theme. Copy and paste the following code into the file and replace my information with your own.
/*
Theme Name: Theme-Dev
Theme URI: http://www.theme-dev.com
Description: A WordPress theme built with love!
Version: 0.1
Author: William Patton
Author URI: http://www.pattonwebz.com
License: GPL
License URI: http://www.opensource.org/licenses/gpl-license.php
*/
If you upload your folder to the themes directory in WordPress then it will now show up on the Themes page!
4. The WordPress Loop
In index.php is where your loop is going to be. WordPress is a database driven software and the loop is where you’ll place the standard set of instructions that tells WordPress what it’s supposed to pull from the database to show. Within the database are a set of tables that contain all your options, posts and their metadata. The loop grabs the posts and their data, according to your options and the conditions in your php files, and displays that data in a webpage.
There’s a caveat I will mention here. We will be hard coding out header and footer into index.php and omitting the sidebar entirely for now but later we’ll adopt the standard and separate those into their respective files.
You can copy and paste this into the index.php file and it’ll all be explained in due course.
[codebox 1]
5. Activate Your New Theme
Enjoy the feeling of you seeing your own theme activated
Upload your new theme’s folder (I use Filezilla as my FTP client, again it’s a free software) to the Themes directory and navigate to Appearance >> Themes to activate your new theme. It looks pretty plain, in fact it looks awful but that’s only until the next Building a WordPress Theme from Scratch.
Turn It Into Something Stylish
This will be a constantly evolving base theme for us to use when developing various different themes – It will eventually become a complete theme framework. The first task it to turn it into something functional enough to run it’s very own Theme-Dev website.
We’ll standardize the theme and add a few more files next time and then see if we have time to think about some styling. It will be a stylish, totally awesome, HTML5 and CSS3 Responsive WordPress theme framework built for SEO, speed, and functionality all with a mobile first approach to responsiveness.
Pingback: WordPress Theme Development From Scratch - get_template_part() - PattonWebz
Pingback: Build A WordPress Theme From Scratch With Bootstap - PattonWebz
😀 somehow [codebox 1] is empty
Not a big deal, just to let you know