Convert a PSD to WordPress (Bootstrap) Theme in 5 Steps

Slowly but surely, Responsive Web Design has become a dominant standard for building future-ready websites. These days, almost all websites are powered by this amazing technique to deliver users an optimal viewing and interaction experience. According to a recent survey conducted by the Google Webmaster team on Google+, over 81% people prefer to use responsive design approach to make their websites render properly on all kind of devices. That's why it is essential to learn how to create a Bootstrap Wordpress theme using Bootstrap or another responsive framework for your web design. While there are plenty of free WordPress themes, creating your own custom WordPress theme using Bootstrap is the ultimate expression of creativity in web design.

Even though WordPress dominates over 24% of all websites, converting a Photoshop design file (PSD) into a well-functioning responsive WordPress theme is not as easy as you think. This requires you to have good grip over writing CSS media queries that ultimately dictate whether or not a theme is responsive. Wouldn't it be better if you get a pre-coded responsive stylesheet packed with all essential features?

Convert Psd to Wordpress Bootstrap theme - a tutorial

Thanks to Bootstrap, the world’s most popular responsive front-end framework, for making developers’ life easier, this is now a fairly simpler task than it used to be. In this bootstrap wordpress theme tutorial, we’re going to show you how to turn a PSD template into a responsive WordPress theme using Bootstrap as your Wordpress framework.

Let’s start! We're first convert our psd to Bootstrap, so essentially, our first part ignore Wordpress, and is really and truly a PSD to Bootstrap tutorial. The second part converts the theme we developed into a WordPress theme, so at that point, it all becomes a PSD to Bootstrap tutorial.

Download our pack of 20 WordPress (Bootstrap or not) Starter Themes

Just like always, we like to make your life easier by giving you a bunch of things to help get you started. After you've learned the basics of creating a WordPress theme, why not get started with one of the WordPress Starter themes.

Download our 20 WordPress Starter Theme bundle now

Top Essential Tip

Creating a great WordPress theme requires quite an advanced skill set. Although writing it yourself might seem like the best option, hiring a great WordPress developer (for example from Toptal) is probably much more cost-effective in the long run. In essence, you'll get a great result, in a very short time. 

PSD to BootStrap Tutorial Step 1: Slice the PSD File

Slicing is the first and foremost thing in entire PSD to responsive WordPress conversion process. The term “slicing” might seem quite confusing to you at first, but you don’t have to worry much about it. Slicing refers to cutting and dividing a single image file into multiple image files, each of which contains different design elements of the whole design. This is crucial since you can’t code a template/theme from a single image design file. Therefore, to design a web page, you first need to slice the main image file into many individual image files and then sew them together seamlessly.

PSD Slicing to convert to HTML and CSS and eventually to Bootstrap

Usually, most of the web and graphics designers prefer to use Adobe Photoshop for slicing. Although the same thing can be done using an equivalent image editing software like Microsoft paint, but I highly recommend you use Photoshop since it makes the job easier and faster. Whatever software/application you use, the main point is to come out with pixel perfect image files in the end. Besides that, you don’t need to cut design elements – like header/footer color and solid color background – in full, which can be created dynamically. Instead, only cut design elements - like buttons and images – that cannot be created dynamically.

Find below a YouTube video which explains the basics of PSD Slicing

https://youtu.be/XgxEieLbloc

Step 2: Download and Bootstrap your WordPress theme

Once you have your image design file sliced, go to http://getbootstrap.com and download the latest version of Bootstrap from there. After completing the download, extract the zip file in a folder. Now if you open the extracted folder, you’ll find three folders – css, fonts and js - inside it.

Step 3: Create Index.html and Style.css Files

The next step is to code the sliced elements into HTML/XHTML format and style them using the CSS. For this, you need to create an index.html and a style.css file, which requires you to have enough mastery over HTML and CSS. Since you want to develop your theme using Bootstrap, you’ll have to initialize Bootstrap in the head section and the associated JavaScript in the body section of your index.html page 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://cdn.dart-creations.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://cdn.dart-creations.com/js/bootstrap.min.js"></script>
</body>
</html>

Now you can make use of Bootstrap components in your HTML template. For example, here I’m building a simple web page with a navigation menu and thumbnail components:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.dart-creations.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://cdn.dart-creations.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://cdn.dart-creations.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://cdn.dart-creations.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://cdn.dart-creations.com/js/bootstrap.min.js"></script>
</body>
</html>

If you open this file in your browser, it should look something like this:

BootStrap Wordpress Theme - 1st draft

As you can see, no custom CSS is working on this page currently. So to style the contents of the html page according to our requirements, we’ll create a custom style.css file. For my example, I’ve added the following code to my 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;
}

To get our newly created custom CSS file work, we need to include it in our HTML page (just like we did bootstrap.min.css). So include a reference link to the style.css file in your index.html file, just above the line where you referenced bootstrap.min.css.

<head>
<link href="https://cdn.dart-creations.com/css/style.css" rel="stylesheet" media="screen">
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
...
...
</body>

Now open index.html file in your browser again and you’ll see the change – custom CSS is working now:

Convert PSD to Wordpress BootStrap Theme - Draft 2

This was just a simple example. Likewise, making use of Bootstrap, you can code up your entire PSD file (of course, after slicing) into HTML. At the end of this step, you’ll have two files in your hands: one is index.html and another is style.css.

So far we were mostly on a PSD to Bootstrap tutorial. Now comes the conversion to a Bootstrap WordPress theme - in reality we're going to a PSD to WordPress tutorial, because our final result will take us from a PSD to a WordPress theme.

Would you rather not start from scratch? This bundle of WP starter themes will help you get started.

Download the 20 WordPress Starter Theme bundle now

 

Step 4: Break Index.html File According to WordPress Theme Structure

...at this point we are more of a PSD to WordPress tutorial

The main reason behind converting a Photoshop design file to WordPress is to create a well-functioning WordPress theme that could be uploaded to the WordPress dashboard. Now that you have the index.html file of your PSD, you need to break it into multiple php files according to WordPress theme file structure. Doing so, you would not only be able to convert the static index.html file to a dynamic WordPress theme but also be able to add various functionalities to it. Really and truly the next phases of this conversion are a PSD to WordPress tutorial, because now we are taking our theme towards WordPress.

To facilitate better coding and categorization, a typical WordPress theme comprises of several PHP files such as header.php, footer.php, index.php, sidebar.php, search.php and so on. However, you only require index.php and style.css files to create a fully-functional WordPress theme. As a rough example, here I’m breaking my above created index.html file into three files: header.php, index.php and footer.php.

Basic Wordpress template structure

Let’s start with header.php. The entire HTML code that is included at the top of index.html page will go into the header.php file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.dart-creations.com/css/style.css" rel="stylesheet" media="screen">
<link href="https://cdn.dart-creations.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>

While the middle part of index.html file will go into index.php file:

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://cdn.dart-creations.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://cdn.dart-creations.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://cdn.dart-creations.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>

And our footer.php file would look something like this:

<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://cdn.dart-creations.com/js/bootstrap.min.js"></script>
</body>
</html>

Thus, this step includes breaking up your index.html file into header.php, index.php, footer.php and other necessary feature files according to WordPress theme file structure.

The complete list of Wordpress theme files that every theme should have can be found below - with an image to show how these relate to each other:

  • style.css
  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php
  • page.php
  • comments.php
  • 404.php
  • functions.php
  • archive.php
  • searchform.php
  • search.php

If you have to following a PSD to WordPress tutorial, you'll always find that they result in a structure similar to the follow. The below is a more detailed view of what a final WP Theme should look like:

WP Theme - detailed structure after following a PSD to WordPress tutorial

Step 5: Add Multidisciplinary WordPress Tags to your Bootstrap template

Final step of our PSD to WordPress tutorial

The best thing about WordPress is that it offers a myriad of built-in functions that can be used to add custom functionalities to a WordPress theme. To incorporate any desired functionality into your WordPress theme, all you need to do is using the right set of inbuilt function tags in your theme files. WordPress will take care of everything and that’s what makes WordPress so powerful.

In the previous step, we’ve broken up the index.html file on the ground of WordPress theme file structure. Now it’s time to add WordPress PHP tags to various theme files - like header.php, index.php, footer.php and sidebar.php etc – which we’ve got in the previous step and then combine them together to produce a highly-functional WordPress theme.

For my above example, here I’ve used the <?php bloginfo( $show ); ?> function in header.php to show my site's title in a link:

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" class="navbar-brand"><?php bloginfo('name'); ?></a>

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

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

Now, my header.php file would look 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>

The footer code for my footer.php will remain same except adding <?php wp_footer(); ?> function.

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

Now let’s move to index.php. To show my thumbnail components, I’ve used <?php dynamic_sidebar( $index ); ?> function.

<?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(); ?>

That’s not enough! To show our thumbnail components properly, we need to define sidebar-1, sidebar-2 and sidebar-3 in our functions.php file as follows:

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 will register three widget areas in WordPress dashboard, where I would need to put the “HTML code” for each thumbnail component in sidebar-1, sidebar-2 and sidebar-3 widgets respectively. For example, I’ll put below code in sidebar-1 widget.

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://cdn.dart-creations.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>

And so on!

The last thing we need to do is to load our stylesheets. This can be done by using wp enqueue style () 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');

For a complete list of all tags and functions available in WordPress, I recommend you go through these official WordPress pages:

  • Template Tags: This page provides you a complete list of WordPress tags, each of which has a dedicated page where you can find more information about a particular tag.
  • Function Reference: This page is a reference guide to all PHP functions used in WordPress software. Like Template Tags, every PHP function is linked to a dedicated page where it is explained in detail with appropriate examples.

After adding essential WordPress tags and functions, all these files will be placed in a single folder having the similar name to the theme name. Thereafter, you would need to place this folder in /wp-content/themes/ directory of your WordPress installation. And that is the final step of the PSD to WordPress tutorial!

Once you have done that, you would have a well-functioning responsive WordPress theme using Bootstrap that you can activate via WordPress dashboard. 

Ready to kick things off?

Start your WP Theme by Downloading the 20 WordPress Starter Theme bundle now

Conclusion:

That’s all for now about how to creating a responsive Bootstrap WordPress theme from a PSD file. Whether you're a newbie or a pro, this pst to bootstrap tutorial and then to Wordpress should surely provide you with the most simplified way of turning a PSD file into a responsive WordPress theme using Bootstrap. However, if you face any kind of problems in the conversion process, there are two things you can do. You can hire a web developer on Toptal, where they have the top 3% of talent worldwide, so you don't have to worry about quality. Alternatively you can hire a professional WordPress developer.

Tell us what you think? Do you need some more details in any specific parts of this tutorial / guide? We'd love for this guide to be useful to you, so please help us help you!

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

 
Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!
 

Translate

who are we?

DART Creations is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists

David attard

Follow us on Social

         

 

 

 

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

 

InMotion Hosting Review - Recommended Web Hosting servers for business, Joomla, WordPress and ecommerce websites.

InMotion Hosting Review

Advertise on DART-Creations.com

DART Creations is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

The Outstanding HunGRYJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer

You'll surely create a perfect website with Divi 3.0!

Divi 3