How to Convert a PSD to WordPress (Bootstrap) Theme

psd to wordpress

Responsive Web Design has emerged as a leading standard for building future-proof websites. No wonder almost all websites are powered by remarkable technique. It promises to deliver an optimum viewing and communication experience to the users.

A recent survey done by a Google Webmaster team on Google+ has revealed that more than 81 per cent people prefer using this approach with an aim to help websites render appropriately on varied devices. Hence, it is crucial to learn to create a Bootstrap WordPress theme with the help of a responsive framework such as Bootstrap for designing websites.

Although a host of WordPress themes are available these days, producing a WordPress theme customized to preferences using Bootstrap can add uniqueness and creativity in website design.

It is true that WordPress dominates more than 33% of all websites on the World Wide Web these days; conversion of Photoshop design file (PSD) into an oriented responsive WordPress theme is tough. The process involves a decent hold over writing queries (CSS media). Having a pre-coded responsive stylesheet brimming with essential features will help.

PSD to WordPress conversion

Bootstrap is a responsive front-end framework famous all over the world. This has made life easier for developers across the globe. The tutorial is all about understanding the PSD to WordPress conversion process using Bootstrap:

Step 1: Slicing

Slicing PSD File is the first and foremost thing in the process. It involves cutting and then dividing a single image file into several image files. Here, each file is comprised of different design elements of the main design. There is no escape from this process as coding a template or theme can only be done from multiple design files. So in order to design a file, you need to slice the main image file into several individual image files and hem them together seamlessly.

Slicing is best done with Adobe Photoshop. The software is easy to use and faster. Cutting design elements that cannot be structured dynamically such as solid color background and header/footer color is not important when slicing. Simply cut images like images and buttons that cannot be created dynamically.

Step 2: Bootstrap WordPress theme

After slicing image design file, visit http://getbootstrap.com. Here, you need to download Bootstrap (the latest version). Extract the zip file in a folder once the download is complete. The extracted folder will have three folders (css, fonts and js).

Step 3: Create HTML and CSS Files

Now code all sliced elements in HTML/XHTML format. Thereafter, you need to style them with CSS. The process involves creating index.html and a style.css file (you need to be a CSS and HTML expert for this). , which requires you to have enough mastery over HTML and CSS. Initialize Bootstrap in the head section. The related JavaScript will go in the body section of the index.html page as follows:

The code will be done as follows:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://collectiveray-dartcreationsco.netdna-ssl.com/css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”https://collectiveray-dartcreationsco.netdna-ssl.com/js/bootstrap.min.js”></script>
</body>
</html>
After this, use Bootstrap components into HTML templates. For instance, if you are creating a simple web page comprising of a navigation menu and thumbnail components, the code will go as follows:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://collectiveray-dartcreationsco.netdna-ssl.com/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=”https://collectiveray-dartcreationsco.netdna-ssl.com/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=”https://collectiveray-dartcreationsco.netdna-ssl.com/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=”https://collectiveray-dartcreationsco.netdna-ssl.com/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>&copy; WPBootstrap 2015</p>
</footer>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”https://collectiveray-dartcreationsco.netdna-ssl.com/js/bootstrap.min.js”></script>
</body>
</html>

Since no custom CSS will work on this page at this time, you need to develop a custom style.css file to be able to style HTML page contents as per your requirements. As an example, the following code is added to a custom 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;
}

You get the newly created custom CSS file work; simply include it in the HTML page. Place a reference link to the style.css file within index.html file. This should be right above the line where bootstrap.min.css is referenced.

<head>
<link href=”https://collectiveray-dartcreationsco.netdna-ssl.com/css/style.css” rel=”stylesheet” media=”screen”>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>


</body>

It is now time to open the index.html file in the browser again. This will let you see changes. The custom CSS will work now.

To Sum Up

That’s all about converting PSD to WordPress theme using Bootstrap. In case, you face any issue, hire a web developer or a professional WordPress developer.

You may also like

Leave a Reply

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