WordPress Theme Development – Step By Step Tutorial (With Code Examples)

wordpress tutorial how to develop a wordpress theme

Developing a custom WordPress theme can be an excellent way to create a unique website that perfectly matches your requirements. While many pre-built themes are available, sometimes they don’t fulfill your needs. This tutorial will walk you through a step-by-step guide to creating a basic WordPress theme from scratch, with coding examples provided.

However, before diving into custom theme development, it’s essential to consider alternative solutions like using the Divi WordPress website builder. Divi is an incredibly powerful and easy-to-use visual builder that can save you much time and effort in creating your WordPress site. It’s a great option if you’re uncomfortable with coding or simply prefer a more streamlined approach.

Now, let’s begin our tutorial on WordPress theme development.

Before starting, you need to set up your development environment. This includes installing the necessary software and creating a new theme folder in your WordPress installation.

  • Install a local server environment such as XAMPP, WAMP, or MAMP.
  • Install WordPress on your local server.
  • Create a new folder for your theme in the “wp-content/themes” directory.

Basic Theme Structure

A WordPress theme typically consists of several PHP, CSS, and JavaScript files. In this tutorial, we will focus on the essential PHP files required to create a functional theme:

  • style.css
  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • functions.php

Create these files inside your theme folder.

Creating The Header

The header is the top part of your theme, usually containing the site logo, navigation menu, and other elements. To create the header, open the “header.php” file and paste the following code:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <div class="site-branding">
    <h1 class="site-title">
      <a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
        <?php bloginfo('name'); ?>
      </a>
    </h1>
    <p class="site-description"><?php bloginfo('description'); ?></p>
  </div>
  <nav id="site-navigation" class="main-navigation">
    <?php
      wp_nav_menu(
        array(
          'theme_location' => 'primary',
          'menu_id'        => 'primary-menu',
        )
      );
    ?>
  </nav>
</header>

Creating The Main Content Area

Your blog posts, pages, and other content will be displayed in the main content area. Open the “index.php” file and paste the following code:



<?php
if (have_posts()) :
while (have_posts()) : the_post();
get_template_part('template-parts/content', get_post_type());
endwhile;
the_posts_navigation();

This will be a fun tutorial where we will look at developing your own WordPress theme from scratch. In fact, we’ll start with no files and no lines of code. The only way to understand how WordPress themes function is to start at the beginning and do everything yourself.

Sure, it is tempting to avoid this since you can make WordPress do everything for you without understanding the code that powers it. This could be PHP, JavaScript, CSS, or even plain HTML.

By the end of this step-by-step WordPress Theme tutorial, you’ll understand how everything fits together and how to bend WordPress to your will easily.

When you have a WordPress website, you can access many free themes. Aside from free themes, you may wish to pay a premium for professionally designed WordPress themes that look amazing and have fantastic features.

So why learn how to make your own theme from scratch?

The answer is that no matter what theme you use, there will come a point when you wish to make small adjustments to your website. A simple plugin or widget may support some of these changes.

Many times, though, it makes more sense to understand what you want to alter, and how to modify it, and avoid turning your WordPress website into a jumble of plugins and add-ons that become cumbersome. With only a little basic knowledge, you can tweak your theme or create your own from scratch. You’ll know which file to edit and what code to add or modify to achieve your desired outcome.

Step 1: Create a folder to house your theme files.

To design themes, we must first understand where the files that make up a WordPress theme are stored in a WordPress installation. This is quite simple. We know that a WordPress installation typically includes a WordPress root directory. Here is how our root directory looks in PHP Storm.

This directory contains the following files and folders:

Files

  • composer.json
  • index.php
  • license.txt
  • readme.html
  • wp-activate.php
  • wp-blog-header.php
  • wp-comments-post.php
  • wp-config.php
  • wp-config-sample.php
  • wp-cron.php
  • wp-links-opml.php
  • wp-load.php
  • wp-login.php
  • wp-mail.php
  • wp-settings.php
  • wp-signup.php
  • wp-trackback.php
  • xmlrpc.php

Folders

  • wp-admin
  • wp-content
  • wp-includes

The wp-content folder is the one we’re most interested in right now. Themes is a folder within the wp-content folder.

What is the purpose of this folder?

Indeed, that’s correct!

The folder contains one or more themes for use with your WordPress website. This themes folder has three further folders: twentyfifteen, twentysixteen, and twentyseventeen. These folders include the three themes that come standard with WordPress. There is also a folder named Customtheme down below.

Create that folder in your installation, as this is where we will be designing our WordPress theme from scratch.

Step 2: Create style.css and index.php in your custom theme folder

We now know where WordPress theme files are in the file system. We also created a new custom theme folder in our themes folder. We are now going to create two empty files in this directory. One is called index.php and the other is called style.css.

Let us populate these files with the bare minimum we need to get a new theme going in WordPress.

style.css

WordPress actually reads the comments that you place in the style.css file. This is where you specify specific information about the theme you are building.

The style.css is a stylesheet (CSS) file required for every WordPress theme . It controls the presentation (visual design and layout) of the website pages.

else :
get_template_part('template-parts/content', 'none');
endif;
?>

5. Creating The Sidebar

The sidebar is an optional area that can display widgets, such as recent posts, categories, and more. To create a sidebar, open the “sidebar.php” file and paste the following code:

<aside id="secondary" class="widget-area">
  <?php dynamic_sidebar('sidebar-1'); ?>
</aside>

Next, open the “functions.php” file and add the following code to register the sidebar:

function mytheme_widgets_init() {
  register_sidebar(
    array(
      'name'          => esc_html__('Sidebar', 'mytheme'),
      'id'            => 'sidebar-1',
      'description'   => esc_html__('Add widgets here.', 'mytheme'),
      'before_widget' => '<section id="%1$s" class="widget %2$s">',
      'after_widget'  => '</section>',
      'before_title'  => '<h2 class="widget-title">',
      'after_title'   => '</h2>',
    )
  );
}
add_action('widgets_init', 'mytheme_widgets_init');

6. Creating The Footer

The footer is the bottom part of your theme and usually contains copyright information, social media links, and other elements. To create the footer, open the “footer.php” file and paste the following code:

<footer id="colophon" class="site-footer">
  <div class="site-info">
    <a href="<?php echo esc_url(__('https://wordpress.org/', 'mytheme')); ?>">
      <?php
      /* translators: %s: CMS name, i.e. WordPress. */
      printf(esc_html__('Proudly powered by %s', 'mytheme'), 'WordPress');
      ?>
    </a>
    <span class="sep"> | </span>
    <?php
      /* translators: 1: Theme name, 2: Theme author. */
      printf(esc_html__('Theme: %1$s by %2$s.', 'mytheme'), 'mytheme', '<a href="https://example.com">Your Name</a>');
    ?>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Adding CSS Styling

Open the “style.css” file and add the following code at the top of the file to provide information about your theme:


/*
Theme Name: MyTheme
Theme URI: https://toptut.com/mytheme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme created from scratch.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
*/

Now, you can add your custom CSS styles to this file. For example:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.site-title a {
  text-decoration: none;
  color: #333;
}

.widget-area {
  background-color: #f5f5f5;
  padding: 20px;
}

Testing Your Theme

After creating all the necessary files and adding some basic styles, it’s time to test your theme. In your WordPress admin dashboard, navigate to “Appearance” > “Themes” and activate your custom theme. Visit your website to see how it looks.

Exporting and Installing Your Theme

Once you are satisfied

with your theme, you can package it for distribution or installation on a live website. To do this, follow these steps:

a. Compress your theme folder into a .zip file. b. Log in to your live WordPress site’s admin dashboard. c. Go to “Appearance” > “Themes” > “Add New” > “Upload Theme”. d. Upload the .zip file containing your custom theme and click “Install Now”. e. Once the theme is installed, click “Activate” to start using it on your live website.

Conclusion

In this tutorial, we walked you through the process of creating a custom WordPress theme from scratch with coding examples. This basic theme structure can be expanded and customized to suit your unique requirements. Keep in mind that creating a custom theme can be time-consuming and may require advanced web development skills.

Consider using a powerful and user-friendly visual builder like Divi as an alternative to custom theme development. With Divi, you can create a stunning, fully responsive WordPress website without writing any code. It’s an excellent choice for those who want to save time or are uncomfortable with coding.

WordPress Theme Development - Step By Step Tutorial (With Code Examples) -

Regardless of whether you choose to create a custom theme or use a website builder, the most important thing is to ensure that your website meets your needs and provides a great user experience for your visitors.

Takeaways

If you decide to continue working on your custom theme, consider adding the following features to enhance its functionality and improve the user experience:

  1. Responsive Design: Ensure that your theme is fully responsive and looks great on all devices, including desktop computers, laptops, tablets, and smartphones. You can achieve this by using CSS media queries and flexible layout techniques.
  2. Custom Page Templates: Create custom page templates for different types of content or page layouts, such as full-width pages, landing pages, or portfolio pages.
  3. Custom Widgets: Develop custom widgets that extend the functionality of your theme and make it easier for users to add specific types of content or features to their website.
  4. Theme Options Panel: Implement a theme options panel that allows users to easily customize various aspects of your theme, such as colors, fonts, logo, and more.
  5. Translation Ready: Make your theme translation-ready by using the appropriate text domain and providing a .pot file, which allows translators to create language-specific versions of your theme easily.
  6. Accessibility: Ensure that your theme is accessible to users with disabilities by following the Web Content Accessibility Guidelines (WCAG) and incorporating features such as keyboard navigation, high contrast modes, and proper use of ARIA roles and attributes.
  7. Search Engine Optimization (SEO): Optimize your theme for search engines by following best practices for clean, semantic HTML markup and using proper heading tags, meta tags, and structured data.

By implementing these features and adhering to best practices, you can create a high-quality custom WordPress theme that meets the needs of your website’s visitors and provides a great user experience. However, keep in mind that custom theme development can be time-consuming and may require advanced web development skills.

Remember that tools like the Divi WordPress website builder can save you time and effort in creating a professional, fully responsive, and feature-rich website without writing any code. Choose the approach that best fits your needs and skillset to create the perfect WordPress website for your project.