Tech 6 minutes read

How to build a WordPress theme?

Ever since the very beginning of WordPress, you have had an opportunity to build a website that suits the needs of your brand. When it comes to building a WordPress theme there are tons of WordPress themes out there. More than 11000 to be exact according to sources such as codeinwp

However, if your main goal is to stand out online among all the other websites the best thing to do would be to start building your WordPress theme from scratch. The main benefit of making a theme from zero is that the structure of your website will be customized. By choosing this path developers need more time to develop a website. But in the end, you will have a personalized and unique website for your business. This way the chances of your brand being easily recognized are much higher.

How to build a WordPress theme

So the real question is - How can you build a WordPress theme?

WordPress theme is located in the /wp-content/themes directory. So first of all you will need to create new directory inside /wp-content/themes. In this example, you will name it “ourtheme”, so all files that you create will be inside /wp-content/themes/ourtheme

Each WordPress theme must contain the following files:

  • style.css
  • index.php

Typical WordPress theme contains these files:

  • style.css
  • index.php
  • functions.php
  • header.php
  • footer.php
  • page.php
  • single.php
  • sidebar.php
  • archive.php
  • home.php
  • category.php
  • 404.php

style.css file:

Contains information about our theme, like theme name, author, website, version, license, etc. Also, it contains the main styles of how your theme will look.

Example:

/*
Theme Name: Ourtheme
Theme URI: http://themewebsite.com
Author: Author name
Author URI: http://authorwebsite.com/
Description: Theme description
Version: 1.0
License: license
License URI: http://licencewebsite.com/
Tags: tag1, tag2
Text Domain: ourtheme
*/

It is very important to have a unique Text domain without spaces and special characters. After you create style.css in /wp-content/themes/ourtheme

You will need to create an index.php file:

It is a required file in theme development and it is used to display a page when nothing more specific matches a query, for example:

It puts together a home page when no home.php file exists.

For now, only create empty index.php file with:

<?php ?>

Inside.

After you create it, login to your WordPress dashboard and go to: 

Appearance -> Themes

You will see your new theme in the theme list, activate it. If you visit your website root page, you will have a blank page, because you created a blank index.php file.

Now you will create a functions.php file, it acts as a plugin in your theme and it is loaded during WordPress initialization.

His main purpose is to:

So now you will create a basic functions.php:

<?php
function register_my_menu() {
register_nav_menu('primary-menu',__( 'Primary Menu' ));
}
add_action( 'init', 'register_my_menu' );
?>

It registers a new menu in Appearance -> Menus

After this you will make a header.php file, it is the main header that will be visible on each page of your website.

Typical header.php file contains:

  • head
  • logo
  • Menu

So inside header.php file you will add this code:

<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<div class="header">
<div class="header-logo">
<img src="your/logo/location/logo.svg"
</div>
<div class="header-menu">
<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>
</div>
</div>
<div id="content" class="site-content">

Inside head tags we call wp_head(); 

It is a WordPress core function that contains scripts (usually CSS, js, or fonts) that you added inside functions.php, it will also include the default CSS script you already created - style.css.

body_class() function will include wordpress classes in each page.

wp_nav_menu() function includes the primary menu that you created in functions.php, now if you add some menu in Appearance -> Menus, it will be visible on the website.

After the header, you will create a very basic footer.php file. It is the footer of your website and it must contain wp_footer() function.

   </div> <!-- close content div -->
</div> <!-- close page div -->
<?php wp_footer(); ?>
</body>
</html>

wp_footer() includes all footer scripts (usually javascript) that are registered in functions.php.

The next step is to create a page.php file, this file will display the page title and page contents you add when you open some page with the default template selected.

It defines the structure of the page you created at Pages -> Page

<?php
get_header();
/* Start the Loop */
while ( have_posts() ) :
the_post();
?>
<div class="title">
<h3><?php the_title(); ?></h3>
</div>
<div class="content">
<?php the_content(); ?>
</div>
<?php
// If comments are open or there is at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile; // End of the loop.
get_footer();

get_header() includes our header.php file.

get_footer() includes our footer.php file

the_post() called post type functions that you will use later such as the_title() and the_content().

the_title() shows page title.

the_content() shows page content.

comments_template() will show comments on your page.

Now create any page in Pages, under Page Template choose Default Template, save it and visit it, you will see its title and content.

You can also specify many different templates such as front-page.php file where you can define a custom structure for only the home page.

Conclusion

Yes, there are plenty of already made WordPress themes. Some of them are free while others are premium and you can purchase them. But as we mentioned in the beginning when it comes to building your business you should focus on making every aspect of your brand unique. By following these steps you can make your very own WordPress theme.

Nevertheless, if you need any help when it comes to WordPress feel free to contact us at office@bluegrid.io. Our team is waiting for you and we'll be happy to make your ideas become a reality! :)