Sidebar Widgets

Description: The default sidebar with widgets.

This template is included by:

Template Code

	<div id="sidebar">
		<ul>
			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
			<li>
				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
			</li>

			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
			<li><h2>Author</h2>
			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
			</li>
			-->

			<?php if ( is_404() || is_category() || is_day() || is_month() ||
						is_year() || is_search() || is_paged() ) {
			?> <li>

			<?php /* If this is a 404 page */ if (is_404()) { ?>
			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for the day <?php the_time('l, F jS, Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for <?php the_time('F, Y'); ?>.</p>

			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for the year <?php the_time('Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
			<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
			<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>

			<?php } ?>

			</li> <?php }?>

			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

			<li><h2>Archives</h2>
				<ul>
				<?php wp_get_archives('type=monthly'); ?>
				</ul>
			</li>

			<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
				<?php wp_list_bookmarks(); ?>

				<li><h2>Meta</h2>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
					<?php wp_meta(); ?>
				</ul>
				</li>
			<?php } ?>

			<?php endif; ?>
		</ul>
	</div>

This template includes the following tags:

  • wp_meta is an Action Hook necessary for the functioning of some plugins.

HTML Skeleton

<div id="sidebar">
	<ul>

		<li id="search" class="widget widget_search">
			<form id="searchform">
				<div>
					<input id="s" />
					<br />
					<input type="submit" />
				</div>
			</form>
		</li>

		<li id="pages" class="widget widget_pages">
			<h2 class="widgettitle">Pages</h2>
			<ul>
				<li class="page_item page-item-[#]">[ITEM]</a>
					<ul>
						<li class="page_item page-item-[#]">[ITEM]</li>
					</ul>
				</li>
			</ul>
		</li>

		<li id="archives" class="widget widget_archives">
			<h2 class="widgettitle">Archives</h2>
			<ul>
				<li>[ITEM]</li>
			</ul>
		</li>
		<li id="categories-1" class="widget widget_categories">
			<h2 class="widgettitle">Categories</h2>
			<ul>
				<li class="cat-item cat-item-[#]">[ITEM]</li>
			</ul>
		</li>

		<li id="links" class="widget widget_links">
			<h2 class="widgettitle">Blogroll</h2>
			<ul>
				<li>[ITEM]</li>
			</ul>
		</li>

		<li id="meta" class="widget widget_meta">
			<h2 class="widgettitle">Meta</h2>
			<ul>
				<li>[ITEM]</li>
			</ul>
		</li>

		<li id="calendar" class="widget widget_calendar">
			<h2 class="widgettitle"> </h2>
			<div id="calendar_wrap">
				<table id="wp-calendar" summary="Calendar">
					<caption>
					[MONTH, YEAR]
					</caption>
					<thead>
						<tr>
							<th abbr="Monday" scope="col" title="Monday">M</th>
							<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
							<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
							<th abbr="Thursday" scope="col" title="Thursday">T</th>
							<th abbr="Friday" scope="col" title="Friday">F</th>
							<th abbr="Saturday" scope="col" title="Saturday">S</th>
							<th abbr="Sunday" scope="col" title="Sunday">S</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<td colspan="3" id="prev" class="pad"> </td>
							<td class="pad"> </td>
							<td colspan="3" id="next" class="pad"> </td>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td colspan="4" class="pad"> </td>
							<td>1</td>
							<td>2</td>
							<td>3</td>
						</tr>
						<tr>
							<td>4</td>
							<td>5</td>
							<td>6</td>
							<td>7</td>
							<td>8</td>
							<td>9</td>
							<td>10</td>
						</tr>
						<tr>
							<td>11</a></td>
							<td>12</td>
							<td>13</td>
							<td>14</td>
							<td>15</td>
							<td>16</td>
							<td>17</td>
						</tr>
						<tr>
							<td>18</td>
							<td>19</td>
							<td id="today">20</td>
							<td>21</td>
							<td>22</td>
							<td>23</td>
							<td>24</td>
						</tr>
						<tr>
							<td>25</td>
							<td>26</td>
							<td>27</td>
							<td>28</td>
							<td>29</td>
							<td class="pad" colspan="2"> </td>
						</tr>
					</tbody>
				</table>
			</div>
		</li>

		<li id="recent-comments" class="widget widget_recent_comments">
			<h2 class="widgettitle">Recent Comments</h2>
			<ul id="recentcomments">
				<li class="recentcomments">[USERNAME] on [POST TITLE]</li>
			</ul>
		</li>

		<li id="recent-posts" class="widget widget_recent_entries">
			<h2 class="widgettitle">Recent Posts</h2>
			<ul>
				<li>[POST TITLE]</li>
			</ul>
		</li>

		<li id="tag_cloud" class="widget widget_tag_cloud">
			<h2 class="widgettitle">Tags</h2>
			[TAGS]
		</li>

		<li id="text-[#]" class="widget widget_text">
			<div class="textwidget">
				[CONTENT]
			</div>
		</li>

	</ul>
</div>

Related CSS Styles

/* Begin Typography & Colors */

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: #d5d6d7 url('images/kubrickbgcolor.jpg');
	color: #333;
	text-align: center;
}

#page {
	background-color: white;
	border: 1px solid #959596;
	text-align: left;
}

#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
}

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #777;
}

/* Begin Structure */

body {
	margin: 0 0 20px 0;
	padding: 0;
}

#page {
	background-color: white;
	margin: 20px auto;
	padding: 0;
	width: 760px;
	border: 1px solid #959596;
}

/*	Begin Headers */

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
}

/* Begin Form Elements */

#searchform {
	margin: 10px auto;
	padding: 5px 3px;
	text-align: center;
}

#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
}

#sidebar #searchsubmit {
	padding: 1px;
}

/* Begin Lists */

.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
}

#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
}

/* Begin Sidebar */

#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 545px;
	width: 190px;
}

#sidebar form {
	margin: 0;
}

Resources

  • N/A