Easy Steps to Convert PSD Template to Wordpress Theme

How are you getting to stand out from the gang in an ocean of numerous different sites? One sure method of immediately attracting attention are often to make your own, unique, custom theme converted from PSD template to WordPress theme. This is able to be designed specifically for your own site – and your site won’t be one among the thousands of cookie-cutter sites out there!

There are three standards when designing an internet site theme. PSD (Photoshop files), WordPress (WP) and fairly recently these previous couple of years, Twitter Bootstrap – a framework for developing responsive sites that industry professionals are using lately .

In this post, we’re getting to offer you an entire and straightforward guide the way to combine all three: the way to convert a PSD to a WordPress (Bootstrap) theme, in 5 easy steps.

Later on during this article, you will find templates, ready for download, for you to use as a basis for this tutorial. just in case you would like to ascertain other articles, please do visit other parts of our site, with in-depth tutorials and articles.

But why would you would like to convert a PSD file into a Bootstrap WordPress theme?

What is a PSD?

PSD is brief for PhotoShop Design.

This is because Photoshop is that the single piece of software which is hottest with graphic designers and the way most WordPress website designs are created. Using Photoshop, a designer will create a singular website design for you. this may be saved as a Photoshop design file, or a PSD file. This design can then tend to WordPress developers who will turn this into a topic .

Therefore PSD to WordPress is that the process of converting a Photoshop design file to a working WP template using Bootstrap or other methodologies and frameworks.

Most people who are in or round the design and web design industry can easily understand this terminology – a bit like they might understand the other design terms which aren’t familiar to people outside of the niche (kerning, CMYK, padding, typography, leading, Serif, etc.)

What is a WordPress Theme?

There are two primary aspects to making a WordPress website usually.

The actual look of the web site , and
The content of the location .

In WP, the foremost popular CMS for creating a site, what the web site seems like is independent of the content. you’ll change the way your WordPress looks completely while still keeping all the content.

This is because what the web site seems like is really defined by a WordPress theme.

Think of themes such as you would for smartphones, for your personal computer or laptop or anything which may be “skinned” to your preference. The template or theme you employ are often wont to “skin” the content, or provides it a glance and feel which you’re choosing .

WordPress themes are a set of PHP files which contain “commands” or specifications that outline the colours and patterns, the styles, the icons, the fonts, the sizes of headers and text, the buttons and essentially the entire look of all of the weather of the web site you’re designing.

There is an entire industry around these designs, where you’ll either get your template for free of charge or buy one which is already made (typically called premium), for love or money from $25 to a couple of hundred dollars.

There is also the choice to make your own custom design, instead of choosing a well-liked product that has already been created (and used repeatedly before). this is often the particular process of converting a PSD to a WordPress theme (what your website will appear as if within the end).

Going forward, we’ll guide you to the precise procedure of making your own design.

Converting a PSD to WordPress theme

Step 1: Slice the PSD File

In terms of our PSD to Bootstrap tutorial, “Slicing” is that the first and foremost thing within the entire PSD to responsive WordPress conversion process.

The term “slicing” might sound quite confusing to you initially , but don’t worry an excessive amount of about it. Slicing refers to cutting and dividing one image file into multiple image files, each of which contains different design elements of the entire design. Some people ask those as splicing because it’s creating separate elements from one design “organism” which can eventually be rearranged or synthesized and morphed into an entire design.

This is crucial since you can’t code a template/theme from one image design file.

Therefore, to style an internet page, you initially got to slice the most image file into many individual image files then sew them together seamlessly.

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

Usually, most web and graphic designers like better to use Adobe Photoshop for slicing.

Although the same thing are often done using an equivalent image editing software like GIMP (GNU Image Manipulation Program) or the other imaging software package, we highly recommend you employ Photoshop since it makes the work easier and faster, with tools like Layers and Layer Masks, extracting Metadata, blending, manipulating and using PSD files and RAW images.

Whatever software/application you employ , the most point is to return up with pixel-perfect image files within the end – representing the various elements of your eventual design.

Besides that, you don’t got to cut design elements – like header/footer color and solid color background – fully , which may be created dynamically. Instead, only cut design elements – like buttons and pictures – that can’t be created dynamically.

Step 2: Download and Bootstrap your theme

Once you’ve got your image design file sliced, attend https://getbootstrap.com and download this version of Twitter Bootstrap from there. After completing the download, extract the zip enter a folder.

Now if you open the extracted folder, you’ll find three folders – css, fonts and js – inside it.

Note that one among the first uses of this framework is because it makes extensive use of media queries to be ready to create designs which add any quite device, allow your design to flow seamlessly between one size of device to a different (xs – Extra Small, for mobiles, sm – Small, for tablets, md – Medium, for laptops and desktops and lg – Large, for giant desktops).

This is called responsive web design.

Additional Reading: CSS Frameworks Or CSS Grid: What Should i exploit For My Project? (Smashing Magazine)

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

The next step is to code the sliced elements into HTML/XHTML format and elegance them using the CSS. For this, you would like to make an index.html and a method .css file, which needs you to possess enough mastery over HTML CSS. Essentially, we are converting the PSD to HTML, before we will proceed to subsequent steps.

Aside: HTML or XHTML represents (EXtensible) HyperText terminology , whiles CSS represents Cascading StyleSheets.

Since you would like to develop your theme using Bootstrap, you’ll need to initialize Bootstrap within
the head section and therefore the associated JavaScript within the body section of your index.html page as follows:
<!DOCTYPE html>

Presently you can utilize Bootstrap segments in your HTML format. For instance, here we’re constructing a straightforward site page with a route menu and thumbnail segments.

The .min.js part of the bootstrap libraries, implies the record has been minified for execution reasons:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
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">
<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">
<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">
<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>
</body>
</html>

On the off chance that you open this document in your program, it should look something like this:

As should be obvious, no custom CSS is dealing with this page right now. So to style the substance of the html page as per our prerequisites, we’ll make a custom style.css document. For our model, we’ve added the accompanying code to my custom CSS document:

.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 recently made custom CSS record work, we have to remember it for our HTML page (simply as we did bootstrap.min.css). So incorporate a reference connect to the style.css document in your index.html record, simply over the line where you referenced bootstrap.min.css.

Presently open index.html record in your program again and you’ll see the change – our custom CSS is working now, you can see the header bar at the top and the catches with an alternate shading from the default bootstrap catches.

The entirety of the progressions have been characterized by means of the CSS record above.

This was only a straightforward model.

In like manner, utilizing Bootstrap, you can code your whole PSD record (obviously, in the wake of cutting) into HTML. Toward the finish of this progression, you’ll have two records close by:

index.html and another is
style.css.

So far we were generally on a PSD to Bootstrap instructional exercise. Presently comes the change to a Bootstrap WordPress subject.

IS the above is a lot work for you? OK rather not start without any preparation? We have an answer for that!

This heap of WordPress starter formats will assist you with beginning with various starter topics that you can use to in the long run produce your own specially craft.

As should be obvious changing over from PSD to HTML is a serious significant piece of the entire procedure, however when you have this off the beaten path, things get somewhat simpler.

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

The fundamental purpose behind changing over a Photoshop configuration document to WordPress is to make a completely useful site layout that could be transferred to the site dashboard.

Such topics as Divi and Avada and other famous subjects have a standard arrangement of documents that should be actualized to be viewed as a substantial WP topic. That is the thing that we will do in our following stage.

Truly and really the following periods of this transformation are around the WordPress coding structure for topics and layouts since now we are taking our topic towards WP.

Since you have the index.html record of your PSD, you have to break it into numerous php documents as per WordPress subjects record structure. Doing as such, you would not exclusively have the option to change over the static index.html record to a dynamic WP topic yet in addition have the option to include different highlights and capacities related with WordPress to it.

(Aside, PHP is a server-side scripting language known as hypertext preprocessor.)

To make the programming of WordPress subjects simpler and for good coding rehearses, a run of the mill format is comprised of a few PHP documents, for example, header.php, footer.php, index.php, sidebar.php, search.php, etc.

Be that as it may, you just require index.php and style.css documents to make a completely useful WordPress topic.

As a harsh model, here we’re breaking our above made index.html document into three records: header.php, index.php and footer.php.

How about we start with header.php. The whole HTML code that is incorporated at the highest point of index.html page will go into the header.php document.

<!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.collectiveray.com/css/style.css” rel=”stylesheet” media=”screen”>
<link href=”https://cdn.collectiveray.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.collectiveray.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.collectiveray.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.collectiveray.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>© 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.collectiveray.com/js/bootstrap.min.js”></script>
</body>
</html>

This progression incorporates separating the index.html document into header.php, index.php, footer.php and other fundamental element records as indicated by WordPress subjects document structure.

The total rundown of records that each layout ought to have can be found underneath. You can likewise observe a picture that shows how these identify with one another:

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

On the off chance that you follow any manual for changing over your Photoshop Design to WordPress, you’ll generally find that they bring about a structure like the accompanying. The underneath is an increasingly itemized perspective on what a last WordPress subject ought to resemble:

Step 5: Add Multidisciplinary WordPress Tags to your Bootstrap format

This is the last advance of our instructional exercise.

The best thing about WordPress is that it offers an entire pack of implicit capacities in its coding structure that can be utilized to add custom capacities and highlights to a site topic.

To incorporate any of these capacities into your WordPress topic, you should simply utilize the correct arrangement of implicit capacity labels in your records. The WordPress structure will deal with everything. This is the thing that makes the stage so amazing!

In the past advance, we separated the index.html document based on the necessary record structure.

Presently it’s an ideal opportunity to add WordPress PHP labels to different subject records – like header.php, index.php, footer.php and sidebar.php and so on – which we have in the past advance. At last, we consolidate them together to deliver an exceptionally practical WordPress subject.

For our above model, here we’ve utilized the <?php bloginfo( $show ); ?> work in header.php to show our webpage’s title in a connection:

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

For a total rundown all things considered and works accessible, we suggest you experience these official Codex pages:

Format Tags: This page gives you a total rundown of WordPress labels, every one of which has a committed page where you can discover more data about a specific tag.
Capacity Reference: This page is a reference manual for all PHP capacities utilized in WordPress programming. Like Template Tags, each PHP work is connected to a committed page where it is clarified in detail with fitting models.

Subsequent to including basic WordPress labels and capacities, every one of these documents will be put in a solitary envelope having a comparative name to the topic name. You have to put this organizer in/wp-content/subjects/catalog of your site establishment.

Furthermore, that is the last advance of the instructional exercise!

When you have done that, you ought to have a completely working responsive WordPress topic utilizing Bootstrap that you can initiate by means of the WordPress dashboard.

Prepared to kick things off?

A couple of extra considerations

Gradually, responsive Web Design has gotten a prevailing standard for building future-prepared sites.

Nowadays, practically all sites are controlled by this stunning procedure to convey clients an ideal review and communication experience, independent of the gadget they are utilizing, regardless of whether it’s a telephone, tablet or PC/work area gadget.

As indicated by an ongoing review led by the Google Webmaster group on Google+, over 81% of individuals want to utilize a responsive structure way to deal with make their sites render appropriately on a wide range of gadgets.

That is the reason it is basic to figure out how to make a WordPress site subject utilizing Twitter Bootstrap or another responsive system for your website composition from a PSD. While there are a lot of free site subjects, making your own custom WordPress topic utilizing Bootstrap is a definitive articulation of inventiveness in website architecture.

Despite the fact that WordPress rules over 24% all things considered, changing over a Photoshop record (PSD) into a well-working responsive subject isn’t as simple as you might suspect. This expects you to have a decent hold on composing CSS media questions that eventually direct whether a layout is responsive.

Author Bio: Maggie Joseph is a passionate writer, currently working as a content writer at Bestdesign2hub. Bestdesign2hub offers free resources for designers, developers and webmasters and is updated daily. She is available for hire for product and business promotions.

Facebook

Twitter

Digg