Easy Steps to Convert a PSD to WordPress Theme On Bootstrap

Step 2: Download and Bootstrap your theme

Once you have your image design file sliced, go to http://getbootstrap.com and download the latest version of Twitter 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.

Note that one of the primary uses of this framework is because it makes extensive use of media queries to be able to create designs which work in any device, allowing your design to flow seamlessly between one size of equipment to another (xs – Extra Small, for mobiles, sm – Small, for tablets, md – Medium, for laptops and desktops and log – Large, for Large desktops). This is called responsive web design.

Additional Reading:

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

The next step is to code the sliced parts within HTML/XHTML format and style them using the CSS. During this, you need to create an index.html and a style.css file, which requires you to have enough mastery over HTML CSS. Essentially, we are converting the PSD to HTML before we can proceed to the next steps.

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

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>

<head>

</head>

<body>

</body>

</html>

Now you can make use of Bootstrap components in your HTML template. For example, here we’re building a simple web page with a navigation menu and thumbnail components. The min part of bootstrap, means the file has been minified for performance reasons:

<!DOCTYPE html>

<head>

</head>

<body>

<a class=”navbar-brand” href=”#”>WPBootstrap.com</a>

<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>

<h3>About</h3>

<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>

</div>

<h3>Projects</h3>

<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>

</div>

<h3>Services</h3>

<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>

</div>

<hr>

<p>© WPBootstrap 2015</p>

</footer>

</div>

</body>

</html>

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

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 our example, we’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=”//cdn.collectiveray.com/css/style.css” rel=”stylesheet” media=”screen”>

</head>

<body>

…

</body>

Now open index.html file in your browser again and you’ll see the change – our custom CSS is working now, you can see the header bar at the top and the buttons with a different color from the default bootstrap buttons. All of the changes have been defined via the CSS file above.

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 folders 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 Easy Steps to Convert a PSD to WordPress theme.

Now, is the above is a bit too much work for you, and you would instead not start from scratch? This bundle of WP starter templates will help you get started with several starter themes that you can use to produce your custom design eventually.

As you can see, converting from PSD to HTML is quite an essential part of the whole process, but when you’ve got this out of the way, things get a little bit easier.

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

The main reason for changing a Photoshop design file on WordPress is to create a well-functioning website template that could be uploaded to the website dashboard. Such themes as Divi and Avada and other popular themes have a standard set of files that need to be implemented to be considered a valid WP theme. That’s what we will be doing in our next step.

Really and indeed, the next phases of this conversion are around the WordPress coding structure for themes and templates because now we are taking our issue towards WP.

Now that you have the index.html file of your PSD, you need to break it into multiple php files according to WordPress themes file structure. Doing so, you would be not only able to convert the static index.html file to a dynamic WP theme but also be able to add various features and functions associated with WP to it.

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

To facilitate better coding and categorization, a typical template is made up of several PHP files such as header.php, footer.php, index.php, sidebar.php, search.php, and so on.

However, you only want index.php and style.css files to create a Totally-functional WordPress theme. As a rough example, here we’re breaking our above established index.html record into three data: header.php, index.php, and footer.php.

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>

<head>

</head>

<body>

<a class=”navbar-brand” href=”#”>WPBootstrap.com</a>

<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:

<h3>About</h3>

<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>

</div>

<h3>Projects</h3>

<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>

</div>

<h3>Services</h3>

<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>

</div>

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

<hr>

</footer>

</div>

</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 Easy Steps to Convert a PSD to WordPress Theme file structure.

The complete list of files that every template 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

5 Easy Steps to Convert a PSD to WordPress Theme (Bootstrap) Part-2

Step 2: Download and Bootstrap your theme

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

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

5 Easy Steps to Convert a PSD to WordPress Theme (Bootstrap) Part-3

Other Stories

9 PSD To WordPress Conversion Myths You Should Know Must For This Work

MacOS Glass SkinPack for Windows 7\8.1\10 RS6

Step 2: Download and Bootstrap your theme

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

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

Related Articles

Other Stories

9 PSD To WordPress Conversion Myths You Should Know Must For This Work

MacOS Glass SkinPack for Windows 7\8.1\10 RS6