How to Create Custom Theme in WordPress – Step by Step Guide

Pin

This is a basic tutorial for newbies who want to create custom WordPress themes for blogs and websites. Creating a custom WordPress theme takes lots and lots of time. You need to know markup and programming languages like HTML, CSS, Javascript, and PHP.

Important Note: This is not a full tutorial on how to create custom WordPress themes. I have up to 9 years of experience in web design and WordPress. Creating a custom WordPress theme needs too much knowledge. Most of the theme design tutorial books contain outdated codes and teaching methods. So if you search Google, you end up with lots and lots of tutorials. You have to spend up to a whole 1-month period to learn custom theme design.

Here, I am trying to create one simple responsive WordPress theme with a sidebar. I also faced lots and lots of problems when I tried to create a custom theme. You can use a portion of the knowledge I acquire when creating a theme.

When I got lots and lots of frustration with customizing the Bulma CSS framework and finding out the WordPress theme structure, I found one of my friends had a super simple and attractive WordPress blog with up to 98- Google page speed score. he achieved this design customization and page speed score via the Astra Pro WordPress theme and WP Rocket plugin. I also get that page speed score and custom theme design via AstraPro. So my requirement to create a custom WordPress theme for my blog ended. But I keep updating this blog post whenever I have time to learn about custom WordPress theme design.

The difficulties I faced

• At the very beginning stage, creating one custom WordPress theme takes up to a one-month time period. You can't do any other office work.
• Nowadays, people have started to use block-based themes. So creating a classic WordPress theme is an outdated method.
• Creating a custom WordPress responsive theme header is one of the most difficult tasks you will face in theme design
• Bulma CSS navigation structure does not contain the <ul><li> method for menus. However, WordPress uses this method by default to create navigation menus.

2 Types of WordPress Themes

• Classic WordPress Themes
• Block-Based WordPress Themes (Nowadays its popular one)

How to Create a Custom WordPress Theme Using Bulma CSS

In this tutorial, I am using Bulma CSS to create custom WordPress themes. Bulma is a lightweight CSS framework. My plan is to create a simple WordPress theme for my blog. My main focus is getting 100/100 in the Google Page Speed test, better design to place Adsence Ads, and creating a lightweight theme based on small CSS and JS footprints. But I achieved this speed and optimization when I used premium WordPress theme builder frameworks like Astra Pro and GeneratePress with the WP Rocket plugin. Also, changing my SEO plugin from Yoast SEO to Rank Math SEO helped me achieve better search engine rankings.

• First, download Bulma CSS files from the official site. Extract the zip folder.
• We need a bulma.min.css file.
• Then create a starter WordPress template using underscores.me (WordPress Generator)

Setup XAMP Server, Install WordPress and Create and edit WordPress Theme in VS Code

Note: Use a small and memorable theme slug.

• Install XAMP Server software on your Windows PC. Download and install WordPress on your local system.
• Then move the underscore WordPress to the them folder.
• Open the theme folder in VS Code.
• Create a folder named “css” in your theme file and add the “bulma.min.css” file.

Now we have to include our CSS file in the WordPress theme. To do that, open the “functions.php” file.

Find the Enque scripts and style section and add the following code inside “function underscoreslug_scripts() {“

/**
* Enqueue scripts and styles.
*/
wp_enqueue_style( 'bulma', get_template_directory_uri() . '/css/bulma.min.css', false, '1.1', 'all');

Reference: WordPress Include CSS Doc.

Here “underscoreslug” is the slug URL you entered on the Underscore WordPress theme generator.

Now check the WordPress home page source code in the browser. The Bulma CSS file will be added.

How to Add Create a header using Bulma CSS

Open the header.php file. Refer to the following Bulma CSS tutorials and customize the header based on your design.

• Creating Header: Bulma CSS navbar doc
• Change the Navbar color in the Bulma CSS doc.
• Font size change; Bulma doc.

First, remove the following styles from style.css:

ul {
list-style: disc;
}

Now open the header.php file and customize the default header code to your theme design

In order to create a custom theme header, you have to change the default navigation menu CSS based on your HTML theme classes.

Use the ‘menu_class'  => ‘ ”, property in the wp_nav_menu function to add custom CSS classes. This class is applied to the ul tag. Reference: Wordpress.org – wp nav menu.

<?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                    'menu_class'  => 'is-spaced is-flex-direction-row',
                )
            );
            ?>

WordPress Snippets to create theme header

• To insert the Home Page URL: <?php echo esc_url(home_url(‘/')); ?>
• To Insert Blog name: <?php echo bloginfo(‘name'); ?>
• To get the site description: <?php echo $iphonetopis_description; ?>
• To add a search bar: <?php get_search_form(); ?>

You can't directly add custom CSS classes to the WordPress menu list or links. Use a WordPress snippet to add custom CSS classes to the li tag.

function _namespace_menu_item_class( $classes, $item ) {       
    $classes[] = "nav-item"; // you can add multiple classes here
    return $classes;
} 

add_filter( 'nav_menu_css_class' , '_namespace_menu_item_class' , 10, 2 );

Use a WordPress snippet to add custom CSS classes to a tag.

/* Add custom class to link in menu */
function _namespace_modify_menuclass($ulclass) {
    return preg_replace('/<a /', '<a class="navbar-item"', $ulclass);
}
add_filter('wp_nav_menu', '_namespace_modify_menuclass');

Use WordPress snippet to add custom CSS classes in the submenu

//Add custom CSS Classes to WordPress Sub Menu
class WP1_Sublevel_Walker extends Walker_Nav_Menu
{
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class='sm-container'><ul class='sub-menu'>\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul></div>\n";
}
}

Add “‘walker' => new WP1_Sublevel_Walker,” in wp_nav_menu() in header.php

wp_nav_menu(
				array(
					'theme_location' => 'menu-1',
					'menu_id'        => 'primary-menu',
					'menu_class'  => 'nav-links',
					'walker' => new WP1_Sublevel_Walker,
				)

Reference: WordPress.org doc – Add a div container in the submenu in the WordPress nav menu.

I will keep updating this article as soon as possible when I learn new things in theme design.