Three Ways to Create Your Own WordPress Theme

It’s common for WordPress users to pick a ready-made theme. But you can also create a theme of your own. This article covers various ways to go about this.

Options range from making edits to an existing theme, to creating your own WordPress theme completely from scratch. In between these extremes are various other options that include duplicating and modifying themes, and using a range of tools to help you build your own theme.

WordPress themes are made up of a collection of files, all contained within a single folder that lives within the /themes/ folder: wp-content/themes/.

Option 1: Modify an Existing Theme

Modifying an existing theme is perhaps the easiest option. You may just want to make some minor changes, like colors, font sizes, or simple layout changes.

In this case your best option is to create a child theme. A child theme references an existing theme, just modifying the bits you want to change. Using a child theme has the advantage that, if the parent theme is updated when you update WordPress, your changes won’t be wiped away.

To create a child theme, create a new folder inside your /themes/ folder. A handy tip is to use the name of the parent theme with -child appended, as this makes it clear what the child theme is. So, if you’re creating a child theme of the Twenty Seventeen theme, your child theme folder might be called /twentyseventeen-child/.

In this child folder, you need at a minimum a style.css file and a functions.php file. In these files you need to add certain code to tell WordPress which is the parent theme, where the stylesheets are, and any other new functionality you want in your child theme.

The last step for getting your child theme up and running is to enter the WordPress admin panel and go to Appearance > Themes to activate your child theme.

For a complete guide to this process, visit the WordPress Codex. For help with setting up a child theme, you can also use the WordPress Child Theme Configurator utility.

Option 2: Adapt an Existing Theme

If you’re keen to dig into WordPress code a bit more, you can duplicate an existing theme and bend it to your will.

That might involve things like deleting all of the current styles and creating your own. You can also dig into the other theme files and remove elements you don’t need and add others. For example, you might want to alter the HTML structure of the theme. To do so, you’ll need to open various files such as header.php, index.php and footer.php and update the HTML parts with your own template elements.

Along the way, you might decide there are lots of features in the copied theme you no longer need, such as post comments and various sidebar elements such as categories and bookmarks. You’ll find PHP snippets for these elements in the various theme files, and you can simply delete them or move them around to other locations.

It can take a bit of searching around to work out which files contain the elements you want to delete or move, but it’s a good way to get familiar with your WordPress theme to dig in to the files like this.

Another option here, rather than duplicating an existing theme, is to start with a “starter theme”, which we look at below.

Option 3: Build a Theme from Scratch

A more daunting option — but more fun, too! — is to create your own theme completely from scratch. This is actually simpler than it sounds, because at a minimum you only need two files — style.css and index.php.

That, however, would result in a pretty limited theme! At a minimum, you’d probably want a functions.php file for custom functions, and perhaps several other template files for the various sections of the site, such as a 404.php template file for showing 404 pages.

In this example, we’ve created a folder in our themes directory called /scratch-theme/. (You’ll want to choose a spiffier name than that, of course.) The style.css file will serve as the main stylesheet of our WordPress theme. In that CSS file, we first need to add some header text. This is a basic example:

/*
Theme Name: My Scratch Theme
Theme URI: https://sitepoint.com
Author: Sufyan bin Uzayr
Author URI: http://sufyanism.com
Description: Just a fancy starter theme for SitePoint
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: clean, starter
*/

You can now head to the WordPress admin Themes section, where we’ll see our now theme listed.

At this point, it doesn’t offer any custom styles and layouts, but can still be activated and used nonetheless. (You can add a thumbnail image for the theme by uploading an image file named “screenshot” to the theme’s root folder, preferably 880 x 660px.)

For more in-depth guidance of WordPress theme development, check out the WordPress Codex theme development guide.

It’s fairly straightforward to create a very basic WordPress theme from scratch, but going beyond that is more challenging. Before deciding this is a bit outside your wheelhouse, let’s check out some of the tools that are available to help you along.

Using a Starter Theme

A starter theme is a barebones or blank WordPress theme that includes just the basic minimum of structural code. This means a starter WordPress theme has some foundational functionality, but doesn’t offer any customizations or tweaks. It’s a very handy starting point on which to build your unique theme.

There are several choices when it comes to picking a starter theme for development, the most popular of which is Underscores. It’s maintained by Automattic, the creator of WordPress, and is the basis for the recent default themes put out by WordPress.

Other options include FoundationPress, maintained by ZURB.

Bones is another simple and easy-to-comprehend barebones WordPress theme that can function as a very good starting point for theme development.
HTML5 Blank is onother option that provides a reliable and well-documented code base for theme development.

Using Underscores in Theme Development

To get started with Underscores, enter your theme details on the Underscores home page.

You can opt to include WooCommerce boilerplate as well — useful if the target theme is likely to have WooCommerce support, such as custom layouts for Shopping Cart and Checkout pages, etc. Click Generate, and that’s it! Our theme will be generated and available for download. In the resulting ZIP file, we can locate our theme directory.

The Underscores-generated WordPress theme has quite a lot of templates as well as separate sections for custom layouts and JavaScript elements. This means our theme structure is ready for us, as are the template files, which come with minimal code in the form of PHP tags and comments. We can just get started straightaway by modifying whatever we need, and eliminating whatever we don’t need.

This is obviously a great timesaver, as we don’t need to create each template file manually.

Using a WordPress Theme Framework

Similar to frameworks for CSS, JavaScript and PHP, a theme framework provides a standardized set of tools that you, as a developer, can use in creating your own themes. Theme frameworks come with predefined conventions that can aid in theme development by saving time and efforts that would otherwise be spent in coding and building those very conventions.

Many WordPress theme frameworks nowadays come with features such as:

• custom hooks and filters
• custom functions to be used in the theme
• custom callbacks
• integration with or compatibility for custom libraries, such as jQuery, etc.

These WordPress theme frameworks come with several added advantages of their own as well. They obviously make the task of building a WordPress theme quicker and easier. Some also offer bespoke features and coding norms that can enable newer developers to code quickly and learn the ropes more efficiently. Of course, this also means you have less control than when building a theme from scratch, but depending on your requirements and level of expertise, a beginner-friendly theme framework can really prove useful.

Picking a WordPress Theme Framework

There are quite a few WordPress theme frameworks to choose from. One popular choice is Genesis framework, by StudioPress. Priced at $59.95, Genesis comes with features such as custom page templates, multiple customizable layout options as well as full support for Gutenberg, the upcoming WordPress editor.

Another worthy premium option is the Divi theme by Elegant Themes. Divi comes loaded with realtime design elements, customizable layouts and page templates, draggable and visually editable assets, etc. In other words, Divi is a page builder disguised as a theme framework that lets you export your developmental settings and quickly put together websites.

If you’re looking for something free, Gantry is well worth a look. This developer-friendly and robust theme framework isn’t solely for use with WordPress. Built by RocketTheme, Gantry is more of a conglomerate of custom extensions and template methodologies adopted from the likes of Joomla, WordPress and GravCMS.

Gantry lets coders build powerful frontend themes and templates atop it. It also has many custom pre-made templates and skins as well as visually editable interface to make life easier for non-coders as well.

There are lots of other worthy contenders in this field, as you’ll find with any online search for “WordPress theme builders” or similar.

Conclusion

This article has been a brief tour around the options for modifying or creating your own WordPress theme. We started with the simplest option of creating a child theme, which only contains a few files that modify aspects of an existing theme.

We next looked at digging in a bit deeper by duplicating and modifying an existing theme. That’s a fun way to dig into a WordPress theme, learn how it works and tailor it to your exact requirements, without having to reinvent the wheel and start from scratch.

A more ambitious option is to code an entire theme from scratch. We’ve only touched on that here, but we’ve prepared a series of articles to show how to do that in depth.

As a way to fast track building a theme from scratch, we looked at starter themes like Underscores and theme frameworks like Genesis. In a sense, this brings us full circle, as some of these offer drag-and-drop/WYSIWYG tools that don’t require a lot of technical knowledge and might be the most user-friendly option if you’d rather not dig into code.

Hopefully this brief introduction has given you a better sense of how to get started creating a WordPress theme that suits your requirements.