Dev Diary – Day 2: The Birth of a Theme

Hey Beeverse crew! Welcome to Day 2 of our journey with the Beeverse Parent Theme. Today is all about laying down the initial framework that will bring our theme to life. This is where we start transforming our plans into a functioning WordPress theme – exciting stuff! Let’s dive into the steps we tackled to get the basics up and running.

Step 1: Creating and Declaring the Theme in style.css

The first step in giving birth to any WordPress theme is to officially declare it, and that all starts in the style.css file. This isn’t just about adding styles (that’ll come later) – it’s about providing WordPress with all the essential information it needs to recognize our theme.

We added the theme declaration at the very top of style.css with key details like the theme name, version, author, description, and license. Here’s what that declaration looks like:

/*
Theme Name: Beeverse Parent Theme
Theme URI: https://wp-beeverse.com/themes/beeverse-parent
Author: WP Beeverse Team
Author URI: https://wp-beeverse.com/
Description: A versatile and lightweight WordPress parent theme designed for both developers and non-technical users. Fully compatible with Bootstrap v5.3.x, including the complete Bootstrap Icons library, and WooCommerce-ready, this theme provides a solid foundation that’s responsive, SEO-friendly, and easy to customize for any project. The Beeverse Parent Theme is the core foundation for all Beeverse themes and plugins, crafted for flexibility and performance.
Version: 1.0
License: GNU General Public License v2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beeverse-parent
Tags: bootstrap, parent-theme, responsive, seo-friendly, ecommerce, woocommerce, icons, beeverse, wp-beeverse
*/

This simple section is like a birth certificate for the theme – it makes WordPress aware of its existence and ready for activation. It’s also helpful for users and developers to know exactly what’s inside and where to find us if they need support or updates.

Step 2: Creating the functions.php File

With the theme officially declared, our next step was building out the functions.php file – the backbone of our theme’s functionality. This file is where we define the features our theme will support and add any essential configurations. Here’s what we tackled in functions.php today:

Theme Setup and Support

To get things started, we added a beeverse_parent_theme_setup function that loads after the theme is set up. This function enables core WordPress features that many sites rely on, including support for titles, post thumbnails, custom logos, and WooCommerce. Here’s the setup we’re using, that will allow us to expand the theme’s features over time.


// ============================
// THEME SETUP AND SUPPORT
// ============================

add_action('after_setup_theme', 'beeverse_parent_theme_setup');
function beeverse_parent_theme_setup() {
    // Add support for WordPress features
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('custom-logo', array(
        'height'      => 45,
        'flex-width'  => true,
    ));
    add_theme_support('automatic-feed-links');
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    add_theme_support('woocommerce');

    // Register navigation menus
    register_nav_menus(array(
        'main-menu' => __('Main Menu', 'beeverse-parent')
    ));

    // Load translation files
    beeverse_load_textdomain_for_mu();
}

WooCommerce and Multisite Support

Since the Beeverse Parent Theme is designed to support WooCommerce and multisite setups, we’ve added conditional requirements for these features:

WooCommerce Support: If WooCommerce is active, the theme loads woocommerce-support.php to ensure full compatibility.
Multisite Support: For multisite setups, the theme includes additional configurations from multisite-support.php to optimize multisite functionality.

// WooCommerce support
if (class_exists('WooCommerce')) {
    require get_template_directory() . '/includes/woocommerce-support.php';
}

// Multisite support (optional)
if (is_multisite()) {
    require get_template_directory() . '/includes/multisite-support.php';
}

With this foundation in functions.php, we’ve equipped the theme with essential features, multilingual support, and compatibility with WooCommerce and multisite setups. This setup ensures that our theme is ready for a wide range of use cases, from single sites to complex networks.

Translation Handling

Since we’re setting up the theme to be translation-ready, we included a function called beeverse_load_textdomain_for_mu that attempts to load the theme’s language files from the global wp-content/languages/themes directory first. This is especially handy for multisite setups where a single translation file may be shared across multiple sites.

function beeverse_load_textdomain_for_mu() {
    // Try to load from the global MU directory first
    $loaded = load_textdomain('beeverse-parent', WP_CONTENT_DIR . '/languages/themes/beeverse-parent-fr_FR.mo');

    if (!$loaded) {
        load_theme_textdomain('beeverse-parent', get_template_directory() . '/languages');
    }
}

We also added a helper function, beeverse_move_translations_to_global, which moves any translation files from the theme’s languages directory to the global directory. This ensures that translations can be easily accessed and shared by multisite networks.

add_action('after_setup_theme', 'beeverse_move_translations_to_global');
function beeverse_move_translations_to_global() {
    $theme_lang_dir = get_template_directory() . '/languages/';
    $global_lang_dir = WP_CONTENT_DIR . '/languages/themes/';
    $translation_file = 'beeverse-parent-fr_FR.mo';

    if (!file_exists($global_lang_dir . $translation_file)) {
        if (!is_dir($global_lang_dir)) {
            mkdir($global_lang_dir, 0755, true);
        }
        copy($theme_lang_dir . $translation_file, $global_lang_dir . $translation_file);
    }
}

Step 3: Enqueuing Styles, Scripts, and Enhancing Asset Performance

To ensure the Beeverse Parent Theme is fully compatible with Bootstrap and optimized for performance, today we focused on enqueuing essential assets. This process helps our theme load styles and scripts efficiently, keeps the page light and fast, and ensures everything works seamlessly. Let’s walk through the key parts of our approach.

Enqueueing Core Styles and Scripts

We started by enqueuing our core CSS and JavaScript files in a dedicated function, beeverse_enqueue_assets. This function ensures that both Bootstrap and our custom theme assets load only when needed. Here’s the breakdown:

// ============================
// ASSETS AND ENQUEUEING
// ============================

function beeverse_enqueue_assets() {
    // Enqueue styles (header)
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bs-main.css', array(), '5.3.0');
    wp_enqueue_style('main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0');

    // Bootstrap JS (loaded in the footer for better performance)
    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), '5.3.0', true);
    // Main Theme JS (loaded in the footer for better performance)
    wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true);

    // Localize the main JS with the AJAX URL
    wp_localize_script('main-js', 'ajaxurl', admin_url('admin-ajax.php'));
    // Apply async or defer attributes to specific scripts
    add_filter('script_loader_tag', 'beeverse_add_async_defer_attributes', 10, 2);
}
add_action('wp_enqueue_scripts', 'beeverse_enqueue_assets');

This code accomplishes a few things:

Bootstrap CSS and JS: Loads our Bootstrap-compatible CSS (bs-main.css) and JavaScript (bootstrap.bundle.min.js) files, including jQuery as a dependency, all from our own theme directory. Loading Bootstrap JS in the footer also keeps the initial page load quicker.
Main Theme Styles and Scripts: Enqueues main.css for custom theme styling and main.js for custom JavaScript, both set to load in the footer for optimal performance.
AJAX URL Localization: Adds admin-ajax.php URL as ajaxurl for use in JavaScript, enabling seamless AJAX requests.

Adding Async/Defer Attributes for Enhanced Performance

For a smoother, faster experience, we added async or defer attributes to our core scripts. This helps them load in parallel without blocking the page. Here’s how we did it:

// Add async or defer attributes to specific scripts
function beeverse_add_async_defer_attributes($tag, $handle) {
    // Use 'defer' for specific scripts for better loading performance
    if (in_array($handle, array('main-js', 'bootstrap-js'))) {
        return str_replace(' src', ' defer="defer" src', $tag);
    }
    return $tag;
}

This function applies the defer attribute to main-js and bootstrap-js, ensuring they load without blocking the rendering of other elements on the page.

Preloading Critical Assets for Faster Loading

We took optimization a step further by preloading high-priority assets like Bootstrap icons and Google Fonts. Preloading allows these resources to start loading immediately, improving load times for critical visual elements. Here’s how we set it up:

// Preload critical assets for better performance
function beeverse_preload_assets() {
    echo '<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" as="style" onload="this.rel=\'stylesheet\'">';
    echo '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" as="style" onload="this.rel=\'stylesheet\'">';
}
add_action('wp_head', 'beeverse_preload_assets');

This code preloads both the Bootstrap Icons CSS and the Google Fonts, allowing them to render faster when needed.

WooCommerce Styles Enqueueing – Only When Needed

Since the Beeverse Parent Theme is WooCommerce-compatible, we also set up conditional enqueuing for WooCommerce-specific styles. This ensures that the WooCommerce CSS only loads on relevant pages (like product or checkout pages), keeping other pages lighter and faster.

// Conditionally enqueue WooCommerce styles
function beeverse_enqueue_woocommerce_styles() {
    if (class_exists('WooCommerce') && (is_woocommerce() || is_cart() || is_checkout())) {
        // Load WooCommerce-specific CSS
        wp_enqueue_style(
            'beeverse-woocommerce-css',
            get_template_directory_uri() . '/assets/css/woocommerce.css',
            array(),
            '1.0'
        );
    }
}
add_action('wp_enqueue_scripts', 'beeverse_enqueue_woocommerce_styles');

This approach keeps WooCommerce CSS out of non-commerce pages, optimizing performance for sites that only use WooCommerce on select pages.

First Impressions and Challenges

It’s amazing to see the theme starting to take shape! With style.css and functions.php in place, our foundation is coming together. The biggest challenge today was making sure that the Bootstrap assets load efficiently and without conflicting with any WordPress scripts. We’re sticking to the latest CDN version to keep everything up-to-date and lightweight.

Looking Ahead: What’s Next?

With the basics in place, we’re now ready to start building out the core templates like header.php, footer.php, and index.php. These templates will allow us to structure the layout, add our Bootstrap elements, and start bringing the design to life. We’re also planning to introduce custom widget areas and some starter layouts to help users get a running start.

Join the Journey – Share Your Ideas!

That’s it for Day 2! As always, we’d love to hear from you. Any features you’d like to see in the Beeverse Parent Theme? Drop us a comment below or reach out directly. Your input helps shape the theme and keeps us motivated!

Stay tuned for more updates, and thanks for being part of the Beeverse adventure!

Dev Diary – Day 2: The Birth of a Theme

Step 1: Creating and Declaring the Theme in style.css

Step 2: Creating the functions.php File

Theme Setup and Support

WooCommerce and Multisite Support

Translation Handling

Step 3: Enqueuing Styles, Scripts, and Enhancing Asset Performance

Enqueueing Core Styles and Scripts

Adding Async/Defer Attributes for Enhanced Performance

Preloading Critical Assets for Faster Loading

WooCommerce Styles Enqueueing – Only When Needed

First Impressions and Challenges

Looking Ahead: What’s Next?

Join the Journey – Share Your Ideas!

Join the conversation

Dev Diary – Day 2: The Birth of a Theme

Dev Diary – Day 1: Kicking Off the Beeverse Parent Theme

Introducing the Beeverse Parent Theme – Our Ultimate Base for WordPress Projects

Welcome to WP Beeverse – Our new WordPress playground

Menu

My Account

Log In

Create an account