Screencast: Part 16: Adding a sidebar

We want to spice up our very bor­ing page now by adding a side­bar. When we do this we alter the lay­out of our site so we’ll need to add some html struc­ture and some CSS to style the new structure.

Part 1

Part 2

css added to style.css

.mainContent {
  width: 600px;
  float: left;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}

page.php

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div class="mainContent">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content( 'Read the rest of this entry &raquo;' ); ?>

<?php edit_post_link( 'Edit', '', '' ); ?>

<?php endwhile; ?>
<?php endif; ?>
</div>
<!-- END .mainContent -->
<?php get_footer(); ?>

footer.php

</div>
<!-- END .contentContainer -->
<footer>
&copy; 2012
</footer></div>
<!-- END #wrapper -->
</body>
</html>

index.php

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div class="mainContent">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time( 'F jS, Y' ) ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content( 'Read the rest of this entry &raquo;' ); ?>
</div>
<p class="postmetadata">
Posted in <?php the_category( ', ' ) ?>
<strong>|</strong>
<?php edit_post_link( 'Edit', '', '<strong>|</strong>' ); ?>
<?php comments_popup_link( 'No Comments »', '1 Comment »', '% Comments »' ); ?>
<!--
<?php trackback_rdf(); ?>
-->
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link( '&laquo; Previous Entries' ) ?></div>
<div class="alignright"><?php next_posts_link( 'Next Entries &raquo;', '' ) ?></div>
</div>
 <?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">
<?php _e( "Sorry, but you are looking for something that isn't here." ); ?>
<?php endif; ?>
</div>
<!-- END .mainContent -->
<?php get_footer(); ?>

Links used in Screencast

http://mockflow.com/
The Clearfix for floats
Floats, Posi­tions and Speci­ficity CSS tutorials

Down­load the fin­ished files here

custom-wordpress-theme-step-16-part-1-and-2-finished

Back to Main Word­Press Page with all Tuto­r­ial Links

Back to Main Word­Press Page with list of tuto­ri­als on cre­at­ing a Word­Press cus­tom theme from scratch.