How to create WordPress themes

 http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

 

http://wordpress.org/support/topic/how-to-add-a-sidebar-4 

http://www.justfreetemplates.com/wordpress-themes 

http://designscrazed.net/free-premium-wordpress-themes/ 

http://www.siteground.com/wordpress-hosting/wordpress-themes.htm 

https://wordpress.org/themes/ 

 

Converting Bootstrap Files to WordPress Templates

Most WordPress themes include the following files:

• index.php
• style.css
• header.php
• footer.php
• sidebar.php

You will usually see a lot more than these files, but we’re going to start with these files and build from there. Go ahead create empty files for the header.php, footer.php, and sidebar.php.

What we are going to do is take all of the HTML that would usually be included at the top of every page and cut and paste it into the header.php file. Then we will do the same for all of the HTML that would normally appear at the bottom of every page and cut and paste it into the footer.php file.
Let’s look at what each of these files look like now.  Again these are just .txt files that have been linked to because all of the source code would be too much to list here.  You can copy and paste the code from these files into your own .php files.  

• header.php
• index.php
• footer.php

The sidebar.php file is still empty.
Now we are going to use our first WordPress tags to include the header and footer back into the index.php page.
The two tags we will user are get_header() and get_footer(). These are built in WordPress functions that find the header.php and footer.php files and include them at the top and bottom of the page. WordPress can do this because we named our files header.php and footer.php. If we named the files my-header.php and my-footer.php this would not work.
Here is what our index.php file should look like now:

<?php get_header(); ?>

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
       </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>

<?php get_footer(); ?>

You may be wondering why we would do that? The reason is that later we will be creating multiple pages in which we will want to include the header and footer code. If we just left the header and footer HTML in all of these pages and went to change something in the header or footer, we would have to have to update the HTML across all of the pages. Using the “embed” or “include” method allows us to change the header or footer code in one place and have it automatically fixed across all of the pages. It’s similar to the benefit of linking to CSS files instead of including all of the CSS at the top of each page.
Now that we have this done, we are going to fix all of the broken links to our CSS and JavaScript files.
Let’s start in the header.
Find the links to the CSS files in the header and change them from this

<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

To this

<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">

The in your style.css file, add the following:

@import url('bootstrap/css/bootstrap.css'); 
@import url('bootstrap/css/bootstrap-responsive.css'); 
body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
}

What we have done here is use a special WordPress tag that will automatically link to the bootstrap CSS in our theme files no matter what page of our site we’re on. You will see this bloginfo() function used throughout this tutorial in various ways. Then we used the @import tag to link to the Bootstrap CSS files from our main style.css file. Your site should now look like this: