WP-Mix

When developing my free WordPress starter theme, I end up with lots of sweet code snippets that for whatever reason didn’t make the final cut. For example, the sidebar template was recently refactored with shiny new code. So what to do with the previous sidebar code? Delete it? Nah, instead I would rather share it online, right here at WP-Mix.com :)

Here is the main sidebar code that I wanted to share. Ideally it can be used as the template code for the sidebar.php file in any WordPress theme.

<div class="sidebar">

	<?php if (is_active_sidebar('sidebar')) : 
		
		dynamic_sidebar('sidebar'); 
		
		else : ?>

		<div class="widget nav-sidebar">
			<h3><?php _e('Search', 'shapespace'); ?></h3>
			<?php get_search_form(); ?>
		</div>

		<div class="widget nav-sidebar">
			<h3><?php _e('Cateogries', 'shapespace'); ?></h3>
			<ul><?php wp_list_categories('show_count=1&title_li='); ?></ul>
		</div>

		<div class="widget nav-sidebar">
			<h3><?php _e('Tags', 'shapespace'); ?></h3>
			<?php wp_tag_cloud('format=list&number=10&smallest=14&largest=14&unit=px'); ?>
		</div>
		
		<div class="widget nav-sidebar">
			<h3><?php _e('Authors', 'shapespace'); ?></h3>
			<ul><?php wp_list_authors('optioncount=1&show_fullname=1&exclude_admin=0&hide_empty=1'); ?></ul>
		</div>
		
		<div class="widget nav-sidebar">
			<h3><?php _e('Pages', 'shapespace'); ?></h3>
			<ul><?php wp_list_pages(array('title_li' => '')); ?></ul>
		</div>
		
		<?php if (has_nav_menu('sidebar')) : ?>
		
		<div class="widget nav-sidebar">
			<h3>Sidebar Menu</h3>
			<?php wp_nav_menu(array(
				'theme_location' => 'sidebar', 
				'container' => false
			)); ?>
		</div>
		
		<?php endif; ?>
		
	<?php endif; ?>

</div>

There are lots of details and patterns included in that template code. Rather than try to explain everything in English, I will leave it as-is, for you to explore and hopefully make use of anything that looks interesting.

Bonus!

A couple of bonus code snippets. Either of these examples may be added to the above sidebar template code, nested inside of the .sidebar <div>. The first snippet adds a Recent Posts section to the sidebar:

<div class="widget nav-sidebar">
	<h3><?php _e('Recent Posts', 'shapespace'); ?></h3>
	<ul>
		<?php 
			$recent_posts = wp_get_recent_posts(array(
				'numberposts' => 5, 
				'offset'      => 0, 
				'orderby'     => 'post_date', 
				'post_status' => 'publish'
			));
			foreach ($recent_posts as $r) {
				echo '<li><a href="'. get_permalink($r['ID']) .'">'. $r['post_title'] .'</a></li>';
			} 
		?>
	</ul>
</div>

This is a simple way to display some recent posts in the sidebar, which is a common feature of many websites. The second code snippet is similar, it adds a Recent Comments section to the sidebar:

<div class="widget nav-sidebar">
	<h3><?php _e('Recent Comments', 'shapespace'); ?></h3>
	<ul>
		<?php 
			$recent_comments = get_comments(array(
				'number' => 3, 
				'status' => 'approve'
			));
			foreach ($recent_comments as $r) {
				echo '<li><a href="'. get_comment_link($r->comment_ID) .'">'. $r->comment_author .'</a>: ';
				echo get_comment_excerpt($r->comment_ID) .'</li>';
			} 
		?>
	</ul>
</div>

Again, both of these code snippets should be placed inside of the .sidebar <div>. Specifically, either code block should align with the other/existing blocks within the else condition. Basically look for the .nav-sidebar classed elements and make sure they are adjacent with one another (i.e., nested at the same level, inside of the main .sidebar <div>).