I found a new tutorial - http://thethemefoundry.com/blog/html-wordpress/ - that is helping somewhat. However, I have totally messed up because I have 2 sidebars on the index.html page. I set up 2 pages to account for this. firstSideBar.php and secondSideBar.php. According to the tutorial, I am supposed to cut the index.html code into sections for each php page. This makes sense to me but I am not sure I am cutting it correctly. Below is all the code for each page.
The original index.html code
<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" media="screen,projection,tv"/>
<link rel="stylesheet" href="css/bigScreen.css" media="screen and (min-width:66em)"/>
<link rel="stylesheet" href="css/smallScreen.css" media="screen and (max-width:751px)"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" >
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<title>Centennial Airport Community Noise Roundtable</title>
</head>
<body>
<div id="pageWrapper">
<h1> Centennial Airport Community Noise Roundtable </h1>
<ul id="mainMenu">
<li><a href="index.html">Home</a></li>
<li><a href="noise101.html">Noise 101</a></li>
<li><a href="meeting.html">Meeting Recaps</a></li>
<li><a href="workplan.html">Workplan</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
<hr />
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/1.png" />
</li>
<li>
<img src="images/2.png" />
</li>
<li>
<img src="images/3.png" />
</li>
<li>
<img src="images/4.png" />
</li>
<li>
<img src="images/5.png" />
</li>
<li>
<img src="images/6.png" />
</li>
<li>
<img src="images/7.png" />
</li>
<li>
<img src="images/8.png" />
</li>
</ul>
</div>
<hr />
<div id="columnWrapper">
<div id="contentWrapper">
<div id="content">
<h2>Recent Posts</h2>
<div class="post">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
<!-- .post --></div>
<div class="post">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
<!-- .post --></div>
<div class="post">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
<!-- .post --></div>
<!-- #content, #contentWrapper --></div>
</div>
<div id="sideBarWrapper">
<div id="firstSideBar">
<h2>News</h2>
<div class="subSection"> <img src="images/placeHolder.png" alt="placeholder image" class="plate" />
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- .subSection --></div>
<div class="subSection"> <img src="images/placeHolder.png" alt="placeholder image" class="plate" />
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- .subSection --></div>
<!-- #firstSideBar --></div>
<div id="secondSideBar">
<form id="sideSearch" action="#" method="get">
<fieldset>
<input type="text" name="searchText" id="sideSearchText" />
<input type="submit" class="submit" />
</fieldset>
</form>
<div id="sideLinks" class="subSection">
<h2>Links</h2>
<ul>
<li><a href="http://webtrak.bksv.com/den" target="_blank">Denver Webtrak</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="calendar" class="subSection">
<h2>Calendar</h2>
<table>
<caption>
May 2012
</caption>
<thead>
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thu</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="lastMonth">29</td>
<td class="lastMonth">30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="nextMonth">1</td>
<td class="nextMonth">2</td>
</tr>
</tbody>
</table>
<!-- #calendar.subSection --></div>
<div id="RSS">
<h2>RSS Feed</h2>
<!-- #RSS --></div>
<!-- #secondSideBar --></div>
<!-- #sideBarWrapper --></div>
<!-- #columnWrapper --></div>
<hr />
<div id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="noise101.html">Noise 101</a></li>
<li><a href="meeting.html">Meeting Recaps</a></li>
<li><a href="workplan.html">Workplan</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
<hr />
<div class="address"> Arapahoe County Public Airport Authority<br />
7800 South Peoria Street, Box G-1<br />
Englewood, CO 80112<br />
(303) 790-0598 </div>
<hr />
<img src="images/cacnr_logo.png" alt="CACNR Logo" /><br />
© 2012 Centennial Airport Community Noise Roundtable
<hr />
<div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body>
</html>
header.php
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" media="screen,projection,tv"/>
<link rel="stylesheet" href="css/bigScreen.css" media="screen and (min-width:66em)"/>
<link rel="stylesheet" href="css/smallScreen.css" media="screen and (max-width:751px)"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" >
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<title>Centennial Airport Community Noise Roundtable</title>
</head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body>
<div id="pageWrapper">
<h1> Centennial Airport Community Noise Roundtable </h1>
<ul id="mainMenu">
<li><a href="index.php">Home</a></li>
<li><a href="noise101.php">Noise 101</a></li>
<li><a href="meeting.php">Meeting Recaps</a></li>
<li><a href="workplan.php">Workplan</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="newsletter.php">Newsletter</a></li>
</ul>
<hr />
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/1.png" />
</li>
<li>
<img src="images/2.png" />
</li>
<li>
<img src="images/3.png" />
</li>
<li>
<img src="images/4.png" />
</li>
<li>
<img src="images/5.png" />
</li>
<li>
<img src="images/6.png" />
</li>
<li>
<img src="images/7.png" />
</li>
<li>
<img src="images/8.png" />
</li>
</ul>
</div>
<hr />
index.php
<?php get_header(); ?>
<div id="columnWrapper">
<div id="contentWrapper">
<div id="content">
<h2>Recent Posts</h2>
<div class="post">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
<!-- .post --></div>
<div class="post">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
<!-- .post --></div>
<div class="post">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
<!-- .post --></div>
<!-- #content, #contentWrapper --></div>
</div>
<?php get_firstSidebar(); ?>
<?php get_secondSidebar(); ?>
<?php get_footer(); ?>
firstSideBar.php
<div id="sideBarWrapper">
<div id="firstSideBar">
<h2>News</h2>
<div class="subSection"> <img src="images/placeHolder.png" alt="placeholder image" class="plate" />
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- .subSection --></div>
<div class="subSection"> <img src="images/placeHolder.png" alt="placeholder image" class="plate" />
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- .subSection --></div>
<!-- #firstSideBar --></div>
secondSideBar.php
<div id="secondSideBar">
<div id="sideSearch"></div>
<div id="sideLinks" class="subSection">
<h2>Links</h2>
<ul>
<li><a href="http://webtrak.bksv.com/den" target="_blank">Denver Webtrak</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="calendar" class="subSection">
<h2>Calendar</h2>
<div id="RSS">
<h2>RSS Feed</h2>
<!-- #RSS --></div>
<!-- #secondSideBar --></div>
<!-- #sideBarWrapper --></div>
<!-- #columnWrapper --></div>
<hr />
footer.php
<div id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="noise101.html">Noise 101</a></li>
<li><a href="meeting.html">Meeting Recaps</a></li>
<li><a href="workplan.html">Workplan</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
<hr />
<div class="address"> Arapahoe County Public Airport Authority<br />
7800 South Peoria Street, Box G-1<br />
Englewood, CO 80112<br />
(303) 790-0598 </div>
<hr />
<img src="images/cacnr_logo.png" alt="CACNR Logo" /><br />
© 2012 Centennial Airport Community Noise Roundtable
<hr />
<div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body>
</html>
I also believe that I have to set up php pages for the different HTML pages I currently have. This this correct? Do I do the exact same thing with each page (i.e. cut up code and then add get header get sidebar and get footer?).