Upendra Tiwari

How to create a custom wp theme and benefits

By Upendra Tiwari

Last updated cal_iconDecember 15, 2021

WordPress themes play the most important role in creating WordPress websites. WordPress releases each year some free themes in the name of that particular year which is free, and we can find that on our theme panel as well as some paid themes are also available, which we can find as per our website type and requirement. That would be free or paid, but what if we don’t want to buy a new theme or we have a new idea and design in our mind to implement in our WordPress website? In that case, we have to create our custom theme in our website by HTML to convert the WordPress theme.

How to start – To start working on a custom theme, we have to choose one of the themes available in WordPress. Then we have to change the theme folder name to what we want to name our theme. But remember, just by changing the folder name, you can’t change the theme name from the admin panel; for that, you have to change the theme’s name in the style.css file, which you can find under the theme folder. When you open this file, you can see some descriptions showing under the PHP comments like theme name, theme URL, author name, author Uri, version, description, etc., as you put in the plugin development. So, here is the theme name where you can change your custom name and in the author name, you can put your name or your company name, by this, you are informing WordPress that you are creating a new theme with some specific details.

Now go to your admin panel wp-admin->Appearance->Themes. When you go to this location, you can see that the theme you selected and change the theme’s name is visible with your changed name.

So, now you start the changes for creating your custom theme.

Linking important files- The main files of any WordPress theme are their CSS and js files, we can put those files header or footer, but the most popular practice is to add the CSS files at header and js in the footer.

Before linking, make sure you have added the CSS and js files into your CSS and js folder in your theme.

So, the process of linking is the same as we linked any files we have to give the path of file means source location of the specific file, but in WordPress, we can’t give the path directly as we do in general we have to notify WordPress that we are linking files under the theme folder by an inbuilt function of WordPress, without that WordPress won’t consider that particular linked file. So, there are two main functions by which we are linked our file in the WordPress:

get_template_directory_uri()

get_template_url()

The above two functions are used mainly to link the files in WordPress; how I can give you an example for that :

As you can see in the above example, the same way we used in the other method, change the specific function name.

Now we are done with our initial formalities for creating our custom theme. If we write some HTML with the classes already in our linked CSS files, the HTML body will react as per the CSS code in the linked file.

Don’t forget to check that wp_head() and wp_footer() these functions should not be removed from the header and footer file because using these two WordPress loads some important files required for the proper functioning of the website.

Implementing HTML- We are aware that we are converting the HTML to a WordPress theme to create our custom theme, so after including the important files, you have to put your HTML in your theme. We all know very well that we got the HTML page with the .html extension, and in that file, we can easily see the header part under the “header” tag. We have first copied and pasted the HTML of the header part in our WordPress theme header.php’s “header” tag same thing is applicable for the footer part. Put the footer HTML in the footer.php under the “ footer ” tag.

Testing by a page- After linking the CSS and js files and adding the header and footer, you have to check first how it will load on the web page for that, you have to create a template and call your header and footer over there by the WordPress inbuilt functions for calling the header and footer. You need to create a template file and give a name. 

     For this, you can create a file into your theme directory with the .php extension, and in the file, you have to write template name in the PHP comments like this:

<?PHP

/*

* Template Name: Custom Page Template

*/

?>

That’s it your testing template page is created. Now you go to your admin panel and add a new page from wp-admin->Pages->Add New here.

Give a name and publish your page. Now you can see the very right of your screen there is a section named page attributes, and in that section, you see another sub-section named “Template” with a drop-down; when you click on that drop-down, you can see your recently created template are listed there. You can select and update your page. 

Now the template PHP file you created is linked with this template; whatever you call on your template PHP file or whatever you write over there, you can see on this page at the front end.

Here you have to call the header and footer with their respective function.

For calling header, you have to call get_header() function and footer by the get_footer() function there is no need to call any kind of inclusion function apart from these two.

When you call these functions, you can see your header and footer display like the visible in your HTML file.

Now that your main work regarding the custom theme is done how much as you want, you can create templates using the same header and footer function. You can create the custom post type for managing the blocks if needed; you can refer to my custom post type blog for that.

Benefits of using Custom WP Theme- Creating our custom theme has several advantages; some of the benefits are easily understandable by creating a custom theme, as I described above.

  1. Using custom themes provides us with freedom about changes in designs and most of the functionality in our website. We can modify the theme design as we want.
  2. We can modify and mold our theme by creating custom widgets, templates, and posts.
  3. By changing or adding the new CSS files, we can change our WordPress website’s UI.

Child Themes- Now we understand how we can create custom themes and some of their benefits, we go to the child themes. So, as we understand by name, a child theme has some parent theme. So, as per WordPress, a child theme has all the look and feel of the parent theme and its functions but can be used to modify any part of the theme.

Why do we need Child Themes- Suppose we want to modify our WordPress theme, but we want that actual functionality or actual look and feel also remain the same, so for the modification on that particular theme without affecting the main files, we create the child themes.

Child Themes Basic Nature- Child themes use all the needed templates from the parent theme. It doesn’t matter whether we call under the child theme folder. I will discuss how to create a folder for a child theme in further discussions. But if we override a particular template and take on the child theme, WordPress first takes that active child theme template, which comes under the rule of template hierarchy.

How to create Child Themes- Creating a child theme is very easy; we only need a minimum of two files to create the child themes; one is functions.php, and the other is style.css. In the functions.php, only we have to include or enqueue the style.css, and in the style.css, we don’t need to write any CSS code or any other things; we just have to put some information same as we have put when we are creating our custom theme. I can give you the minimum required code of child theme style.css of twenty-twenty-one’s child theme. Here it is:

/*

Theme Name: Twenty Twenty-One-Child

description: A child theme of the Twenty Twenty default WordPress theme

Author: Nick Schäferhoff

Template: twentytwentyone

Version: 1.0.0

*/

The above code clearly shows that we need very little information to create the child theme. The CSS required for managing the theme can be taken by the parent theme, so we don’t have to worry about it. Now we have to add our child theme’s functions.php, which is the main file of our theme because it only includes the CSS of your theme. So, the inclusion of CSS files in functions.php is an ordinary method of WordPress to include the styles by using the wp_enqueue_style function. The code for this is :

And that’s it, we are done with creating a child theme. We can see our newly created child theme in our WordPress admin panel on wp-admin->Appearance-> Themes this location with the name of the child prefix.                                    

Template Hierarchy- Until now, we have understood most things about custom theme creation and child themes. Without this one topic, our knowledge of custom themes or WordPress themes is always incomplete, and the topic is Template Hierarchy. So, by the name, we can understand its hierarchy of templates.

How the template hierarchy is used or works, we can understand by an example suppose we are called some template in our custom child theme. The WordPress doesn’t find that template there then it goes and search its parent theme and search that specific template called, and if it is also not found therein that condition, WordPress loads the index template.

So, it works on a hierarchy basis that’s why the bunch of these templates combinedly are called Template Hierarchy.

We can understand template hierarchy with the primary example of the home page: by default, when you install WordPress, it loads your latest blog page as your front page or homepage of your website, followed by the index.php template file that’s why it’s also called the index page. But when you would create a separate template for your home page and already call it in any static page of WordPress and set that page as a front-page from settings->reading Homepage section, here you can opt for the static page rather than your latest posts then you can assign the pages for your front page or homepage and your blog posts page, and this condition WordPress loads your selected page for the home page but, suppose your called template file does not exist then it will redirect to or called the index.php the default page template file of WordPress, like at the starting when you install WordPress your latest blog post page is displaying your front page the template name for index or blog page is called the index.php.

By the above example, we understand if we assign some page to a specific template, WordPress first called that one, and if it was not found in your theme directory, then it follows its basic nature and when default WordPress is installed like if it is front-page, it goes on index.php or your posts page and if it’s normal kind of page it loads page.php.

So, this process of searching and calling the template files according to the specific rules is called the template hierarchy.

Sidebars- When we talk about WordPress custom theme development or any WordPress theme, sidebars play the most important role in theme development.

Sidebar helps us add a sticker in our website that we can add anywhere or if we want to display on all pages, so we have to call that widget into the respective template part files or template files. For creating a widget, we are called an inbuilt function of WordPress called register_sidebar, and we have to pass the parameter in it in the active theme’s functions.php like this:

 In the above code, we can see how we can create the WordPress sidebar. In the WordPress sidebar, we can add the widgets most popular and inbuilt widgets we can see on the left side when we visit the widget section on the admin panel.

wp-admin->Appearance->Widgets For calling the sidebar we are using another inbuilt function of WordPress which is dynamic_sidebar(). We have to pass the sidebar id into the function, and we can call in any template anywhere in the WordPress files. For the above example, the sidebar calling code should be like this:

<?PHP dynamic_sidebar(‘sidebar-1’); ?>

    That’s it, we are done.

And when we create the custom templates, we put the HTML in between the get_header() and get_footer() functions. We have also made that dynamic so the user can manage it by the admin panel and make changes.

Making Dynamic Template: Once we are done with the basic structure of the WordPress template, we can put our HTML if we are converting the static HTML part to the dynamic. We are calling the header.php by the function get_header() and footer.php Byu get_footer(). In the header.php, we have to make our static HTML

menu dynamic so that we can manage that by the admin panel wp-admin->Appearance->Menus.

So, we can use the already created menus of WordPress or create our new ones by using the function register_nav_menus().

For example:

 You can add multiple menus like primary and footer, as shown above.

Then in the menus section in the admin panel wp-admin->Appearance->Menus, you have to click on the create new menu link give some name on the menu name for here; we take the Primary menu and click on the blue button named Create Menu. On the same screen, you can see the menu names with the checkboxes, and that name is also mentioned there, which you have recently created, Primary Menu and Secondary Menu. You have to choose which menu you want to call; the admin-generated menu will display automatically wherever you call that particular menu. In the admin, you have to select the pages from the list of existing created pages on the left-hand side of the screen by selecting the checkboxes and clicking on the  Add to Menu button.

You can change the order of the pages by dragging and dropping the menu items. 

Now it’s time to call the menu on the template generally, we call the header menu in the header.php, and if we have the footer menu, then we call it on the footer.php the way of calling in both of the conditions are the same we have to use the wp_nav_menu() function. We have to pass the parameters in the function as we do other functions. Here is an example of usage of the wp_nav_menu function :

wp_nav_menu( array( ‘theme_location’ => ‘extra-menu’, ‘container_class’ => ‘my_extra_menu_class’ ) );

So, by using the above function, you can call the menu the parameter named ‘theme_location,” which is that parameter where you have to call that menu name you created using the register_nav_menu().

So, by this method, you can make your HTML menu to WordPress dynamic menu and manage your menu from the backend by the drag and drop method.

The same thing applied to the footer menu and any other menus.

Adding CSS and JS files- When we started our theme development, we saw that how can we link the files, but what if we have to enqueue or call our style or js file in between any template code or our theme’s functions.php or in between creating any plugin we have to enqueue the CSS and js scripts for that. For this, WordPress provides the functions for enqueueing the files :

  1. For js and jQuery wp_enqueue_script().
  2. For css wp_enqueue_style().

Use of both functions we can understand by the following example:

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );

function my_plugin_assets() {

wp_register_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );

wp_register_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );

wp_enqueue_style( ‘custom-gallery’ );

wp_enqueue_script( ‘custom-gallery’ );

}

In the above example, you can easily understand how to define or register our script. We have to choose a name for our script, and after you have to give the path of that particular file, these two are the critical parameter of the wp_register_script() and wp_register_style() function.

   So, until now, we have covered most of the things we should be aware of when creating the custom WordPress theme.

Get In Touch

How Can We Help ?

We make your product happen. Our dynamic, robust and scalable solutions help you drive value at the greatest speed in the market

We specialize in full-stack software & web app development with a key focus on JavaScript, Kubernetes and Microservices
Your path to drive 360° value starts from here
Enhance your market & geographic reach by partnering with NodeXperts