AndreaNobili
AndreaNobili

Reputation: 42957

How to create a WordPress theme that use BootStrap?

I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.

For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html

and I want try to create a WP template starting by it.

Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?

Is it the right way?

The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:

<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
 <div id="main-slider" class="flexslider">
  <ul class="slides">
   <li>
   <img src="assets/img/flexslider/flex-1.jpg">
   <div class="flex-caption">
   <p class="flex-caption-text">
   <span>Lorem ipsum</span><br>
   <span>sit dolor</span><br>
   <span>adipiscing elitur</span>
   </p>
   </div>
   </li>
   <li>
   <img src="assets/img/flexslider/flex-2.jpg">
   <div class="flex-caption">
   <p class="flex-caption-text">
   <span>Lorem ipsum</span><br>
   <span>sit dolor</span><br>
   <span>adipiscing elitur</span>
   </p>
   </div>
   </li>
   <li>
   <img src="assets/img/flexslider/flex-3.jpg">
   <div class="flex-caption">
   <p class="flex-caption-text">
   <span>Lorem ipsum</span><br>
   <span>sit dolor</span><br>
   <span>adipiscing elitur</span>
   </p>
   </div>
   </li>
  </ul>
 </div><!-- /.flexslider -->

And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)

Can you give me some ideas about how do these things?

Tnx

Andrea

Upvotes: 0

Views: 7608

Answers (1)

Kidcompassion
Kidcompassion

Reputation: 91

I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/

The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.

As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/

Upvotes: 1

Related Questions