In this part of the WordPress News Theme I finish the sidebar for the theme and create styling for the sidebar and footer.

I’ll cover how to style the output you receive from the wp_list_pages and wp_list_categories functions.

If you missed the tutorials previous to this one check out WordPress News Theme Part 1. All of the code follows the video and you can use it however you’d like.

Here are links to the previous parts of this tutorial series if you missed them:

• WordPress News Theme : I create all of the HTML for my News Theme
• WordPress News Theme Pt 2 : I introduce cool CSS styling tricks to the theme
• WordPress News Theme Pt 3 : I finish editing all of the HTML and CSS for the theme
• WordPress Featured Content : I create a featured content slider plugin for the theme
• WordPress News Theme Pt 4 : I start converting HTML code into the WordPress Theme
• WordPress News Theme Pt 5 : I finish creating the index.php and footer.php code

Code From the Video

SIDEBAR-FIRST.PHP

<div id=”firstSidebar”>

 

<?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘Sidebar Widgets’)) : else : ?>

 

<!– All this stuff in here only shows up if you DON’T have any widgets active in this zone –>

 

<div class=”sidebarWidgets”>

 

<div class=”sidebarTitle”> <h4></h4></div>

 

<p class=”sidebarExcerpt”>

<a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/rss_logo.png” height=”50px” width=”50px”></a>

<a href=”http://www.twitter.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/twitter_logo.png” height=”50px” width=”50px”></a>

<a href=”http://www.facebook.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/facebook_logo.png” height=”50px” width=”50px”></a>

<a href=”http://www.linkedin.com/in/derekbanas”><img src=”<?php bloginfo(‘template_directory’); ?>/images/linkedin_logo.png” height=”50px” width=”50px”></a>

</p>

 

<div class=”sidebarTitle”></div>

<p class=”sidebarExcerpt”>

<?php wp_list_pages(‘depth=1&title_li=<div class=”sidebarTitle”><h4>Pages</h4></div>’ ); ?>

</p>

 

<div class=”sidebarTitle”> <h4></h4></div>

<p class=”sidebarExcerpt”>

 

<img src=”<?php bloginfo(‘template_directory’); ?>/images/ad_sample.png” alt=”Advertising” title=”Advertising” width=”250px” height=”250px” />

 

</p>

 

<div class=”sidebarTitle”><h4>Categories</h4></div>

<p class=”sidebarExcerpt”>

<?php wp_list_categories(‘depth=1&title_li=’ ); ?>

</p>

 

</div> <!– End of sidebarWidgets –>

 

<?php endif; ?>

 

</div>

 

FOOTER.PHP

<div id=”footer”>

 

<div class=”footerContent”>

<?php wp_list_pages(‘depth=1&number=10&title_li=<div class=”sidebarTitle”><h4>Pages</h4></div>’ ); ?>

</div>

 

<div class=”footerContent”>

<div class=”footerTitle”><h4>Categories</h4></div>

<p class=”sidebarExcerpt”>

<?php wp_list_categories(‘depth=1&orderby=name&number=10&title_li=’ ); ?>

</div>

 

<div class=”footerFollow”>

<div class=”footerTitle”><h4>Follow Us</h4></div>

<a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/rss_logo.png” height=”50px” width=”50px”></a>

<a href=”http://www.twitter.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/twitter_logo.png” height=”50px” width=”50px”></a>

<a href=”http://www.facebook.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/facebook_logo.png” height=”50px” width=”50px”></a>

<a href=”http://www.linkedin.com/in/derekbanas”><img src=”<?php bloginfo(‘template_directory’); ?>/images/linkedin_logo.png” height=”50px” width=”50px”></a>

</div>

<br /><br /><br />

<div class=”copyright”>

&copy;<?php echo date(“Y”); echo ” “; bloginfo(‘name’); ?>

<?php echo ‘ Designed by <a href=”http://newthinktank.com” alt=”New Think Tank”>New Think Tank</a>’; ?>

</div>

</div>

 

</div>

 

<?php wp_footer(); ?>

 

<!– Don’t forget analytics –>

 

</body>

 

</html>

STYLE.CSS

/*

Theme Name: New Think Tank News Theme 1

Theme URI: http://www.newthinktank.com

Description: A really nice news theme with featured content slider

Author: Derek Banas

Author URI: http://www.newthinktank.com

Version: 1

*/

 

@import url(http://fonts.googleapis.com/css?family=Lobster&v1);

 

html {

background: #EEE1C2;

background-image:url(‘./images/Lines-8.jpg’);

background-repeat:repeat;

}

 

body {

background-color: #EEE1C2;

background-image:url(‘./images/Lines-8.jpg’);

background-repeat:repeat;

font: 14px/1.4 Georgia, serif;

}

 

#header, #footer, #firstSidebar, #secondSidebar {

display: block;

}

 

#pageWrapper {

width:1000px;

background-color: #FFFFFF;

margin-left: auto;

margin-right: auto;

}

 

/* All Header CSS Styling */

#header {

position: relative;

background-color: #676767;

background-image:url(‘./images/Lines-8.jpg’);

background-repeat:repeat;

height: 55px;

padding: 20px;

}

 

#blogTitle a{

position: absolute;

left: 26px;

top: 15px;

color: #FFF;

font: bold 40px/1.4 ‘Lobster’, tahoma, sans-serif;

text-shadow: #676767 2px 2px 4px;

text-decoration: none;

}

 

#blogTitle a:hover{

color: #E6E8FA;

text-shadow: #000 2px 2px 4px;

}

 

#blogSlogan {

position: absolute;

left: 124px;

top: 50px;

color: #FFF;

font: bold 15px/1.0 Arial, sans-serif;

text-shadow: #676767 1px 1px 2px;

 

}

 

#searchBox {

position: absolute;

left: 700px;

top: 65px;

color: #FFFFFF;

font: bold 15px/1.0 Arial, sans-serif;

text-shadow: #000000 2px 2px 1px;

text-transform:uppercase;

}

 

/* All Sidebar CSS Styling */

 

#firstSidebar {

font: 13px/1.4 Georgia, serif;

color: #666;

padding 5px;

padding-bottom: 15px;

padding-left: 10px;

background-color: #FFFFFF;

width: 250px;

text-align: left;

float: right;

margin-left: 5px;

margin-right: 5px;

margin-top: 0px;

border-left: 1px solid #DCDCDC;

}

 

 

.sidebarTitle h4 {

font: bold 14px/17px Helvetica, sans-serif;

text-transform: uppercase;

color: #000f2e;

}

 

.sidebarExcerpt li ul li a{

list-style-type: none;

text-decoration: none;

}

 

.pagenav {

list-style-type: none;

text-decoration: none;

}

 

.pagenav ul li a{

text-decoration: none;

font: bold 14px/17px Helvetica, sans-serif;

text-transform: uppercase;

color: #666;

}

 

#firstSidebar li{

font: bold 14px/17px Helvetica, sans-serif;

text-transform: uppercase;

list-style-type: none;

border-bottom: 1px dashed #DCDCDC;

padding-bottom: 3px;

padding-top: 3px;

margin-left: 0px;

text-decoration: none;

}

 

#firstSidebar li a{

text-decoration: none;

font: bold 14px/17px Helvetica, sans-serif;

text-transform: uppercase;

color: #666;

}

 

.sidebarExcerpt a {

text-decoration: none;

}

 

.pagenav .sidebarTitle h4 {

text-decoration: none;

}

 

.sidebarExcerpt .categories li{

text-decoration: none;

list-style-type: none;

}

 

#firstSidebar ul li{

font: bold 14px/17px Helvetica, sans-serif;

border-bottom: 1px dashed #DCDCDC;

padding-bottom: 3px;

padding-top: 3px;

margin-left: -30px;

text-decoration: none;

}

 

#footer {

background-color: #000f2e;

text-align: center;

color: #FFF;

padding: 20px;

height: 220px;

}

 

.footerContent {

text-align:left;

width: 320px;

padding-left: 10px;

padding-right: 10px;

padding-bottom:15px;

float: left;

}

 

.footerContent .pagenav ul li a {

color: #FFF;

}

 

.footerContent .sidebarTitle h4 {

color: #FFF;

}

 

.footerContent li {

font: bold 14px/17px Helvetica, sans-serif;

list-style: none;

margin-left: -30px;

color: #FFF;

}

 

.footerContent li a {

text-decoration: none;

text-transform: uppercase;

color: #FFF;

}

 

.footerTitle h4 {

font: bold 14px/17px Helvetica, sans-serif;

text-transform: uppercase;

color: #FFF;

margin-left: -40px;

}