Use it as a starting point to create something more unique. It includes a large callout called the hero unit and three supporting pieces of content. In your index.php file, we would have Hello world ! This is a template for a simple marketing or informational website. This would not work if we named the files my-header.php and my-footer.php or something else. Because we named our files header.php and footer.php, WordPress can do this. These WordPress functions locate and include the header.php and footer.php files at the top and bottom of the page. Including WordPress tags in the header and footer files, you will use the tags get header() and get footer(). We will provide the sidebar file later in the article: You can copy and paste the codes from our header, index, and footer files below into your files. You’ll take all the HTML that usually appears at the top and bottom of every page and cut and paste it into the header.php and footer.php files, respectively. Create an empty header file, footer file, and sidebar file. You will usually see more than these files, but we’re going to start with these files and build from there. Many WordPress themes (except for some starter kits) include the following files: WordPress themes are designed to help you create a website with ease. Converting Bootstrap files to WordPress templates Retrace your steps and follow up from step one. Note: If you don’t have this as your homepage, it is possible that you missed a step somewhere above. Your homepage is expected to be like a static HTML file without any style. If installed successfully, go ahead to activate it. You should see WP Bootstrap listed as one of the themes. Log in to the admin area and go to Appearances > Theme. Now you’re ready to install the new theme. Note that this image is to be uploaded in the same folder where you have the bootstrap folder, index.php file, and style.css file.īelow is an example of what your folder structure should look like: You can upload a free PNG from somewhere online, or create your own. When uploading this file, name it “screenshot.png” and set the dimensions to 300 x 225 px (or something close). Author: Ghyoneka Kpee Author URI: Version: 1.0 Tags: responsive, white, Bootstrap License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) License URI: This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap website */ Uploading imagesīefore we install and start building our new theme, we need to upload an image that will appear in the WordPress admin area. * Theme Name: WP Bootstrap Theme URI: Description: A demo theme built to show how to create a responsive WordPress theme using Bootstrap on OpenReplay How to Build a WordPress Theme with Bootstrap. In the same folder as your index.php file, create a new CSS file named style.css and add this comment to the top so WordPress knows which theme to use. WordPress has a particular comment at the top of the style.css page, allowing it to get all the meta information about our theme. Now that we have a static HTML page let’s create the main CSS file. Here is the source code you need to use: bootstrap-demo-source-code. The next step is to copy the source code from the example basic marketing site and paste it into the index.php file. So, in the wpbootstrap folder, you have the bootstrap folder and the index.php file, as seen in the image below Now, you are to paste the bootstrap folder you unzipped earlier.Īfter successfully creating the “wpbootstrap” folder, create a file named index.php. Once these things are ready, open the folder where your WordPress files are located and visit wp-content > themes.Ĭreate a new folder in the “themes” folder and name it “wpbootstrap”. Install the Theme Test Drive plugin (you should only use this step if you’re building the theme on a live site and don’t want people to see the new theme while it’s being developed) Here is what you need to do before we can get started: For this demo, templates for these pages will be created: The demo theme we’re building is based on the Basic marketing site example you can find on the Bootstrap examples page. This WordPress theme is built on Bootstrap, a responsive framework, and it’s an easy way to achieve a responsive design. Over the course of this DIY guide, we’ll learn a simple technique for building our WordPress theme responsive to different devices.
0 Comments
Leave a Reply. |