Guide to Building a Custom WordPress Theme

Clarity eCommerce - The eCommerce Platform to Scale and Grow Your Business
Learn How to Develop Custom WordPress Themes

What are WordPress Themes?

WordPress is naturally one of the most popular CMS choices for blogging or websites. A WordPress theme forms the skeleton or the outline of the website; hence, it is an integral part of the site. Many of us pick ready-made themes, but not all of us know that we can also develop them. We will explore more about WordPress theme development and its options in this article.

A WordPress theme forms the basic design layout and the website's functionalities that comprise PHP, HTML, and CSS files. Changing a theme can change the way your website looks, giving a different user experience to the audience. A typical theme can have different layouts, static or responsive pages, or both.

Learn How to Develop Custom WordPress Themes

Note: This article does not deal with choosing a theme for your website or how to use/apply a theme. It instead deals with the coding part of it to build your theme.

When Should You Consider Developing a Custom Theme?

Comprehensive Guide to Developing a WordPress Theme

There are a lot of options to choose a theme, you got a website idea, and they have got a theme for you. That is how enormous the WordPress theme collection is. But then nothing is more overwhelming than giving a personal touch to your website. You may want to develop a custom theme for one or more of the following reasons.

  • Often, a theme has many styling restrictions and comes with a minimal number of layout options from the vendor.
  • To give a personalized and unique feel to your website.
  • If you want to explore WordPress themes more deeply and learn more about WordPress themes.
  • If you wish to contribute to the WordPress theme directory.
  • If you ended up unsatisfied with the theme collection on the internet and did not find an apt theme to suit your needs.

I think we have enough reasons to explore developing a WordPress theme! We will see how to develop a WordPress theme from scratch in the following steps.

Note: We have discussed the following steps assuming that you have WordPress installed and configured. In case you have not, refer to our previous article on how to install WordPress. You can also have WordPress installed locally (XAMPP server) to develop and test your WordPress theme. Be sure to follow either of these methods to install and then proceed ahead.

Step 1: Creating the Directory

We’ll go ahead and create a directory called ‘sample-theme’ under the ‘themes’ directory of WordPress. The style.css file will be the main stylesheet of our WordPress theme. In this file, we’ll add the following code.

Step 2: Navigativing the Admin Panel

Now, when we navigate to the themes section in your WordPress admin panel, you will see that the theme you created is listed. And you can apply the theme to your website.

/*
Theme Name: Sample_Theme
Theme URI: http://sampletheme.net
Author: xyz
Description: A sample WordPress theme
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: SASS, clean, HTML, PHP
/*

header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
footer.php
<?php wp_footer(); ?>
<footer id="footer">

</footer>
</body>
</html>

Step 3: Adding Boilerplate Code

We will now add some necessary boilerplate code to our theme to form the header, footer, and content page. We'll go ahead and create two new files in our theme folder, header.php and footer.php and add the below code in the respective files.

Adding Boilerplate Code to Your Theme

Step 4: Header and Footer Content

We need to add the header and footer to our content file in order to display it on our website page. Add the below code to the index.php file, which is our content page.

<?php get_header(); ?>

<h1><?php the_title(); ?></h1>

<?php get_footer(); ?>

Step 5: Final Steps for Adding Scripts and Styles

At this point, a fundamental theme with header and footer is ready. Also, we have not added any style scripts for the content page. We’ll add them to the functions.php page as below. We've added the appropriate codes and styles to the header and footer sections within this one function. As a next step, you can explore adding a navbar, menu bar, etc.

function Sample_enqueue() {
wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
if($_SERVER['SERVER_NAME'] != 'localhost'){
wp_enqueue_style('style', get_template_directory_uri() . '/style.min.css');
} else{
wp_enqueue_style('style', get_template_directory_uri() . '/style.css');
}
wp_enqueue_script( 'customjs', get_template_directory_uri() . '/assets/js/custom.min.js', array('jquery'), '', true );
wp_enqueue_style('Montserrat', "https://fonts.googleapis.com/css?family=Montserrat:700|Montserrat:normal|Montserrat:300");
wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');
wp_enqueue_script( 'bootstrapcdn', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array('jquery'), '', true );
}
add_action('wp_enqueue_scripts', Sample_enqueue');

If you find developing themes from scratch as a very tedious job, then there are other easier ways. Here are a few of them:

  • Using a WordPress theme framework - Like we have frameworks for CSS, JavaScript, and PHP, a theme also has frameworks. It provides a standardized set of tools that you, as a developer, can use in creating your own themes. These frameworks come with predefined conventions that can aid in custom development for themes by saving time and efforts that would otherwise be spent coding and building those very conventions. To try out WordPress theme development, we recommend Themify and Genesis frameworks.
  • Use a starter theme - A starter theme is a blank WordPress theme that includes just the essential minimum of structural code, which means a starter WordPress theme has some foundational functionality but doesn’t offer any customizations or tweaks. It’s a convenient starting point on which to build your unique theme. After that, you can go ahead to build your theme. We recommend WP Bootstrap Starter for the same.
  • Using a Beaver theme – It’s a plugin for beaver builder. You will need to install both the plugins to build your theme. Beaver Themer allows you to create a custom theme, but you will still need a theme to start with. We recommend using a light-weight theme that includes a full-width page template to act as your starter theme.
How can we help

Clarity WordPress Experts

In this article, we saw what themes are, why we need custom themes, how to develop a WordPress theme from scratch, and a few alternatives. We hope that you found this article helpful. Check our other articles here. In case you’re looking for any business solutions, please feel free to contact us here.

Related Posts