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’ll explore more about WordPress theme development and its options in this article.
Note: This article doesn’t 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.
What are WordPress Themes?
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.
When Should You Consider Developing a Custom Theme?
There are a lot of options to choose a theme, you got a website idea, and they’ve got a theme for you. That’s 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!
How to Develop a WordPress Theme?
We’ll 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 haven’t, refer to our previous article (provide relevant link) 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.
- 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.
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- 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.
- 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.
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>- 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(); ?>- 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.
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');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.
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 theme development 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.
Wrapping Up
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.