Theme Development SOP

Concise checklist and reference for building a custom WordPress theme.

1. Setup & Folder Structure

  1. Download latest WordPress setup for a new website.
  2. Create a theme folder named with the current website name in htdocs folder and copy wordpress files/folders in it.
  3. Create Database with the same website folder name.
  4. Install Wordpress by using same database name.
  5. Create theme folder with current website name.
  6. Create the following basic files & folders in the theme folder:
    1. style.css
    2. screenshot.png (1200 × 900)
    3. index.php
    4. header.php
    5. footer.php
    6. functions.php
    7. sass/ folder for SCSS
    8. js/ folder for JavaScript files
    9. images/ folder for website assets
    10. hooks/ folder (organize by purpose):
      1. action/
        1. init.php — Load site content such as menus, etc. 
          
                            if (!defined('ABSPATH')) {
                                header("Location: /");
                            }
                            add_action('init', 'hma_init');
                            function hma_init()
                            {
                                register_nav_menus([
                                    'primary-menu' => __('Primary Menu'),
                                    'quick-links' => __('Quick Links'),

                                ]);

                                if (function_exists('acf_add_options_page')) {

                                    acf_add_options_page(
                                        array(
                                            'page_title' => get_bloginfo('name') . ' Theme Options',
                                            'menu_title' => get_bloginfo('name') . ' Theme Options',
                                            'menu_slug' => 'theme-options',
                                            'capability' => 'edit_posts',
                                            'redirect' => false,
                                            'icon_url' => get_template_directory_uri() . '/images/favicon.png',
                                        )
                                    );
                                }
                            }
        2. after_setup_theme.php — Add theme supports via after_setup_theme hook: 
          <?php
                          if (!defined('ABSPATH')) {
                              header("Location: /");
                          }
                          add_action('after_setup_theme', 'dst_after_setup_theme');
                          function dst_after_setup_theme()
                          {
                              $theme_support_arr = [
                                  'menus',
                                  'post-thumbnails',
                                  'title-tag',
                                  'comment-form',
                                  'comment-list',
                                  'custom-fields',
                                  'custom-logo',
                              ];
                              foreach ($theme_support_arr as $heme_support) {
                                  add_theme_support($heme_support);
                              }
                          }
        3. wp_enqueue_scripts.php — Enqueue Styles/Scripts/Localization files. 
          
 /**
 * Enqueue Styles, Scripts, and Localization in WordPress
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function mytheme_enqueue_assets() {
    /**
     * 1. Enqueue Styles
     */
    wp_enqueue_style(
        'mytheme-main-style',                                // Handle
        get_stylesheet_directory_uri() . '/assets/css/main.css', // File URL
        array(),                                            // Dependencies
        filemtime( get_stylesheet_directory() . '/assets/css/main.css' ) // Version (cache busting)
    );

    /**
     * 2. Enqueue Scripts
     */
    wp_enqueue_script(
        'mytheme-main-script',                                 // Handle
        get_stylesheet_directory_uri() . '/assets/js/main.js', // File URL
        array( 'jquery' ),                                     // Dependencies
        filemtime( get_stylesheet_directory() . '/assets/js/main.js' ), // Version
        true                                                   // Load in footer
    );

    /**
     * 3. Localize (Pass PHP data to JS)
     */
    wp_localize_script(
        'mytheme-main-script',  // Script handle (must match enqueued script)
        'mythemeVars',          // JS global variable
        array(
            'ajax_url' => admin_url( 'admin-ajax.php' ), // Example: for AJAX
            'site_url' => get_site_url(),
            'greeting' => __( 'Hello from PHP!', 'mytheme' ),
        )
    );

    /**
     * 4. Enqueue WordPress built-in jQuery (optional, if not already loaded)
     */
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
        4. Create index.php and include all action .php files in index.php.
      2. filter/
      3. ajax/
      4. index

2. Template Setup

3. Sections