Creating Your First WordPress Theme From Scratch

by on September 2, 2015

Creating your first WordPress Theme from Scratch

Creating Your First WordPress Theme From Scratch

  •  
  •  
  •  
  •  

< Back to Chapter 4 – Modifying WordPress Themes Code, and some basics of slanging HTML and CSS within a WordPress Theme

WordPress Development for Noobs is a fun and exciting course that you can take online through these articles in order to learn how to build your own WordPress sites. I create value every day as a WordPress developer in Minneapolis, and I think WordPress is a perfect web design solution for small- to medium-sized clients who need a website, or larger clients whose websites are built around pushing out a lot of content or articles. (Every company should now be positioning themselves as a media company as Content Marketing has blown up, and most need some of it to thrive online.) This article will go over the first steps of creating your first WordPress theme from scratch.

What you will learn in this article:

  • Can’t I just use a theme? What are the benefits of creating a WordPress site from scratch?Skip to It Daddy-O
  • What are some basic “naked” theme frameworks I can use to start off right in WordPress Development?Get to It, Sugar
  • Here’s how you get started writing your theme from scratch, and the main things you’ll need to have in place for it to workCome on and Give It to Me

Can’t I just use a theme? What are the benefits of creating a WordPress site from scratch?

 

small-blue-legoOne of the biggest problems with just using a theme is that you think of the problem in terms of what the theme lets you do instead of what’s best for the client or the website, or what’s best to help the visitors do what they want or you want them to do. 

I started making websites for clients by modifying themes. I tried not to be hemmed in by the theme, but in the end, if there’s a theme option that’s 80% as good as what I had intended, I’d use it, because hey, who wouldn’t? The idea of creating a theme from scratch to match the visual design that you made where you didn’t even have a theme in mind means that you can design with the client and their customer in mind instead of designing from some one-size-fits-all template.

 

small-blue-legoBy creating a site from scratch around a visual design that’s intended to serve the client and their customer’s needs rather than fit a pre-built template, you’re setting your services up as a custom high-value solution rather than a run-of-the-mill commodity. 

If all you do is implement content and a couple tweaks within something that already existed, you may not be able to share your hard work as the custom high-end solution that you are trying to sell your work as. I find developing from scratch (I usually use a responsive naked framework as a starting point) reminds me to relentlessly seek the best solution, not the easiest.

What are some basic “naked” theme frameworks I can use to start off right in WordPress Development?

small-blue-lego_TK is a solid naked theme based on bootstrap (a CSS framework for responsive design structure) and Underscores (the maker’s of WordPress’ naked theme with the PHP loops set up) to get get started on.

With Bootstrap‘s out-of-the-gate responsive design features, mobile menu, and many bits and pieces of functionality like dropdowns, show/hides, and some basic styles built in, you have a tool that gets projects up off the ground quickly but doesn’t impose too intense of initial style on your project.

With _Underscores pleasant start-up kit of your basic PHP loops you can get into theming without having all this stuff memorized or consulting WordPress documentation for every tiny thing.

Combine them together and you have _tk. I have been on a project using this framework and it did its job beautifully. WordPress developers would do well to become acquainted with this base theme for the obvious reasons. It has a quick start time on projects and, of course, the loose restrictions that a very basic theme will give you. Of course by knowing this, it’s important to note you will have to write a good amount of CSS overlaying on what bootstrap’s styles are. It would be a very boring site indeed that used out-of-the-box styles without modification to create a compelling design. Get the _tk Starter Theme Here.

This is, in the end, why someone would want to use a tool like this. The very basic styling that comes with Bootstrap is intended to be helpful without being obtrusive, and enables developers and designers to bring their own flare to the table and adjust things without being overly designed to begin with.

 

Here’s how you get started writing your theme from scratch, and the main things you’ll need to have in place for it to work

small-blue-legoWith a new theme, the key things to have in place first is a Style.css file with the name of the theme up at the top, a page.php, header.php, and footer.php files with proper PHP loops.

small-blue-legoAn example of a CSS file for WordPress, which will define the theme:

In chapter two, I showed you how to do this for a child theme, but the header of your CSS file for the parent theme should look like this, and if the file has to be named ‘style.css’ and be in the root folder of the theme.


/*
Theme Name:     Theme Name
Theme URI:      https://www.timbdesign.com/theme-page
Description:    The theme for "Theme Name"
Author:         Tim B Design
Author URI:     https://www.timbdesign.com
Template:       theme_name
Version:        1.0.0
*/
/* ----------All your styles can be below here ----------------- */

small-blue-legoHere is some code that you might use as a very basic header:

It first defines the doctype, displays the title for browsers to read using a WordPress PHP loop, and gets the favicon for the site if you have it dropped in the theme folder. The “body class” is applied to the tag so that page templates and ID’s are automatically added for easy targeting with CSS classes. Clearly a basic header structure is included here, and the menu is called, so that whatever menu you are referring to in the WordPress admin as the “primary” will show up in the admin bar. Of course, if you are working in a blank theme, none of this will be styled yet, but it will just be raw elements that you can get ready to shape once we have the bones in place.


/**
* The Header for our theme.
*
* Displays all of the <head> section, header and top navigation areas
*
* @package theme_name
*
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrap">
<header id="branding">
<div id="logo"><a href="<?php echo home_url() ?>/"><?php bloginfo( 'name' ); ?></a></div>
<div id="tagline"><?php bloginfo( 'description' ); ?></div>
</header>
<nav id="top-nav">
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</nav>

 

small-blue-legoHere is some code that you might use as a very basic footer:

Included is a simple footer with the current year, a copyright, and the end tags for the page. The <?php wp_footer(); ?> is needed to recognize this file as the footer and is used as well to call in files like some JavaScript files and so on when we add those via the functions.php file.

<?php
/**
* The template for displaying the footer.
* 
* @package theme_name
*/
?>
<footer>
<p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
</footer>
</div><!-- end of wrapper -->
<?php wp_footer(); ?>
</body>
</html>

Of course, if you’ve downloaded one of the starter themes above you’ll already have these things in place, plus some divs and structure that will be used for quickly shaping the responsive aspects of the site. In the next chapter, I will share how to get some basic responsive structure in place if you are working from complete scratch, and how to start manipulating the design if you are using a responsive framework, like one of those above.

Thanks for reading ‘WordPress Development for Noobs: When to Use Theme Options and when to code!’ If you found this useful, please tweet this so others can check it out, too.

Tweet this!

I enjoy creating some of the best web design on WordPress in Minneapolis and sharing the things I learn. I do it because I know it’s something people need and I like being of use. If I can help you with WordPress design and development, let me know, that is my specialty.

Green LegoNext Tutorial: Working with responsive design in a WordPress Theme


  •  
  •  
  •  
  •  

Download my E-book "WordPress Development for Noobs" for free right now:

  • This field is for validation purposes and should be left unchanged.
Only the best of web design & marketing
  • Jonathan Perez

    Thanks for the clear info man

    • Tim Brown

      You’re very welcome, thank you!

  • Pingback: Modifying WordPress Themes Code - How To()

  • Amica Catherine

    Why don’t you use WordPress theme generator “TemplateToaster” for creating themes from Scratch?

    • Tim Brown

      I just personally haven’t gotten super into that – but thanks for sharing it!

  • Muzammal Rajpoot

    Can u gave me a tutorial to make custome site???

    • Tim Brown

      This is that tutorial sir! Or are you looking for a straight HTML site?

Ready to get started?

Get a free consultation now