{"id":3583,"date":"2019-04-25T06:54:04","date_gmt":"2019-04-25T06:54:04","guid":{"rendered":"http:\/\/www.wordpressintegration.com\/blog\/?p=3583"},"modified":"2023-10-03T08:09:09","modified_gmt":"2023-10-03T08:09:09","slug":"psd-to-wordpress-bootstrap","status":"publish","type":"post","link":"https:\/\/www.wordpressintegration.com\/blog\/psd-to-wordpress-bootstrap\/","title":{"rendered":"The DIY Guide to Converting PSD to WordPress Using Bootstrap: 7 Easy Steps"},"content":{"rendered":"<p align=\"justify\">Initially started as a simple blogging platform, WordPress has evolved into a fully-fledged CMS over the years. Powering <a href=\"https:\/\/w3techs.com\/technologies\/details\/cm-wordpress\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">over 33% of all websites<\/a>, this amazingly popular PHP based CMS today is used by a wide variety of websites, ranging from high-traffic personal blogs to renowned eCommerce stores. According to recent statistics, over 50,000+ new WordPress sites are launched every day, which demonstrates the tremendous popularity and usage of the CMS.<\/p>\n<p align=\"justify\">What makes WordPress so popular is its ease-of-use, flexibility, and the abundance of themes and plug-ins. Where the <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">sheer number of themes<\/a> allows you to change the entire look of your site with just a few clicks, on the other hand, the <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">availability of over 55k plugins<\/a> lets you extend the functionality of your site without having to dig into its source code.<\/p>\n<p align=\"justify\">However, if you want to make your website stand out from the crowd of hundreds of thousands of other sites, you need a Custom Responsive WordPress Theme that is built specifically for your website. And, without a shadow of a doubt, PSD to Responsive WordPress Theme Conversion is one of the best techniques to create a custom responsive website for your business.<\/p>\n<p align=\"justify\">For those who are not familiar with the term \u201cPSD to Responsive WordPress Conversion\u201d, it refers to the process of converting a PSD file to a fully-functional WordPress theme using cutting-edge web technologies such as HTML5, CSS3, JavaScript, and PHP.<\/p>\n<p align=\"justify\">Through this comprehensive tutorial, we\u2019ll learn how to convert a PSD file into a fully-responsive WordPress theme using Bootstrap, but before we start, let\u2019s get familiar with some basic terms involved in the PSD to Responsive WordPress Theme Conversion process:<\/p>\n<p style=\"font-size: 300%;\">HIGHLIGHTS<\/p>\n<p style=\"font-size: 150%;\">7 Easy Steps to Convert PSD to Responsive WordPress Theme (Bootstrap)<\/p>\n<ul>\n<li><a href=\"#PSD\">What is PSD?<\/a><\/li>\n<li><a href=\"#Theme\">What is WordPress Theme?<\/a><\/li>\n<li><a href=\"#Responsive\">What is Responsive Web Design?<\/a><\/li>\n<li><a href=\"#Step1\">Step 1: Analyze the PSD<\/a><\/li>\n<li><a href=\"#Step2\">Step 2: Slice the PSD<\/a><\/li>\n<li><a href=\"#Step3\">Step 3: Download and Unzip Bootstrap<\/a><\/li>\n<li><a href=\"#Step4\">Step 4: Write HTML5, CSS3 &amp; JavaScript<\/a><\/li>\n<li><a href=\"#Step5\">Step 5: Break Down HTML File Into WordPress Theme File Structure<\/a><\/li>\n<li><a href=\"#Step6\">Step 6: Integrate WordPress Inbuilt Tags &amp; Functions<\/a><\/li>\n<li><a href=\"#Step7\">Step 7: Final Testing<\/a><\/li>\n<li><a href=\"#Bottom\">The Bottom Line<\/a><\/li>\n<\/ul>\n<h2 id=\"PSD\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">PSD<\/h2>\n<p align=\"justify\">PSD, which stands for <strong>P<\/strong>hoto<strong>s<\/strong>hop <strong>D<\/strong>ocument, is the default file format that Adobe Photoshop uses to save workable files. Most of the professional designers choose Photoshop to create custom designs because it is undoubtedly the best and the most popular graphic design tool available in the market today.<\/p>\n<h2 id=\"Theme\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">WordPress Theme<\/h2>\n<p align=\"justify\">In WordPress, a theme is essentially a collection of templates and stylesheets put together to define the look and feel of a WordPress-powered website. Think of it like your smartphone theme that defines the look and feel of your phone. Likewise, a WordPress theme provides the basic visual identity to your website or blog.<\/p>\n<h2 id=\"Responsive\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Responsive Web Design<\/h2>\n<p align=\"justify\"><a href=\"https:\/\/www.wordpressintegration.com\/blog\/responsive-web-design-benefits\/\">Responsive Web Design<\/a>, sometimes abbreviated as RWD, is a technique that use HTML5 and <a href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries.asp\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS3 Media Queries<\/a> to automatically adjust a web page to make it look good on a variety of devices and screen sizes, including desktops, laptops, tablets, and smartphones.<\/p>\n<p align=\"justify\">Since <a href=\"https:\/\/www.wordpressintegration.com\/blog\/responsive-web-design\/\">Responsive Web Design is Google\u2019s recommended design pattern<\/a>, you need to make sure your WordPress site is fully-responsive and renders perfectly across all devices and screen sizes. To help you learn everything about Responsive Web Design and all related coding, here are some great resources that you can use to level up your knowledge about RWD:<\/p>\n<ul>\n<li><a href=\"https:\/\/web.dev\/responsive-web-design-basics\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Responsive Web Design Basics<\/a>: A great resource by Google for Responsive Web Design beginners.<\/li>\n<li><a href=\"https:\/\/blog.froont.com\/9-basic-principles-of-responsive-web-design\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Basic Principles of Responsive Web Design<\/a> &#8211; An informative blog post by Sandijs Ruluks, showing the difference between Responsive Web Design and Adaptive Web Design.<\/li>\n<li><a href=\"https:\/\/www.usertesting.com\/blog\/responsive-web-design-resources\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Responsive Web Design Resources<\/a> &#8211; A collection of 44 best Responsive Web Design Resources by UserTesting Blog.<\/li>\n<li><a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Responsive Web Design<\/a> &#8211; A historically significant blog post by Ethan Marcotte to learn about Responsive Web Design.<\/li>\n<li><a href=\"https:\/\/alistapart.com\/article\/responsive-images-how-they-almost-worked-and-what-we-need\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Responsive Images<\/a> &#8211; An extremely useful blog post by Matt Marquis to learn about responsive images.<\/li>\n<li><a href=\"https:\/\/alistapart.com\/article\/fluidgrids\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Fluid Grids<\/a> &#8211; A great blog post by Ethan Marcotte to learn about fluid grids and how to use them.<\/li>\n<li><a href=\"https:\/\/bradfrost.github.io\/this-is-responsive\/resources.html\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Responsive Resources<\/a> &#8211; A comprehensive collection of resources about the various aspects of Responsive Web Design.<\/li>\n<\/ul>\n<p align=\"justify\">As a matter of fact, creating a fully responsive WordPress theme requires you to have a good grip over CSS3 media queries. However, if you are unwilling to dive into the same, you can try using a responsive front-end framework that comes packed with a pre-coded responsive stylesheet. Some of the most popular and widely used front-end frameworks are:<\/p>\n<ul>\n<li><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Bootstrap<\/a>: A fairly easy to learn and use responsive front-end framework by Twitter, which uses a CDN to maintain the load speed of your website.<\/li>\n<li><a href=\"https:\/\/get.foundation\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Foundation<\/a>: The second most popular and highly customizable responsive front-end grid framework by ZURB with absolutely tiny file size.<\/li>\n<li><a href=\"https:\/\/semantic-ui.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Semantic UI<\/a>: A relatively new responsive front-end framework that utilizes natural language principles to make the website\u2019s code more readable and understandable.<\/li>\n<\/ul>\n<p align=\"justify\">Out of the numerous responsive front-end frameworks available in the market today, Bootstrap is considered <a href=\"https:\/\/clutch.co\/web-designers\/resources\/why-bootstrap-is-ideal-design-framework\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">the best and most ideal framework for Responsive Web Design<\/a> due to its exceptionally powerful grid system, endless customization possibilities, and a myriad of other outstanding features which it offers to developers. This is also one of the main reasons why we chose Bootstrap for this tutorial.<\/p>\n<p align=\"justify\">So, without further ado, now let&#8217;s get into the process of converting a PSD template into a well-functional, fully-responsive WordPress theme using Bootstrap!<\/p>\n<h2 id=\"Step1\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 1: Analyze the PSD<\/h2>\n<p align=\"justify\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3589\" src=\"https:\/\/www.wordpressintegration.com\/blog\/wp-content\/uploads\/2019\/04\/image3.png\" alt=\"Analyze the PSD\" width=\"1892\" height=\"752\" \/><\/p>\n<p align=\"justify\">If you have designed your custom responsive website yourself, you can skip to step number two. However, if you\u2019re a developer who got his website designed from a professional designer and is planning to convert it into a highly responsive WordPress theme, it is recommended you do a thorough analysis of your website design.<\/p>\n<p align=\"justify\">Analyzing your PSD meticulously will not only help you comprehend all the complications you may face during the conversion process but also will give you a quick overview of how you should kick off and finish your PSD to Responsive WordPress Conversion project. Altogether, you should be very clear about all the steps you\u2019re going to perform, such as splitting mockup into HTML, writing CSS codes, inserting images, etc.<\/p>\n<h2 id=\"Step2\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 2: Slice the PSD<\/h2>\n<p align=\"justify\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3590\" src=\"https:\/\/www.wordpressintegration.com\/blog\/wp-content\/uploads\/2019\/04\/image4.png\" alt=\"Slice the PSD\" width=\"1896\" height=\"761\" \/><\/p>\n<p align=\"justify\">Once you\u2019ve carefully analyzed your PSD, the next step is to slice images from the PSD. If you&#8217;re wondering what the term \u201cslicing\u201d means, it simply refers to cutting and dividing a single image file into multiple individual image files each having the different design elements of the overall design. This step is important because it is nearly impossible to code the whole design from a single image. Means, to code a web page, you first need to slice your PSD into separate image files and then weave them together logically.<\/p>\n<p align=\"justify\">To do this, you simply need to open your design file in Photoshop and find out the images that need slicing. Look for these components first to make the slicing process easier:<\/p>\n<ul>\n<li>Backgrounds and Other Visual Elements<\/li>\n<li>Header and Separator<\/li>\n<li>Footers and Others<\/li>\n<\/ul>\n<p align=\"justify\">Thus, utilizing the built-in facility to slice images in Photoshop, you can cut and save pixel perfect images either in JPEG or PNG (if you require transparency) format. Read how to slice images here and watch the YouTube video given below to learn the basics of PSD Slicing.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=XgxEieLbloc\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/watch?v=XgxEieLbloc<\/a><\/p>\n<p align=\"justify\">While slicing your PSD, you have to be extremely careful about what needs to be static and what can be created dynamically. There are a number of elements, like buttons, solid color backgrounds, gradient backgrounds, header and footer color, lines, rows, and special symbols, which can be created just by writing a few lines of CSS code.<\/p>\n<p align=\"justify\">So, you don\u2019t need to cut and save these elements as images. Instead, only cut elements that cannot be created dynamically, like logo and background images. Remember, the lesser the number of images your website has, the faster it will load.<\/p>\n<h2 id=\"Step3\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 3: Download and Unzip Bootstrap<\/h2>\n<p align=\"justify\">Once you have done with the slicing, it\u2019s time to set up Bootstrap. Simply go to <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">https:\/\/getbootstrap.com\/<\/a> and <a href=\"https:\/\/getbootstrap.com\/docs\/4.3\/getting-started\/download\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">download the latest version<\/a> of the framework from there. After the download is completed, extract the zip file to a folder. Now if you open the extracted folder, you\u2019ll find two folders, named css, and js inside it.<\/p>\n<h2 id=\"Step4\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 4: Write HTML5, CSS3 &amp; JavaScript<\/h2>\n<p align=\"justify\">The next step is to code the sliced elements into an HTML5 webpage and style it using the CSS3 to make it look exactly like PSD. This requires you to have a deep knowledge of HTML5 and CSS3.<\/p>\n<p align=\"justify\">If you don\u2019t know anything about these scripting languages, don\u2019t worry! Following are some of the best online resources where you can learn everything about HTML5 and CSS3:<\/p>\n<h3>HTML5 Resources:<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/html\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3Schools<\/a>: The number one website for learning the basics of HTML.<\/li>\n<li><a href=\"https:\/\/www.tutorialspoint.com\/html\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">TutorialsPoint<\/a>: Another great site for aspiring web developers to learn HTML in detail with practical examples.<\/li>\n<li><a href=\"https:\/\/htmldog.com\/guides\/html\/beginner\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">HTML Dog<\/a>: An in-depth tutorial for those who have absolutely no previous knowledge of HTML and CSS.<\/li>\n<li><a href=\"http:\/\/html.net\/tutorials\/html\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">HTML.net<\/a>: A series of 15 highly-informative tutorials to help you easily get started with HTML coding.<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/coding-standards\/wordpress-coding-standards\/html\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">HTML Coding Standards<\/a>: Best practices by WordPress to write clean, well-commented HTML code.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Mozilla Developer\u2019s Section<\/a>: A dedicated section by Mozilla to help developers learn a lot about HTML5 through a variety of tutorials.<\/li>\n<li><a href=\"https:\/\/webdesign.tutsplus.com\/c\/htmlcss\/s\/html\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Web Design Tuts<\/a>: This website offers a bunch of free and paid tutorials to make you an expert in HTML5 language.<\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3<\/a>: A great place to find in-depth information about HTML5 along with all of its latest developments.<\/li>\n<li><a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3 Validator<\/a>: An amazing tool to check if your HTML5 code meets the W3 open web standards.<\/li>\n<\/ul>\n<h3>CSS3 Resources:<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3Schools CSS<\/a>: One of the most popular resources for CSS3 tutorials and examples, with each tutorial having a \u2018try it yourself\u2019 page.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Learn CSS3<\/a>: An excellent resource by Mozilla to make you well-familiar with every aspect of CSS3.<\/li>\n<li><a href=\"https:\/\/www.csstutorial.net\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS Tutorial<\/a>: A great website to learn CSS step by step.<\/li>\n<li><a href=\"https:\/\/webdesign.tutsplus.com\/c\/htmlcss\/s\/css\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS Web Design Tuts<\/a>: A whole cornucopia of free and paid tutorials that can teach you a lot about CSS3.<\/li>\n<li><a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3 CSS<\/a>: A great place to get the latest news and technical information about CSS3.<\/li>\n<li><a href=\"https:\/\/www.cssbasics.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS Basics<\/a>: As the name explains itself, this website is a great place to learn all the basics of CSS3.<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/coding-standards\/wordpress-coding-standards\/css\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS Coding Standards<\/a>: Best practices by WordPress to write meaningful and readable CSS code.<\/li>\n<li><a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS Validator<\/a>: A fantastic tool to check if your CSS3 code meets all the web standards set by W3!<\/li>\n<\/ul>\n<p align=\"justify\">Although many of the functions today can be implemented through <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">CSS3 Animations<\/a>, there might be times when you need to write some JavaScript code to add specific functionality to your WordPress site. For those scenarios, below are some valuable resources to help you learn or refresh your memory about JavaScript:<\/p>\n<h3>JavaScript Resources:<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3Schools JS<\/a>: If you\u2019re new to JavaScript, this is definitely a great place to start with.<\/li>\n<li><a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">jQuery<\/a>: The most popular JavaScript library every developer aspires to learn.<\/li>\n<li><a href=\"https:\/\/www.learn-js.org\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Learn JS<\/a>: A great collection of interactive JavaScript tutorials to help you better understand and quickly learn the programming language.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">MDN JavaScript<\/a>: Published by Mozilla, this site offers tutorials and lessons as well as a glossary of JavaScript functions.<\/li>\n<li><a href=\"http:\/\/jsforcats.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">JavaScript for Cats<\/a>: An amazing place for new programmers to learn JavaScript basics.<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/coding-standards\/wordpress-coding-standards\/javascript\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">JavaScript Coding Standards<\/a>: Best practices by WordPress to format and style JavaScript code in the best possible manner.<\/li>\n<\/ul>\n<p align=\"justify\">Now let&#8217;s come to the main point of this step, which is to write HTML5, CSS3 &amp; JavaScript code for your sliced elements. For this, you need to create a new folder inside which you need to create:<\/p>\n<ul>\n<li>An HTML file named <em>index.html<\/em>.<\/li>\n<li>A CSS file named <em>style.css<\/em>.<\/li>\n<li>A subfolder named images or img (or whichever you like) to keep the images.<\/li>\n<li>Another folder called JavaScript or JS to store all of the JavaScript and jQuery files.<\/li>\n<\/ul>\n<p align=\"justify\">Since you want to code your theme using Bootstrap, you\u2019ll have to initialize the framework in the head section and place the associated JavaScript in the body section of your index.html file as follows:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;!DOCTYPE html&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;html lang=&#8221;en&#8221;&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;head&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;meta charset=&#8221;utf-8&#8243;&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"> <span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"><b>&lt;link href=&#8221;css\/bootstrap.min.css&#8221; rel=&#8221;stylesheet&#8221; media=&#8221;screen&#8221;&gt;<\/b><\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/head&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;body&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"><b>&lt;script src=&#8221;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js&#8221;&gt;&lt;\/script&gt;<\/b><\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"><b> &lt;script src=&#8221;js\/bootstrap.min.js&#8221;&gt;&lt;\/script&gt;<\/b><\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/body&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;\/html&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">Now you can take advantage of <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/accordion\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Bootstrap Components<\/a> in your HTML template. For instance, here we\u2019re creating a simple web page having a navigation menu and thumbnail components:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;!DOCTYPE html&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;html lang=&#8221;en&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;head&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;meta charset=&#8221;utf-8&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;link href=&#8221;css\/bootstrap.min.css&#8221; rel=&#8221;stylesheet&#8221; media=&#8221;screen&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/head&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;body&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;container-fluid&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;navbar&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;a class=&#8221;navbar-brand&#8221; href=&#8221;#&#8221;&gt;WordPressBootstrap&lt;\/a&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;ul class=&#8221;nav navbar-nav pull-right&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;About&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Team&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Portfolio&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Services&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/ul&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;row&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;img src=&#8221;image1.png&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;h3&gt;About&lt;\/h3&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;Read More&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;img src=&#8221;image2.png&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;h3&gt;Team&lt;\/h3&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;Read More&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;img src=&#8221;image3.png&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;h3&gt;Portfolio&lt;\/h3&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;Read More&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;hr&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;footer&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&amp;copy; WordPressBootstrap 2019&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/footer&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;script src=&#8221;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js&#8221;&gt;&lt;\/script&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;script src=&#8221;js\/bootstrap.min.js&#8221;&gt;&lt;\/script&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/body&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;\/html&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">Now if you open this web page in your browser, it should look something like this:<\/p>\n<p><center><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3586\" src=\"https:\/\/www.wordpressintegration.com\/blog\/wp-content\/uploads\/2019\/04\/image1.png\" alt=\"PSD to WordPress using Bootstrap\" width=\"1360\" height=\"505\" \/><\/center><\/p>\n<p align=\"justify\">As you can see, currently there is no custom CSS applied to this page. To style the contents of our HTML page, we have added the following code to our style.css file:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">.navbar {<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> background:#7E7B7B;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> margin-bottom:0px;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> border-radius:0px;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> }<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">.navbar-brand {<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> color:#FFFFFF;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> line-height: 50px;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> padding-left: 10px;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">}<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">a.navbar-brand:hover {<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> color:#FF0000;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">}<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">.navbar ul {<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> padding-right:4%;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">}<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">.navbar ul li a {<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> color:#FFFFFF;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> margin-right:10%;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">}<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">.navbar ul li a:hover { <\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> color:#FFFFFF;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> background-color: #FF0000;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">}<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">a.btn-primary{<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> background-color: #FF0000;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> color:#FFFFFF;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">}<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">To make the newly created <em>style.css<\/em> file work, you need to include it in the HTML page. So, just above the line where you cited <em>bootstrap.min.css<\/em> in the <em>index.html<\/em> file, include a reference link to the <em>style.css<\/em> file as follows:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;head&gt;<\/span><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"><b>&lt;link href=&#8221;css\/style.css&#8221; rel=&#8221;stylesheet&#8221; media=&#8221;screen&#8221;&gt;<\/b><\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;link href=\u201dcss\/bootstrap.min.css\u201d rel=\u201dstylesheet\u201d media=\u201dscreen\u201d&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;\/head&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;body&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &#8230;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &#8230;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;\/body&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">Now open your index.html file in your browser again and you\u2019ll see the difference &#8211; custom CSS has been applied to the page.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3588\" src=\"https:\/\/www.wordpressintegration.com\/blog\/wp-content\/uploads\/2019\/04\/image2.png\" alt=\"PSD to WordPress Using Bootstrap\" width=\"1360\" height=\"505\" \/><\/p>\n<p align=\"justify\">This was just a simple example! In the same manner, utilizing the Bootstrap, you can code and assemble all the sliced images into a well functional HTML page. At the end of this step, there will be two files in your hands: <em>index.html<\/em> and <em>style.css<\/em>.<\/p>\n<h2 id=\"Step5\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 5: Break Down HTML File Into WordPress Theme File Structure<\/h2>\n<p align=\"justify\">Now that you have successfully converted your Photoshop design file into HTML5 and CSS3, it\u2019s time to carry out the main conversion: turning your static HTML file (index.html) into a fully responsive, dynamic WordPress theme. For this, you would need to break your <em>index.html<\/em> down into multiple PHP files according to the WordPress theme\u2019s file structure.<\/p>\n<p align=\"justify\">In other words, you would need to distribute the code of your <em>index.html<\/em> file into multiple PHP files that WordPress calls together to produce a webpage. Ideally, a typical WordPress theme comprises of several PHP files such as:<\/p>\n<ul>\n<li>archive.php<\/li>\n<li>category.php<\/li>\n<li>comments.php<\/li>\n<li>comments-popup.php<\/li>\n<li>footer.php<\/li>\n<li>header.php<\/li>\n<li>index.php<\/li>\n<li>page.php<\/li>\n<li>search.php<\/li>\n<li>sidebar.php<\/li>\n<li>single.php<\/li>\n<li>style.css<\/li>\n<li>404.php<\/li>\n<li>functions.php<\/li>\n<\/ul>\n<p align=\"justify\">However, you only require <em>index.php<\/em> and <em>style.css<\/em> files to make a WordPress theme functional. For our example, we\u2019re breaking our <em>index.html<\/em> file into three files: header.php, index.php, and footer.php.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3594\" src=\"https:\/\/www.wordpressintegration.com\/blog\/wp-content\/uploads\/2019\/04\/Wordpress-theme-structure.png\" alt=\"WordPress Theme Structure\" width=\"600\" height=\"520\" \/><\/p>\n<p align=\"justify\">Let\u2019s start with the <em>header.php<\/em> file. In your WordPress installation, under \/wp-content\/themes\/, create a folder having the same name as the name of your brand new theme. Thereafter, create files named <em>header.php<\/em>, <em>index.php<\/em>, and <em>footer.php<\/em> in this theme folder. Now copy the entire HTML code from the top of the <em>index.html<\/em> page and past it into the <em>header.php<\/em> file as follows:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;!DOCTYPE html&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;html lang=&#8221;en&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;head&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;meta charset=&#8221;utf-8&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;link href=&#8221;css\/style.css&#8221; rel=&#8221;stylesheet&#8221; media=&#8221;screen&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;link href=&#8221;css\/bootstrap.min.css&#8221; rel=&#8221;stylesheet&#8221; media=&#8221;screen&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/head&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;body&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;container-fluid&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;navbar&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;a class=&#8221;navbar-brand&#8221; href=&#8221;#&#8221;&gt;WordPressBootstrap&lt;\/a&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;ul class=&#8221;nav navbar-nav pull-right&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;About&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Team&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Portfolio&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Services&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/ul&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\"><strong>Likewise, paste the middle part of the index.html file into the index.php file:<\/strong><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;div class=&#8221;row&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;img src=&#8221;image1.png&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;h3&gt;About&lt;\/h3&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;Read More&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;img src=&#8221;image2.png&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;h3&gt;Team&lt;\/h3&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;Read More&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;img src=&#8221;image3.png&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;h3&gt;Portfolio&lt;\/h3&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;Read More&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\"><strong>Finally, paste the latter part of the index.html file into the footer.php file:<\/strong><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;hr&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;footer&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;p&gt;&amp;copy; WordPressBootstrap 2019&lt;\/p&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/footer&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;script src=&#8221;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js&#8221;&gt;&lt;\/script&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;script src=&#8221;js\/bootstrap.min.js&#8221;&gt;&lt;\/script&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/body&gt;<\/span><\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;\/html&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">Thus, this step includes breaking up the index.html file into various PHP files according to the theme structure of WordPress. Now let\u2019s move on to the next step of the tutorial!<\/p>\n<h2 id=\"Step6\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 6: Integrate WordPress Inbuilt Tags &amp; Functions<\/h2>\n<p align=\"justify\">One of the best things about WordPress is that it offers a myriad of inbuilt tags and functions that can be used to add the desired functionality to a WordPress theme. Just use the right combination of built-in WordPress tags and functions and the CMS will take care of everything. Surprisingly, this is also one of the main reasons why many people opt for PSD to Responsive WordPress Theme Conversion.<\/p>\n<p align=\"justify\">In the previous step, we\u2019ve broken up our index.html file into various PHP files and now, it\u2019s time to first add WordPress PHP tags to these files and then amalgamate them together to create a highly-functional WordPress theme. For this, you need to be well-versed with the PHP language. If you\u2019re not, use the following resources to learn PHP:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/php\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">W3Schools PHP<\/a>: One of the best and most popular resources for beginners to learn PHP.<\/li>\n<li><a href=\"https:\/\/www.php.net\/manual\/en\/tutorial.php\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">PHP Manual<\/a>: Here you\u2019ll find everything you need to achieve immense expertise in PHP.<\/li>\n<li>PHP 101: Another great website for absolute beginners to learn PHP.<\/li>\n<li><a href=\"https:\/\/www.tutorialspoint.com\/php\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">TutorialsPoint<\/a>: A great place to learn PHP in detail with practical examples.<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/coding-standards\/wordpress-coding-standards\/php\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">PHP Coding Standards<\/a>: Best practices by WordPress clean, easy to read PHP code.<\/li>\n<\/ul>\n<p align=\"justify\">For our example, we have added the<!--?php bloginfo( $show ); ?--> function to <strong>header.php<\/strong> in order to display the site title in form of a link:<\/p>\n<p lang=\"zxx\" align=\"justify\"><em><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"><b>&lt;a href=&#8221;&lt;?php bloginfo(&#8216;url&#8217;); ?&gt;&#8221; title=&#8221;&lt;?php bloginfo(&#8216;name&#8217;); ?&gt;&#8221; class=&#8221;navbar-brand&#8221;&gt;&lt;?php bloginfo(&#8216;name&#8217;); ?&gt;&lt;\/a&gt;<\/b><\/span><\/span><\/span><\/span><\/em><\/p>\n<p align=\"justify\">And for menu, we have used the<!--?php wp_nav_menu( $args ); ?--> function as follows:<\/p>\n<p lang=\"zxx\" align=\"justify\"><em><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"><b>&lt;?php wp_nav_menu( array(&#8216;menu&#8217; =&gt; &#8216;Project Nav&#8217;, &#8216;menu_class&#8217;,&#8217;nav navbar-nav pull-right&#8217; )); ?&gt;<\/b><\/span><\/span><\/span><\/span><\/em><\/p>\n<p align=\"justify\">Consequently, our header.php file now looks like this:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;?php?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;!DOCTYPE html&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;html &lt;?php language_attributes(); ?&gt; class=&#8221;no-js&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;head&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;meta charset=&#8221;&lt;?php bloginfo( &#8216;charset&#8217; ); ?&gt;&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1&#8243;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;?php wp_head(); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;\/head&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;body &lt;?php body_class(); ?&gt;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;div class=&#8221;container-fluid&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;div class=&#8221;navbar&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;a href=&#8221;&lt;?php bloginfo(&#8216;url&#8217;); ?&gt;&#8221; title=&#8221;&lt;?php bloginfo(&#8216;name&#8217;); ?&gt;&#8221; class=&#8221;navbar-brand&#8221;&gt;&lt;?php bloginfo(&#8216;name&#8217;); ?&gt;&lt;\/a&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;?php wp_nav_menu( array(&#8216;menu&#8217; =&gt; &#8216;Project Nav&#8217;, &#8216;menu_class&#8217;,&#8217;nav navbar-nav pull-right&#8217; )); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> &lt;\/div&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">The code of the <strong>footer.php<\/strong> will remain the same except the addition of the<!--?php wp_footer(); ?--> function.<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;?php?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;footer&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;p&gt;&amp;copy; WordPressBootstrap<\/span><\/span><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\"> 2019<\/span><\/span><\/span><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;\/p&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;\/footer&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;\/div&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;?php wp_footer(); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;\/body&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;\/html&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">Now come to the index.php file. Here we have used<!--?php dynamic_sidebar( $index ); ?--> function to show thumbnail components.<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;?php <\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">get_header(); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;div class=&#8221;row&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;?php dynamic_sidebar(&#8216;sidebar-1&#8217;); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;?php dynamic_sidebar(&#8216;sidebar-2&#8217;); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;?php dynamic_sidebar(&#8216;sidebar-3&#8217;); ?&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;hr&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">&lt;?php get_footer(); ?&gt;<\/span><\/span><\/span><\/span><\/p>\n<p align=\"justify\">Moreover, to ensure the proper rendering of our thumbnail components, we have to define <strong>sidebar-1<\/strong>, <strong>sidebar-2<\/strong>, and <strong>sidebar-3<\/strong> in the <strong>functions.php<\/strong> file as follows:<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">function wordpressbootstrap_widgets_init() {<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> register_sidebar( array(<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;name&#8217; =&gt; __( &#8216;Widget Area&#8217;, &#8216;wordpressbootstrap&#8217; ),<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;id&#8217; =&gt; &#8216;sidebar-1&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;description&#8217; =&gt; __( &#8216;Add widgets here to appear in your sidebar.&#8217;, &#8216;wordpressbootstrap&#8217; ),<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;before_widget&#8217; =&gt; &#8216;&lt;aside id=&#8221;%1$s&#8221; class=&#8221;widget %2$s&#8221;&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;after_widget&#8217; =&gt; &#8216;&lt;\/aside&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;before_title&#8217; =&gt; &#8216;&lt;h2 class=&#8221;widget-title&#8221;&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;after_title&#8217; =&gt; &#8216;&lt;\/h2&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> ) <\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> register_sidebar( array(<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;name&#8217; =&gt; __( &#8216;Widget Area&#8217;, &#8216;wordpressbootstrap&#8217; ),<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;id&#8217; =&gt; &#8216;sidebar-2&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;description&#8217; =&gt; __( &#8216;Add widgets here to appear in your sidebar.&#8217;, &#8216;wordpressbootstrap&#8217; ),<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;before_widget&#8217; =&gt; &#8216;&lt;aside id=&#8221;%1$s&#8221; class=&#8221;widget %2$s&#8221;&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;after_widget&#8217; =&gt; &#8216;&lt;\/aside&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;before_title&#8217; =&gt; &#8216;&lt;h2 class=&#8221;widget-title&#8221;&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;after_title&#8217; =&gt; &#8216;&lt;\/h2&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> ) <\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> register_sidebar( array(<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;name&#8217; =&gt; __( &#8216;Widget Area&#8217;, &#8216;wordpressbootstrap&#8217; ),<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;id&#8217; =&gt; &#8216;sidebar-3&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;description&#8217; =&gt; __( &#8216;Add widgets here to appear in your sidebar.&#8217;, &#8216;wordpressbootstrap ),<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;before_widget&#8217; =&gt; &#8216;&lt;aside id=&#8221;%1$s&#8221; class=&#8221;widget %2$s&#8221;&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;after_widget&#8217; =&gt; &#8216;&lt;\/aside&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;before_title&#8217; =&gt; &#8216;&lt;h2 class=&#8221;widget-title&#8221;&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &#8216;after_title&#8217; =&gt; &#8216;&lt;\/h2&gt;&#8217;,<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> ) <\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> );<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">}<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">add_action( &#8216;widgets_init&#8217;, &#8216;wordpressbootstrap_widgets_init&#8217; );<\/span><\/span><\/p>\n<p align=\"justify\">The above code will register three widget areas in the WordPress dashboard, where we need to put the respective \u201cHTML code\u201d for each thumbnail component. For instance, we have put the following code in <strong>sidebar-1<\/strong> widget.<\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;div class=&#8221;col-sm-6 col-md-4&#8243;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;div class=&#8221;thumbnail&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;img src=&#8221;image1.png&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;div class=&#8221;caption&#8221;&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;h3&gt;About&lt;\/h3&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;p&gt;&#8230;&lt;\/p&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;p&gt;&lt;a href=&#8221;#&#8221; class=&#8221;btn btn-primary&#8221; role=&#8221;button&#8221;&gt;<\/span><\/span><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><span lang=\"en-US\">Read More<\/span><\/span><\/span><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;\/div&gt;<\/span><\/span><\/p>\n<p lang=\"zxx\" align=\"justify\"><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;\/div&gt;<\/span><\/span><\/p>\n<p lang=\"en-US\" align=\"justify\"><span style=\"color: #000000;\"> <span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"> &lt;\/div&gt;<\/span><\/span><\/span><\/p>\n<p align=\"justify\">And so on\u2026<\/p>\n<p align=\"justify\">Finally, we need to load our stylesheets, which can be done by calling <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">wp enqueue style ()<\/a> function in the function.php file:<\/p>\n<p lang=\"zxx\" align=\"justify\"><em><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">\/\/ Load the main stylesheet<\/span><\/span><\/em><\/p>\n<p lang=\"zxx\" align=\"left\"><em><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><b>wp_enqueue_style( &#8216;wordpressbootstrap-style&#8217;, get_stylesheet_uri() );<\/b><\/span><\/span><\/em><\/p>\n<p lang=\"zxx\" align=\"justify\"><em><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\">\/\/ Load Bootstrap stylesheet<\/span><\/span><\/em><\/p>\n<p lang=\"en-US\" align=\"left\"><em><span style=\"font-family: Akkurat, serif;\"><span style=\"font-size: medium;\"><b><span style=\"color: #000000;\">wp_enqueue_style( &#8216;wordpressbootstrap&#8217;, get_template_directory_uri() . &#8216;\/css\/bootstrap.min.css&#8217;);<\/span><\/b><\/span><\/span><\/em><\/p>\n<p align=\"justify\">For the complete list of all the tags, functions, and other facilities available in WordPress, we recommend you go through the links given below:<\/p>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Template_Tags\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Template Tags<\/a>: Find a complete list of WordPress tags on this official Codex page. Every tag has a dedicated page where that tag is explained in detail.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Function Reference<\/a>: Another official Codex page which is a reference guide to all the PHP functions used in WordPress. Just like Template Tags, every PHP function enjoys a dedicated page containing a detailed description of the function along with appropriate examples.<\/li>\n<\/ul>\n<p align=\"justify\">Once you have added all the essential tags and functions to your WordPress theme, it\u2019s time to test it against various quality measures.<\/p>\n<h2 id=\"Step7\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"center\">Step 7: Final Testing<\/h2>\n<p align=\"justify\">Testing is undoubtedly a crucial part of PSD to Responsive WordPress Theme Conversion process. In this step, your newly developed theme WordPress theme is unit tested. You need to fix any JavaScript, PHP and WordPress errors as well as check whether or not your theme\u2019s HTML and CSS meets all the standards set by W3C.<\/p>\n<p align=\"justify\">Moreover, you need to test your WordPress theme\u2019s responsiveness, performance, and browser compatibility. Even, you might also need to modify your theme\u2019s code until it runs perfectly. Once every element of your WordPress theme is tested for their functionality, you can activate it via Dashboard.<\/p>\n<h2 id=\"Bottom\" style=\"font-size: 24px; margin-top: 25px; padding-bottom: 15px;\" align=\"left\">Conclusion:<\/h2>\n<p align=\"justify\">So that was all about turning a PSD file into a fully-responsive WordPress theme using Bootstrap. Following the above steps, you can easily create a custom responsive WordPress theme yourself. As you can see, PSD to Responsive WordPress Theme Conversion through Bootstrap is not an easy task and requires strong technical skills, you might face difficulties during the conversion process. If that is the case, we recommend you <a href=\"https:\/\/www.wordpressintegration.com\/hire-wordpress-developers.html\">hire a professional WordPress developer<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A DIY guide to learn how to convert a PSD file into a fully-responsive WordPress theme using Bootstrap in 7 easy steps.<\/p>\n","protected":false},"author":14,"featured_media":4782,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[234],"tags":[734,30,735,736,737,738],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/posts\/3583"}],"collection":[{"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/comments?post=3583"}],"version-history":[{"count":23,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/posts\/3583\/revisions"}],"predecessor-version":[{"id":6171,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/posts\/3583\/revisions\/6171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/media\/4782"}],"wp:attachment":[{"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/media?parent=3583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/categories?post=3583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wordpressintegration.com\/blog\/wp-json\/wp\/v2\/tags?post=3583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}