How to Create a WordPress Theme | premiumwd
Development / Tips & Tricks

How to Create a WordPress Theme

by chris rodriguez on November 21, 2013

In this tutorial I will give you a general overview on how to create a wordpress theme. This includes necessary files, and layout for necessary deployment. Styling your code is something totally different and will not be covered in this tutorial.

I will just specifically show how to create a WordPress theme.


A Theme is created with 6 basic PHP files:

  1. Header file
  2. Footer file
  3. Index file
  4. Functions file
  5. Style sheet
  6. Page file

The most important of these is the stylesheet for aesthetics. Metadata identifies the theme style appropriately shows the user the necessary information.

The second most important file is the header.php which tells how to render the page, load necessary stylesheets/js, and semantic markup for layout placement.

And third most important file is the functions.php which identifies menus, sidebars, thumbnail specs, post formats, etc. usually depending on how much functionality you want, the functions.php will be more significant.

Stylesheet Guide:

Generally, WordPress needs a way to let the user know what type of theme it is and how to output the aesthetics of the theme. This is a basic overview of the metadata and what WordPress grabs and shows the user on the front-end.

This is what WordPress takes to identify it as a theme and be installed appropriately. Make sure to document correctly first everything in your stylesheet and keep the code simple!

  • Theme Name: Innovate
  • Theme URI: http://premiumwd.com/themes/innovate/
  • Description: This theme is intended for …
  • Version: 1.0
  • Author: Chris Rodriguez
  • Author URI: http://premiumwd.com/
  • Tags: responsive, light
  • Copyright (C) 2013 premiumwd
  • License: GNU General Public License, version 3 (GPLv3)
  • License URI: license.txt

Header Guide:

The header file is generally the most important layout file in your theme, it identifies how to render the webpage, and load necessary information for the user to see. Some might argue this is the most important, but if all themes look alike then that statement would be true and design isn't important.

Below is a brief outline on a basic header structure, take this as a guide, not a copy paste solution! Please understand the conceptual placement of items and how you put your files should be within the tags specified.

  1. !DOCTYPE tag tells the page how to render the html
  2. html tag always declare your html and doctype!
  3. header tag for stylesheets, javascript, wp_title, comments, favicon, wp_head, meta tags, etc
  4. body tag for logo, menu, etc.
  5. section this is where i leave it with an open html5 tag. This is geek status, just follow along.

Page Guide:

Pages are pretty easy to create and there use a simple layout. They are necessary for web pages to load content necessary for the user. By default this layout will be user for all pages, you will be able to specify using template name: "name" to differentiate pages with different layout schemes.

This is just for the php backend, you can set any type of markup or code if you use html5 or regular div classes to your liking.

  1. get_header(); to call your header.php
  2. if ( have_posts() ) while ( have_posts() ) : the_post(); the loop, allows to call content
  3. the_content(); outputs the page content
  4. get_sidebar('sidebar-name'); calls a specific sidebar your created in your functions
  5. get_footer(); calls your footer.php

Functions Guide:

Your functions.php file is custom made with set core functions and can add functionality. There are some default ways to add code that is useful and most important to start. You can always add code later.

  • add_theme_support( 'post-formats', array( 'aside', 'link' ) ); add post formats for your blog
  • add_theme_support( 'post-thumbnails' );  set_post_thumbnail_size(); set size for images
  • add_theme_support( 'automatic-feed-links' ); add rss feed links for your blog and robots
  • register_nav_menus( array(  'primary' => __( 'Primary Navigation')); register a menu
  • register_sidebar('see wordpress codex for array'); register a sidebar to put widgets

Overview:

You can be safe with not having a footer if you do not decide to, it is easiest to create and does not need any special methods to build, and you call it simple with get_footer(); if you decide to create one. Your index file also doesn't need to be created if you define your home page in WordPress through the settings page. Just by default any page called index.php will be your homepage. But you can always define it in your settings page.

Wrap Up:

After we done this correctly and tested it locally on our browser. Next is to put it together and have it be ready for installation.

  1. We have to put all the files in a folder and make sure that all paths start out as a root based url "/"
  2. Make the folder a zip file and call it a name
  3. We grab a beer and say hoorah! Because you are finished!
  4. Go into WordPress Appearance > Themes > Install to Install your theme
  5. And you're done!

Design tips, tricks, and freebies. Delivered weekly.

Get design tips and tricks, latest news from us and some goodies for signing up.
Email Address...
Give it a try—it only takes a click to unsubscribe

You might also like...

 Plugins / Tips & Tricks / WordPress

11 Amazing WordPress Plugins for 2017

Instead of writing a regular top ten piece, I decided to focus on WordPress plugins that you probably don’t know about….

 Development / Tips & Tricks / WordPress

4 Effective Ways to Help Grow Your WordPress Blog

 Many bloggers misuse the marketing concept: “If you build it, they will come.” Content may be the primary building block…

 Development / WordPress

Understanding and Using the WordPress Hook System

We’ve been covering quite a few WordPress web development topics recently, so you’ve probably already heard about hooks, actions, and filters….

No comments

Sorry, the comment form is closed at this time.

Subscribe to Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

See why people are switching to use our products. See Features Get Started
+ +

Get awesome design content

Get design tips and tricks, latest news from us and some goodies for signing up.
Email Address...
Give it a try—it only takes a click to unsubscribe
%d bloggers like this: