Tutorial Create WordPress Theme From Bootstrap Template For Beginner

I’ve shared a tutorial about creating a WordPress theme using underscores in previous articles. I think the article is a little difficult to understand by a novice. On this occasion, I tried to explain again how to create a WordPress theme from scratch using HTML templates and Bootstrap framework. Hopefully, this article can be useful for you all.

I still use underscores.me as the basic theme for making of WordPress theme. Because underscores the most famous and easy to use. Additionally, Bootstrap is still a favorite CSS framework to create web interface becomes responsive. In this article, I include HTML template that I named wiro sableng. A layout template that we will change into WordPress theme as shown below.

Tutorial Create WordPress Theme From Bootstrap Template For Beginner

My combat equipment used to create WordPress themes

1. Underscores
2. Bootstrap framework
3. Html Template
4. As a code editor, I use sublime text 3
5. A cup of coffee, pizza, spaghetti, lemper, mendoan and any snack that you like.

I wrote this tutorial in some parts, here the list

1. How to download underscores theme and the basic settings.
2. Transfer Asset into theme folder and convert custom.css into style.css
3. Convert Header template into header.php on WordPress Theme.
4. Convert Footer template into footer.php on WordPress Theme
5. Convert Blog Index dan blog excerpt display into WordPress theme
6. Convert Post Page into single.php and create new template-part to accommodate the contents of the post.
7. Smoothing the comment template
8. Smoothing the Sidebar Widget
9. Smoothing the widget search layout
10. Convert page, archive, search and 404
11. Creating a menu option on the WordPress Theme using Option-tree

How to create WordPress theme from Scratch Template Html for Beginner

1. How to download underscores theme and the basic settings.

– Please download Basic WordPress Theme from underscores.me

– The theme that we will make, I gave the name Wiro Sableng. Who knows wiro sableng? Perhaps if you are Indonesian people will be familiar with this name. He is a famous superhero from Indonesia (LOL). I chose this name at random, because only as a medium of learning, please select the name that you like. Okay back to the tutorial, options for making the themes I make as shown below

Underscores option attribute

– Press generate to download the theme.

– I am sure you have installed WordPress on your local server. If you’re using windows operating system, you can use XAMPP server as an alternative.

– Install your new theme and the display will look like the following.

new theme installed first look

– Screenshots of the theme will display a blank screen if you want to change it into a more beautiful, change the image in the theme with the format size 1200 x 900 with the name screenshot.jpg. Or please download the image here

– To change the theme Information, please edit style.css.

The early part creating WordPress theme has been completed. Next,we will enter into the main parts, convert HTML templates into WordPress Theme.

2. Transfer Asset into theme folder and convert custom.css into style.css

In the source file, there is assets folder that contains supporting files such as CSS, Images, and javascript files. Folder assets we will move into the WordPress theme folder. Download here if you don’t get it.

Move the folder assets into WordPress theme folder. Consider the following picture:

Transfer Assets Folder To WordPress Theme Folder

After moving the folder assets , the next step is to transfer custom.css into style.css on WordPress themes. Copy the entire code in custom.css (assets/css/custom.css) in the style.css file on the bottom line. Don’t forget to give marked comment from being forgotten as shown below

Comment Mark On Style.css

Please open your site and see if it looks already like the following image? If true, you have successfully completed this second phase

WordPress Display After Convert Custom.css Into Style

The second step has been completed, the next is to convert the header template.

3. Convert Header template into header.php on WordPress Theme.

Convert Header Template To Header.php In The Header.php At WordPress Theme

To create a WordPress header layout, as shown above, we need to move a few lines of code in the template into a WordPress theme. The composition layout in WordPress theme is divided into several such as headers, footers, widgets, index, page, single post and others.

Please copy the following code into header.php

We need wp_bootstrap_navwalker class to create bootstrap navigation menu at the WordPress theme to running well. Please download navwalker class here. Then copy wp_bootstrap_navwalker.php into folder ‘inc’ in the theme folder.

Wp Bootstrap Navwalker

Add these code below into function.php , so the wp_bootstrap_navwalker class can run well.
require get_template_directory() . '/inc/wp_bootstrap_navwalker.php';

Check your site from browser, make sure your site look like the picture below

Convert Header Wp Tutorial Create WordPress Theme From Bootstrap Template For Beginner

In order to the layout look nice and neat. Please create WordPress menu from the dashboard and don’t forget to choose a primary location for the menu.

Create WordPress Menu And Locate To Primary

There is a home symbol in the left navigation menu in the HTML template. In order to create static menu on WordPress theme, WordPress need new function. Thanks to galen gidman who create the tutorial how to create a static menu on WordPress. Please add the following code into function.php in the theme in bottom of line.

Then, add new parameter into your wp_nav_menu :

'items_wrap' => my_nav_wrap()

Wp Nav Menu WordPress

Save and refresh your site. If successfully, the layout of the site will like the following picture.

Convert Header Template Into WordPress Theme Tutorial Create WordPress Theme Bootstrap

Explanation :

bloginfo(‘template_directory’) : is to displays the URL of active theme’s directory.
wp_nav_menu() : to display the WordPress menu.

tutorial how to transfer Header template into header.php on WordPress Theme is finished. The next step is to convert footer template into footer.php on WordPress Theme.

4.Convert Footer template into footer.php on WordPress Theme

Do you know, why after convert header, then instantly convert the footer before making the main layout?

Consider the navigation button bar on the mobile display, is it working? of course not, because I have not moved the bootstrap js and jquery into WordPress themes. So this is a mandatory step that must be done before create the main layout.

Convert Footer Html To WordPress Footer Php

Copy the following code into footer.php in the theme

Then, please register a new menu on function.php, copy the following code :

Please create a new menu on WordPress theme dashboard and choose “Secondary” as menu location

Create Bootstrap WordPress Theme Secondary Menu

Save and refresh your browser. If successfully, the navigation bar for the mobile display will work properly as shown below.

Dropdown Navigation Menu Tutorial Create WordPress Theme From Bootstrap Template For Beginner

Until this step of creating WordPress theme on the footer section have been successful. Next a discussion of making the main part and the Sidebar Widget.

5. Convert Blog Index dan blog excerpt display into WordPress theme

In this step, we will transfer the blog’s main part, it is Blog Post. If this step successfully, we can create another page like page.php, single.php and another page with easy,

This section is an important part because at this step will be the same as the step for the preparation of the page, archive and single post on WordPress. So that after completing convert the blog index and blog excerpt layout, will speed up the process of making another page.

Open index.php in the WordPress Theme and copy the following code :

Explanation :

The main layout is divided into two, namely article layout and widgets layout located on the right sidebar. We need a grid system bootstrap to smoothed articles and widgets layout. There are three main components that must be met in creating a grid on a bootstrap namely containers, rows, and columns.

From the above code, we already have 1 container, 1 row and 2nd column with class col-sm-8 and col-sm-4.

get_template_part( 'template-parts/content', get_post_format() ); is the syntax for calling the component content of the article. Open the template-parts folder in your WordPress theme, will find 4 PHP files starting with the prefix “content”.

Template Part Content WordPress

The content.php template is basically the blog overview. In order to the blog’s layout looks like the template that I have to provide, then we must change the contents from content.php. Copy the following code in content.php

[php highlight=”[22,23,24,25,26,27,32,34,38″]]
<?php /** * Template part for displaying posts. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WiroSableng */ ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<header class="entry-header">
<?php
if ( is_single() ) :
the_title( ‘

<h1 class="entry-title">’, ‘</h1>

‘ );
else :
the_title( ‘

<h3 class="entry-title"><a href="’ . esc_url( get_permalink() ) . ‘" rel="bookmark">’, ‘</a></h3>

‘ );
endif;

if ( ‘post’ === get_post_type() ) : ?>

<div class="post-details">
<i class="fa fa-user"></i> <?php the_author(); ?>
<i class="fa fa-clock-o"></i> <?php the_date(); ?> | <time> <?php the_time(); ?></time>
<i class="fa fa-folder"></i> <?php the_category(‘, ‘); ?>
<i class="fa fa-tags"></i> <?php the_tags(); ?>
<i class="fa fa-comments"></i> <a href="<?php comments_link(); ?>"><?php comments_number(‘0 comment’,’1 comment’,’% comments’); ?></a>
</div>

<!– post-details –>
<?php endif; ?>
</header>

<!– .entry-header –>
<?php if(has_post_thumbnail()){ ?>

<div class="post-image">
<?php the_post_thumbnail();?>
</div>

<!– post-image –>
<?php } ?>

<div class="post-excerpt">
<?php the_excerpt();?>
</div>

<!– post-excerpt –>

</article>

<!– #post-## –>

Explanation :

There are some functions of the WordPress code that is used as the section of code that I gave highlights

1.the_author() : used to display the author’s public name
2.the_date() : used to display the date of publish post
3.the_time() : used to display the time of publish post
4.the_category(‘, ‘) : used to display the category post

In my opinion, the main parameters used in “the_category” is separator part , used to beautify the look of the category. In general usage, as follows the_category( $separator, $parents, $post_id ) , further information please visit the official WordPress codex

5.the_tags() used to display the tags post. Same as “the_category”, the main parameter used is the separator part.
6.comments_link() used to display anchored URL to a single comment
7.comments_number used to show the comment’s count. The general use of comments_number as follows comments_number( $zero, $one, $more ) .
8.has_post_thumbnail() used to check if a post has a featured image/thumbnails to display? but some posts don’t have thumbnails
9.the_post_thumbnail() used to display post thumbnail or featured image. The_post_thumbnail usage should be followed by has_post_thumbnail function , so that WordPress theme you create has no error occurred.
10.the_excerpt() used to display the post excerpt.

In general, the_excerpt usage as the following image

Default Excerpt WordPress Theme

To be good as in HTML templates, to change that, we must create a new function on function.php.

Add the following code in function.php in the WordPress theme

Yup, this step seems to be finished, Please create a new post and make sure the results as shown below

Main Blog Display How To Create WordPress Theme From Scratch

6. Convert Post Page into single.php and create new template-part to accommodate the contents of the post

This post page is a little similar to index.php. Please copy the following code in the single.php in your WordPress theme

Explanation :
get_template_part( 'template-parts/content', 'page' ) used to invoke the template post i.e. content-page.php.

Then copy the following code in content-single.php

The difference is only on the_excerpt() and the_content().

This tutorial has been completed, hopefully, you get to understand this tutorial.

7. Smoothing the comment template

The comment default template on the underscores isn’t neat. in order to the comment templates as HTML templates, I provide, need to be changed some code at comments.php. Copy the following code in comments.php.

Save and refresh again your browser, see the results? comment layout being more tidy and Nice. You need to understand in this step is the comment title part

Change Comment Title How To Create WordPress Theme For Beginner

You can change the words in the comment to your liking (review, thought, etc..)

8. Smoothing the Sidebar Widget

Note the following picture

Sidebar Heading Not Seo Create Theme WordPress
Look if the widget title heading is bigger than the post title heading. To spruce up the title please open function.php and edit on the register widget areas as shown below

Sidebar Register How To Create WordPress Theme From Scratch

Change the h2 element before_title and after_title become h4. Keep and please refresh your browsers back. This also affects the quality of On Page SEO on the web

9. Smoothing the widget search layout

Default Search Form
The image above, in my opinion, is not very neat and elegant. To create a custom search bar widget, you need to create a new file in your WordPress theme.

1. Create new PHP file namely searchform.php.
2. And add the following code below :

Save and refresh your browser. You will see a new search form

New Search Form

10. Convert page, archive, search and 404

Basically the page, archive, search, and 404 layouts same with index.PHP, Please copy the following code on page.php

For the archive, search and 404 page , please try it by yourself so you better understand.

11. Creating a menu option on the WordPress Theme using Option-tree

The menu options are typically used to replace a web icon (favicon), website logo, put the google webmaster script, menu to display the slider post. In this tutorial, I will just create a menu option to display the favicon and website logo. Please follow the following steps

  • I use the plugin option-tree to make an option on WordPress theme, read more information here.
  • Please download option-tree plugin here.
  • Copy option-tree folder into WordPress theme.
  • Open function.php and add the following code

  • Open file ot-functions-admin.php (option-tree/includes/ot-functions-admin.php) and edit the code like the following image :

Ot Function On Option Tree Plugin Setting Default

  • Open file theme-options.php (option-tree/theme-options) and add the following code below

Save and refresh your dashboard menu page. There is a new menu on appearance menu like as shown below

Wordpress Theme Option With Option Tree Plugin

Wordpress Theme Option

  • If you have managed to create a menu option like the above step, the next step is to place the code option on the page concerned
    • header.php

Favicon Option

Header Logo Option

  • footer.php

Navbar Logo Option

Save and create option on your WordPress Dashboard.

If you need the full source, please download at the following links

So my Tutorial Create WordPress Theme From Bootstrap Template For Beginner may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.