Guide To PSD To WordPress Theme Conversion Using Bootstrap

Micky TIPS & TUTORIALS

From past recent years, WordPress has significantly evolved from a simple blogging website to a full-fledged CMS. It has covered more than 43% of all the websites on the internet, including various types of websites ranging from simple personal blogs to big IT tech websites.

What makes this possible is WordPress’s incredible flexibility and customization features. On top of that, it has plenty of Official as well as third-party WordPress plugins and themes. Free, as well as paid WordPress themes, allow you to change the entire look of your website, whereas plugins help extend the website’s features and functionality.

But if you want something different that is not usual and can stand out from the crowd, you can even have an option to custom-build a WordPress theme for your website. And to make this possible, one of the best and most efficient techniques available is PSD to WordPress theme conversion.

If you are not familiar with the term PSD and the process of PSD to WordPress theme conversion, do not need to worry. Let me tell you in short” It is a process in which PSD file is being converted to Full functional WordPress theme using latest technologies”. If you want to know more, keep reading this post and you will get to know almost everything about PSD and the whole process of converting PSD to a WordPress theme in a very comprehensive way.

But before we further proceed, let us first clarify some basic terms that are involved in PSD to WordPress theme Conversion.

Table of Contents

What is PSD?

PSD or Photoshop Document is a default file format of Adobe to save files. These files are unlike any other JPEG or media files and provide multiple editing options. Due to this fact, the majority of web developers and Graphic designers prefer to use Adobe Photoshop to create custom designs for websites.

What is a WordPress Theme?

WordPress themes are simply collections of different templates and stylesheets that altogether help to define the appearance of a WordPress site. WordPress themes are just like any smartphone or computer theme that puts a simple layer of skin to change the look or appearance of your device’s interface.

PSD to WordPress theme conversion Step by Step process

So, without unnecessarily stretching this post, let us directly come to the conversion process of PSD to WordPress Theme. Where you will learn how you can convert a PSD file or template directly into a Full functional WordPress theme with the help of Bootstrap.

Step1: Check your PSD file and Analyze

If you are a Web designer and designed a website by yourself, you do not need to check and analyze your PSD files. But, if have got this job done by someone else and looking to convert it into a fully functional WordPress theme, it is better to analyze the file completely and make sure everything is fine as you expected before proceeding further.

Checking your PSD file and analyzing it not only anticipate the problems or issues you may face during the whole process but help you to get an idea about what things can be done if caught in any complications and how you can end the whole PSD to WordPress theme conversion process.

In addition to that, you must be careful while executing every step you are going to take in this process.

Step2: Splitting up PSD into multiple Images

After you have carefully examined your PSD file, the second step you need to take is to cut or split up your PSD into Images. In this step, the term Splitting simply means to divide or cut PSD into multiple image files each having its elements of editing features.

This step is critically important because it is next to impossible to do the coding for the entire website from a single Image.

That means you need to split up the image into multiple images, convert them into code and join them all together.

Now to do this, open Adobe Photoshop and open the PSD file you would like to convert into a WordPress theme. Now analyze the file and mark the image as per the components mentioned below:

Background design and other design elements
Header and separator
Footers and others

So, using the built-in Adobe slicing feature, you will be able to split up the Image into different small parts each having great quality, and save it into either JPEG or PNG format.

But one thing you must keep in mind while splitting up the PSD is that you have to be clear about which part needs to be sliced and which does not. It is because the PSD file consists of both static as well as dynamic elements. Where buttons, header, footer color, background gradient, etc. are dynamic and can be easily created by simply using CSS.

Hence, you are not required to slice it up these elements but rather cut only those parts which you cannot create using CSS code such as images, website logo, etc.

Step3: Download Bootstrap

After finishing up the splitting part, it is not time to download and set up Bootstrap. To do this, go to bootstrap and look out for the latest version of the framework to download. Once downloaded, open the Zip file, extract it to a specific folder and check the files. You will see two folders named CSS and JS are present inside it.

Step4: Create HTML5, JSS and CSS3

Now here comes the most technical part, i.e writing codes for the split files into HTML5 and styling them with CSS3 so that they appear exactly like the PSD file. But this can only be possible if you are pro into CSS3 and HTML5

In case you are a beginner and do not know anything about CSS and HTML, you shall not need to worry about it. There are multiple resources available on the internet, with the help of which you can easily learn everything about HTML5 and CSS3.

However, if you know how to write code for HTML5 and CSS3, you need to do the following:

First, you have to create a new folder.
Create an index.html file inside the same new folder
Create a style.css file inside the same new folder
A subfolder named media or images to keep your images.
A folder named Javascript which will contain javascript and jQuery files

Since in this post, we are using Bootstrap to code WordPress theme, you have to initialize the bootstrap in the head section and you have to keep the associated JavaScript in the body section of your HTML file (index.html) as shown below:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

Now at this point, you can make use of Bootstrap components in your HTML template. Let us understand it with an example, suppose we are creating a simple webpage that has only a Navigation menu and thumbnail component.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”/css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div class=”container-fluid”>
<div class=”navbar”>
<a class=”navbar-brand” href=”#”>WPBootstrap.com</a>
<ul class=”nav navbar-nav pull-right”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Order</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
<div class=”row”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image1.png”>
<div class=”caption”>
<h3>About</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image2.png”>
<div class=”caption”>
<h3>Projects</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image3.png”>
<div class=”caption”>
<h3>Services</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© WPBootstrap 2015</p>
</footer>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”/js/bootstrap.min.js”></script>
</body>
</html>

When you open this simple webpage on your browser, it will appear something like this:

From the above picture, you can see the webpage has no custom CSS applied. But if you would like to make changes to its appearance and style the components of HTML as per your requirements. You have to add the following code to the style.css file:

.navbar {
background:#222222;
margin-bottom:0px;
border-radius:0px;
}
.navbar-brand {
color:#FFFFFF;
line-height: 50px;
padding-left: 10px;
}
a.navbar-brand:hover {
color:#FFEB3B;
}
.navbar ul {
padding-right:4%;
}
.navbar ul li a {
color:#FFFFFF;
margin-right:10%;
}
.navbar ul li a:hover {
color:#222222;
background-color: yellow;
}
a.btn-primary{
background-color: #E91E63;
color:#FFFFFF;
}

Now, to make things work for our newly created style.css file. You have to mention it on your HTML page too. To do this, you need to include a reference link to the style.css file just above the line where you have reference bootstrap.min.css. The reference link is as follows:

<head>
<link href=”css/style.css” rel=”stylesheet” media=”screen”>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
…
…
</body>

Now, when you open the HTML file (index.html) on your browser again. You will find the page has been a little changed, especially at the header bar of the top, a button with different color as compared to the default one.

It was just an example for your reference to better understand how you can make use of Bootstrap to code and put together all the PSD elements into a working HTML page. And at the end result, you will have two files left with you,

index.html
style.css

Step5: Splitting HTML file as per WordPress Theme structure

As far as now, we are mostly talking about PSD to bootstrap. But now we are moving to the main part Bootstrap to WordPress theme conversion, i.e converting your basic and static index, HTML file into a fully functional WordPress theme. To do this, you have to break and restructure your index.html file into multiple PHP files following the required WordPress theme file structure.

In simple terms, you have to distribute all the contents of the index.html files into multiple PHP files so that WordPress puts them all together to form a fully functional webpage.

The structure of a typical WordPress theme looks as follows:

header.php
footer.php
index.php
sidebar.php
style.css
rtl.css
index.php
comments.php
front-page.php
home.php
single.php
page.php
category.php
tag.php
date.php
archive.php
search.php
attachment.php
image.php
404.php

Where The 404 Not Found, the template is used to display an error message” Error 404 post not found” when there is no post available.

But in reality, you can also use only index.php and style.css files to create a fully functional WordPress theme. Let us understand it with a simple example, suppose we are splitting up our index.html file into three files:

header.php
index.php
footer.php

To begin with, we take the header.php file first. Copy the entire HTML code that is included at the top of your index.html and paste it into the header.php file as shown below:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/style.css” rel=”stylesheet” media=”screen”>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div class=”container-fluid”>
<div class=”navbar”>
<a class=”navbar-brand” href=”#”>WordPressBootstrap</a>
<ul class=”nav navbar-nav pull-right”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Team</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</div>

Similarly, paste the codes of the middle part of index.html into the index.php file.

<div class=”row”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image1.png”>
<div class=”caption”>
<h3>About</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image2.png”>
<div class=”caption”>
<h3>Projects</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image3.png”>
<div class=”caption”>
<h3>Services</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>

Finally, copy the latter part of the index.html file and paste it into the footer.php file:

<hr>
<footer>
<p>© WordPressBootstrap 2019</p>
</footer>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

Now, you have been successfully able to split up the index.html file into various index.php files as per the WordPress theme structure. Now let us hop on to the next step of your tutorial where we will do the integration part.

Step6: Add WordPress Tags and Functions

Now the only thing left is to add WordPress tags. Due to this, it becomes easy to import awesome built functionalities that are provided by WordPress into your theme file. All you need to do is to add the right combination of built-in WordPress tags and functions and the rest will be handled by the CMS.

Due to this fact, many individuals prefer to choose PSD over WordPress theme conversion.

Earlier, you have seen how we split up our index.html file into multiple PHP files. But now we will add the WordPress tags to these files first and then put them all together to create a highly responsive WordPress theme as the final result.

But to complete this process, you are required to be a master in the PHP language. But if you are a beginner and don’t know anything about PHP language you can learn from the various resources available online.

In the example, which we have taken for reference in the above section, we have added a function to the header.php file to show the website title in the form of a link:

For our example, we have added the function <?php bloginfo( $show ); ?> to header.php in order to display the site title in form of a link:

<a href=”<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>” class=”navbar-brand”><?php bloginfo(‘name’); ?></a>

And for the menu part, the function <?php wp_nav_menu( $args ); ?> is used as follows:

<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’, ‘menu_class’,’nav navbar-nav pull-right’ )); ?>

Due to this, the header.php file will now look something like this:

<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class=”no-js”>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class=”container-fluid”>
<div class=”navbar”>
<a href=”/<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>” class=”navbar-brand”><?php bloginfo(‘name’); ?></a>
<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’, ‘menu_class’,’nav navbar-nav pull-right’ )); ?>
</div>

However, the footer.php file will be left as it is, but it will have the function <?php wp_footer(); ?>

The code of the footer.php will remain the same except for the addition of the function.

<?php?>
<footer>
<p>© WPBootstrap 2015</p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

Now for index.php file, to show thumbnail components you have to add the function<?php dynamic_sidebar( $index ); ?> into it.

<?php
get_header(); ?>
<div class=”row”>
<?php dynamic_sidebar(‘sidebar-1’); ?>
<?php dynamic_sidebar(‘sidebar-2’); ?>
<?php dynamic_sidebar(‘sidebar-3’); ?>
<hr>
<?php get_footer(); ?>

In addition to that, the above PSD to WordPress theme conversion won’t be enough unless we aren’t able to show our thumbnail components properly. To make this happen, we are required to define sidebar-1, sidebar-2, and sidebar-3 in the function.php file as shown below:

function wpbootstrap_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-2’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-3’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
);
}
add_action( ‘widgets_init’, ‘wpbootstrap_widgets_init’ );

This code will help you to allocate three widget areas in your WordPress dashboard, where you are required to insert HTML code for the respective thumbnail component in the sidebar1, sidebar2, and sidebar3 widgets. For your reference, we have to insert code in the sidebar1 widget as shown below:

<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image1.png”>
<div class=”caption”>
<h3>About</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>

etc…..

Now the only thing left to do is to load our stylesheets. For this, you have to call the wp enqueue () function in the function.php file as follows:

// Load the main stylesheet

wp_enqueue_style( ”wpbootstrap-style’, get_stylesheet_uri() );

// Load Bootstrap stylesheet

wp_enqueue_style( ‘wpbootstrap’, get_template_directory_uri() . ‘/css/bootstrap.css’);

However, if you want to refer to all the WordPress tags, functions, and other features, you can check out these resources given below:

When you are successfully able to add WordPress important tags and functions to your WordPress theme. You will have a fully functional and responsive WordPress theme available and you are ready to go.

Summary

So, that is all the steps you have to follow to convert PSD to WordPress Theme. If you follow the whole process mentioned above, you can easily create any custom WordPress theme which is fully responsive and functional by yourself. As you have also noticed, the whole process is not as easy as it seems and at some point, you are required to have strong technical skills and command of certain coding languages. If you are not able to figure out all of these by yourself, in this case, we highly recommend you hire a professional WordPress development company to do your job.

About Author

Micky Joseph

Micky is a passionate blogger, who writes enriching posts on web design, web development and technology news. He loves writing about web development, tips, tools, tutorials, cloud, hosting, domain, and also sharing knowledge about latest technology news. He also writes about cms, programming language and various software. Follow us on FlipBoard.