In this educational tutorial, we will discover ways to make our own responsive WordPress theme the use of Bootstrap. Bootstrap is a responsive framework for building internet sites and programs, and it’s a amazing start line for constructing a responsive WordPress subject matter.
You don’t must have built a theme from scratch earlier than to efficiently follow along. but, we do expect that you are at ease doing things like adding and modifying posts inside the admin region or putting in plugins.
The topic we will build is based totally at the primary advertising site instance you can find over at the Bootstrap examples web page. For this demo we are able to build out templates for the subsequent pages and functionality:
- Custom homepage design
- About page
- Contact page
- News section with comments
- A widgetized sidebar
Now we’re going to copy the supply code from the instance fundamental marketing web page and duplicate and paste it into the index.php document. right here is the supply code you need to apply. We’ve just related to a txt model of the code on the grounds that it is too lengthy to embed inside the publish here.
Now that we’ve got a static HTML page, we’re going to transport directly to developing the principle CSS web page. WordPress calls for a specifically formatted comment to appear at the top of the fashion.css web page. It uses this remark to get all the meta data about your subject matter.
in the same folder as your index.php web page create a new file named style.css. [highlight background=”#5fcf80″ color=”#FFFFFF”]WordPress calls for a CSS document with the unique call style.css[/highlight], so we are able to’t call it some thing else or our theme won’t work.
Once you have created a style.css record at the identical level as your index.php report, upload this remark to the top.
The closing aspect we need to do before we install and start constructing our new theme is to upload an image with a purpose to seem with our theme inside the WordPress admin place. This photograph desires to be three hundred x 225 px and named “screenshot.png” you can use this picture or create your own.
We’re now prepared to enter the admin location and install our new theme. Login to the admin place and go to Appearances > themes. You have to see WP Bootstrap listed as one of the issues.
NOTE: if you are the usage of a stay website online and do no longer want people to peer this subject below development, make certain to put in and prompt topic take a look at drive plugin.