Steps for PSD to WordPress Conversion Using Bootstrap

Elements can be built with only a few lines of CSS codes, for example, solid color background, buttons, gradient background, rows, lines special symbols, and header and footer.

Hence, for these elements, you don’t have to slice any images. However, you only have to cut elements like background images and logos, which cannot be created dynamically. You should also consider the fact your website will load faster if it contains fewer images.

Unzip and Bootstrap Download

After you have completed the slicing, you now have to download Bootstrap. You can then extract the zip file to a folder after you have completed the download. You will find two folders in the extracted folder called “css” and “js”.

Write JavaScript, CSS3 & HTML5

In the next step, you have to code the sliced elements with HTML5 and change its style using CSS3 and after that, it will look like PSD. For this process, you will need a good knowledge of CSS3 and HTML5.

Nowadays, you might need to write some JavaScript code to add functionalities to WordPress, even though most of the functionalities are applied through CSS3 Animations.

Now, you have to write JavaScript, CSS3, and HTML code for the sliced elements. To do this, the following needs to be created within a new folder:

A CSS file by the name “style.css”.
HTML file by the name “index.html”.
For the image, a subfolder by the name of “images” or “img”.
One more folder by the name “JS” or “JavaScript”, for storing the file of jQuery and JavaScript files.

Now, using Bootstrap, you have to code your theme. For this you have to initialize the framework within the head section and place the related JavaScript in the body section of your index.html as shown below:

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

To create a simple web page consisting of a navigation menu and thumbnail components, you have to follow the given process:

<!DOCTYPE html>

<had>

</head>

<body>

<a class=”navbar-brand” href=”#”>WordPressBootstrap</a>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

<h3>About< /h3>

</div>

<h3>Portfolio</h3>

</div>

<hr>

<p>© WordPressBootstrap 2019</p>

</footer>

</div>

</body>

</html>

As you will see in this page, there is no custom CSS present. Now, you need to add the following code to style the contents of your HTML page.

.navbar {

background:#7E7B7B;

margin-bottom:0px;

border-radius:0px;

}

.navbar-brand {

color:#FFFFFF;

line-height: 50px;

padding-left: 10px;

}

a.navbar-brand:hover {

color:#FF0000;

}

.navbar ul {

padding-right:4%;

}

.navbar ul li a {

color:#FFFFFF;

margin-right:10%;

}

.navbar ul li a:hover {

color:#FFFFFF;

background-color: #FF0000;

}

a.btn-primary{

background-color: #FF0000;

color:#FFFFFF;

}

Now, you have to include this code in your HTML page for making this new “style.css” file work. So, you have to give the link to the “style.css” file above the line where you placed the “bootstrap.min.css” file in the “index.html” file.

<head>

</head>

<body>

…

</body>

After this, you will be able to see the difference when you will open the “index.html” file in your browser again. After you have completed this step, you will have two files: “style,css” and “index.html”.

Converting HTML Files to WordPress Theme File Structure

You have converted your files to CSS3 and HTML format from your photoshop designed files. The next is to convert your static HTML files (index.html) to a dynamic and fully responsive WordPress file.

To complete this process of convert HTML file into the WordPress file structure, you have to break down your “index.html” files to numerous PHP files. These various PHP files will be brought together by WordPress to create a webpage. The name of the PHP files are which makes the WordPress theme are:

category.php
archiev.php
comments-popup.php
comments.php
header.php
footer.php
page.php
index.php
sidebar.php
search.php
style.php
single.php
functions.php
404.php

To build a functional WordPress theme, only “index.php” and “style.css” files are required. However, to make it easier to understand, let’s break “index.html” files into three parts: footer.php, index.php, and header.php.

For “header.php” files

<!DOCTYPE html>

<head>

</head>

<body>

<a class=”navbar-brand” href=”#”>WordPressBootstrap</a>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Portfolio</a></li>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

For “index.php” files

<h3>About</h3>

</div>

</div>

<h3>Portfolio</h3>

</div>

For “footer.php” files

<hr>

</footer>

</div>

</body>

</html>

Conclusion

So, by following the steps in the article, you will be able to effectively perform the WordPress conversion of the PSD files with the help of Bootstrap. However, to perform these steps, you need good technical skills. Hence you need to first go through the process thoroughly before actually trying to perform the steps.

Francis L. Crosby