Questions

WordPress Themes

,

Miscellaneous

,

WordPress Support

Build a WordPress Theme from Scratch

Shawn Mike

April 22, 2019

Need to build a WordPress theme?

In the following tutorial, we will guide you step by step towards creating a WordPress theme from scratch, integrating the theme with the SASS and Bootstrap framework.

Nowadays, it seems as though all the “WordPress developers” are actually “implementers” instead of actual developers. What they simply do is take ready-made WordPress themes, add a bit of styling, a nice looking logo, a smattering of WP plugins, and voila – you have a site. When being asked to start from scratch however, they get anxious.

WP is becoming more and more popular as the days go by, so it is important for anyone providing WordPress web development services to be at the top of their game. This means that you need to be able to build anything with WordPress for a client, within reason and logic. Dependency on frameworks and ready-made templates will only make you go so far. For that reason, hiring WordPress website design companies to build a project using starter themes is a good idea as it results in a unique design.  

Build a WordPress Theme

Being a WP Developer – Easier said than done?

Being a WordPress developer is not everyone’s piece of cake. You will need to be fluent in:

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • PHP
  • MYSQL (the amount written for WP varies on the project)

So basically what you need to be is an actual developer, equipped with experience in programming languages and web technologies. Knowing how to install a WP theme with plugins on a server is not sufficient for becoming a WP developer.

WordPress Theme File Structure

In order to actually start building a WP site from scratch, you will need to understand structure of a WP theme. Let us begin, shall we?

First off, download WordPress on your local machine from www.wordpress.org and unzip all the necessary files. You then need to locate the wp-content > themes.

Building the WordPress Starter Theme from Scratch

When you reach the themes section, you will see a few pre-installed themes. In the current location, we will create a new folder with the name of the theme that we want to build. Since we are planning to build a clean site with Bootstrap, we are going to call it ScanWP starter.

The first file you need to have is the style.css file. At the top file, you would want to enter a few comments, letting WP know what the name of your theme is. Within the comment string (/* text */), you would want to write the name of your theme, the URL, author name, description of the theme, version (1 obviously), license, tags, and text domain. Here is a rundown of what all of that means:

  • Theme Name: Self-explanatory, it tells the viewer the name of your theme that you see in your admin.
  • Theme URL: The URL that other people can use to download the theme.
  • Author: Name of the actual developer.
  • Description: Write anything relevant to your theme, and who it is meant for, etc.
  • Version: Version number if you are planning to upload the theme to the WordPress directory.
  • License: Leave the comment with the GNU license, making it open source.
  • Tags: The category people can use to find your theme in the WordPress directory.
  • Text Domain: We will not talk much about this, but it is the name used by people who translate your theme.

With that out of the way, we only have 2 more files to add before we actually activate the theme. Those two files are functions.php and index.php. You can add these 2 files without adding a single line of code in them. Your theme can now be activated. However, in order to actually activate it, you need to have a WP installation. If you already have it, you can skip ahead, but if not, you can try some of these.

WordPress Local or Server Development

  1. For local development, you can use XAMPP / WAMP / LAMP.
  2. You can use Desktop Server for local development as well.
  3. Developing a site on a live server.

For the purpose of learning, we usually choose local development because developing on a live server is pointless. We have built many websites using XAMPP and WAMP, but we have recently just shifted towards the Desktop Server. The process gets a lot simpler, but the previous two are fine as they are.

As of this writing, the best solution that we recommend is XAMPP (learn more here) and Gulp.

Activating the WP Theme

When you have the WP site up and running, all you have to do is navigate from the root folder into the wp-content folder and move towards the themes folder, which is where we were before. We should now have a folder with our theme name and 3 files in it. Namely the style.css, functions.php, and the index.php file.

We are now ready to activate the new theme and start getting our hands dirty with development. Log in to your WP installation and you will be redirected towards the login page. Simply add your username and password to log in. Navigate to the Appearance tab, which brings you directly to the themes page.

You will now notice that the theme is present on the themes page. All you have to do now is click the Activate button, and the theme is now in use.

Adding a WordPress Theme Screenshot

You might have realized that the themes that have been pre-installed have a nice screenshot, but your theme has no image at all. This part of the article is not mandatory but having it is beneficial if you want to do something with this theme. Simply add an image.

Within the theme folder, you can add a file that should be titled as “screenshot.png” with the dimensions of 800 x 660. Now once you refresh the pages of the theme, you will see the screenshot of the theme.

Adding Twitter Bootstrap to our WordPress Theme

First things first, if you have not heard of Bootstrap, we will provide you a little preview. We are not going to go in too much depth, you can read the documentation for that. With respect to front-end development, Bootstrap just makes all the hard work easier. Bootstrap is a pretty standard framework. Even if you do not know much of HTML or CSS, their documentation is perfect and you can simply read along and get it.

Normally when we develop a site with HTML or CSS, we usually use tags like <div>, <a>, and <p>. There are many others but these are the basic ones. Without bootstrap, these elements are simply static HTML and are not styled in any way. With Bootstrap, things get a lot easier since there are a lot of classes within these tags that you can use to style your text accordingly, making the difficult part of the job a lot easier. There are several benefits you can gain while using Twitter Bootstrap, and one of them is the grid system. Again, we will not go much in-depth with this but you can read all about it in the Bootstrap tutorial.

Basic Bootstrap Boilerplate

Now, you simply take the start template from Bootstrap and integrate the code within it to the WordPress theme. The boilerplate code is separated into 3 different groups:

  • The Header
  • The Footer
  • Content Page

With regards to WP sites, the entire top area of the site is called the header. It is a file with the name header.php. The lower area of the site is called the footer, located in a file called footer.php. The rest of it will be located in the file we will be using as the content page.

Within your theme folder, you can add 2 new files titled header.php and footer.php.

Adding the Code to the Theme Head

If you are a novice, then this code might seem daunting. But you should not be scared. We have simply added a template code up until the body tag, added the WP language attributes function, the WP function title, the WP head, which is a code that is need before the head and the body class function. It gives unique classes to every page on the basis of several variables.

<!doctype html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="profile"href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>

</head>

<body 

<?php body_class(); 

?>

>

Code to add to the Theme footer

<?php wp_footer(); ?>

<footer id="footer">

</footer>

</body>

</html>

The last thing you need to do before getting started is to include the 2 files in your content file. We are currently going to use the index.php file. So, within the index.php, you can add the following:

<?php get_header(); ?>

<h1><?php the_title(); ?></h1>

<?php get_footer(); ?>

Currently, we have set up our footer, header, and a content file. If you refresh the site now, you could see the “Hello World” symbol.

Code to add to functions.php

You might note that we haven’t added any of Bootstraps scripts or styles. This is because we are going to do it the WordPress way, through functions.php.

function ScanWP_enqueue()

{

wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

if ($_SERVER['SERVER_NAME'] != 'localhost')

{ wp_enqueue_style('style', get_template_directory_uri() . '/style.min.css');}

else 

{ wp_enqueue_style('style', get_template_directory_uri() . '/style.css'); }

wp_enqueue_script('customjs', get_template_directory_uri() . '/assets/js/custom.min.js', array('jquery'), '', true );

wp_enqueue_style('Arial', "https://fonts.googleapis.com/css?family=Arial:300|Arial:normal|Arial:700");

wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');

wp_enqueue_script('bootstrapcdn', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array('jquery'), '', true );}

add_action('wp_enqueue_scripts', 'ScanWP_enqueue');

In this one function, we have added appropriate codes and styling to the header and footer. As an additional bonus, we have also added a style functionality to decide which stylesheet to show, as well as added a Google font that you can use for free. If you really want to go the extra mile, you can use Fontawesome.

Now let us add some more functionality:

add_theme_support('title-tag');

add_theme_support('post-thumbnails');

register_nav_menus(array(

'header' =>'Custom Primary Menu',

));

function ScanWP_widgets_init(){

register_sidebar(array(

'name' =>'Footer 1',

'id' =>'footer_1',

'before_widget' =>'<div id="%1$s" class="widget %2$s">',

'after_widget' =>'</div>',

'before_title' =>'<h4 class="ttl">',

'after_title' =>'</h4>',

));

register_sidebar(array(

'name' =>'Footer 2',

'id' =>'footer_2',

'before_widget' =>'<div id="%1$s" class="widget %2$s">',

'after_widget' =>'</div>',

'before_title' =>'<h4 class="ttl">',

'after_title' =>'</h4>',

));

register_sidebar(array(

'name' =>'Footer 3',

'id' =>'footer_3',

'before_widget' =>'<div id="%1$s" class="widget %2$s">',

'after_widget' =>'</div>',

'before_title' =>'<h4 class="ttl">',

'after_title' =>'</h4>',

));

register_sidebar(array(

'name' =>'sidebar',

'id' =>'sidebar',

'before_widget' =>'<div id="%1$s" class="widget %2$s">',

'after_widget' =>'</div>',

'before_title' =>'<h4 class="ttl">',

'after_title' =>'</h4>',

)); }

add_action('widgets_init', 'ScanWP_widgets_init');

It is basically a game of where to accurately add your code. We have added some basic functions just to make our WP theme work properly. You can read more about functions.php here.

  • When you add the title tag option, it lets you remove it from the header.php and pull it from WordPress itself.
  • Post Thumbnails are just as they sound. They enable the option to have thumbnails on every post in our site.
  • We can create as many navigational menus as required, but we would need to register them first off.
  • The widgets wrap each widget that you will add from the site admin panel.

wp_enqueue_style + wp_enqueue script is pretty weird at first but it makes sense. Each script or CSS file that you want to link is done from here. We have added our Bootstrap CSS and JavaScript files here and removed them from the HTML. The last line, as you will see, has a few more parameters. Here is an explanation: add the script with the jQuery dependency and do not add the WP version at the end of the link. Lastly, add the script in the footer instead of the header. You can read more about it in the WP codex.

Conclusion – Build a WordPress Theme

So, this was our basic take on how to build a WordPress theme from scratch. Let us know what you think in the comments section below:

Leave a Reply

Your email address will not be published. Required fields are marked *

QUESTIONS