Add a Widget Area Under Your First Post, Great For Ads or Pictures

I’m always experimenting with VoodooPress. This time I was looking to place a widget area under my first post. Personally I was looking to experiment with ad placement. I’m not sure if I’m sold on this location or not. But if I change my mind, this widget area could be useful for so many other things like images, or recent/popular post thumbnails. Let’s take a look at adding this widget area.

As always, I am working with a twentyten child theme. So the instructions will be specific to that. But I will try to make sure you understand the concept here so you can do it in any theme. The first thing we need to do is to register our sidebar. In a twentyten child theme that is done simply, just add this code into functions.php:

//ANOTHER WIDGET AREA UNDER THE FIRST POST
function voodoo_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Under First Post', 'twentyten' ),
		'id' => 'under-post-widget-area',
		'description' => __( 'Widget under first post', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'voodoo_widgets_init' );

If you take a look at twentyten’s functions.php, you should be able to see what I’m doing here. But this will register our new sidebar. I tried to make use of the existing twentyten code, that makes it simple to latch on to the styles already defined in twentyten. You’ll see in the before_widget line we keep widget-container as the class. I did this to maintain my styling per this post. That was where we styled up our widget areas a little. If you didn’t style your widgets, it’s still a good idea to re-use whatever css rules you can. Of course you can change this entirely if you like and make new css rules.

If you aren’t using a twentyten child theme, your code will probably be different than what I have here. You would want to take a look at your functions.php file and see how your sidebars are registered and model your new one after that. Chances are you can copy an individual sidebars array code, copy it, and paste it back into the overall registration array, renaming the important parts to have a new sidebar. The ID is the most important thing to rename, but you should also change up the name and description.

So now we have our sidebar registered. If you head on over to your appearance->widgets menu, you can see your new sidebar. You can even add widgets. It won’t appear anywhere, because we haven’t done that yet!! So let’s get to that part.

Let’s take a look at two very useful blocks of code. This one first:

	<?php if(!$voodoo_after_post){ ?>
                      <!-- Your Code Goes Here -->
	<?php $voodoo_after_post = 1; } ?>

This is awesome stuff. What’s it do? It displays whatever code you put in place of my comment (Line 2) after whatever post you specify. I have it set for after the first post, which is the number 1. You can change that number for 2 or 3, etc. to get your code after a different post. But where does the code go?

What file you put that code into depends on how your theme is set up. First up, did you follow along with this tutorial? It’s the one where we brought over and edited loop.php, and then made new files for each format. If you did, you are in luck. The code goes in loop.php. If not, you have to make a decision. This is one of those things I can’t make work from functions.php, so it has to actually go into the template displaying your blog posts. If you are using a twentyten child theme, you can follow the above tutorial, or you can just copy loop.php from twentyten to your child theme. Your’s will be used from your child theme. If you don’t have a child theme going, this code would go into loop.php, or index.php, or maybe home.php or front-page.php, it all depends on your theme. You need to figure out what controls your post display per the template heirarchy.

Once you have your template figured out, find your loop. It goes at the end of your loop, right above the closing endwhile. So in my child theme’s loop.php, whether you followed the format splitting tutorial or not, it goes right above this line here:

<?php endwhile; // End the loop. Whew. ?>

So that is the first block of code, and placement. You could just put your ad code or anything else directly in there replacing my comment line. But what fun is that? Let’s make it a widget area! Here is the code for displaying our widget area/sidebar that we registered earlier.

		<?php if ( is_active_sidebar( 'under-post-widget-area' ) ) : ?>
			<div class="post post-widget-area hentry">
				<ul class="xoxo">
					<?php dynamic_sidebar( 'under-post-widget-area' ); ?>
				</ul>
			</div><!-- #first .widget-area -->
		<?php endif; ?>

On line 1 there, we check if the sidebar exists. On line 2, all we do is borrow some existing twentyten classes, this makes things line up nice and neat with little effort. We will really only need to make a tiny css edit to make things perfect. Line 4 here simply displays the widget area if the check in line 1 pans out.

So, let’s put those two blocks of code together:

		</div><!-- #post-## -->

		<?php comments_template( '', true ); ?>

	<?php if(!$voodoo_after_post){ ?>
		<?php if ( is_active_sidebar( 'under-post-widget-area' ) ) : ?>
			<div class="post post-widget-area hentry">
				<ul class="xoxo">
					<?php dynamic_sidebar( 'under-post-widget-area' ); ?>
				</ul>
			</div><!-- #first .widget-area -->
		<?php endif; ?>
	<?php $voodoo_after_post = 1; } ?>

<?php endwhile; // End the loop. Whew. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>

That’s it, those two blocks of code combined. I also included a couple lines from above and below our new code. They are the existing code from twentyten’s (my child theme copy) loop.php, included so you can see placement.

Now the css edit. Find this in your style.css (if you copied all of twentyten’s css to your child theme):

.widget-area ul ul {
	list-style: none;
	margin-left: 0;
}

and just change it to this:

.widget-area ul, .post-widget-area ul {
	list-style: none;
	margin-left: 0;
}

If you aren’t using a twentyten child theme, I can’t really help you with the css so much. Every theme is different. Hopefully you can tweak the css selectors we use here to match into your own theme perfectly.

That’s all there is to it. This shows how to add a widget area under your first post in a twentyten child theme. But if you break it down, there’s a lot of info here. You can really add a widget area to pretty much any theme now, in any location! Have fun, get widgetizing!!

10 Replies to “Add a Widget Area Under Your First Post, Great For Ads or Pictures”

  1. Great tutorial and exactly what I was looking for! Your instructions are clear and easy to follow for folks who are into custom themes. I am so surprised that no one has commented on this blog post yet.

    Thank you so much for sharing your knowledge.

  2. Widgets are so useful and versatile ..I think they are becoming the trend to make and use at the moment… this was very informative and useful… great work

  3. i would like to place the widget above the top content area just below the navigation bar, can you help with this. Your tutorials are very easy to follow and i will appreciate if you can assist with this.
    Thanks in advance.

    1. I think I linked you here from my other site before realizing you had commented here too. Have you already registered the new sidebar? What theme are you using? I just added a new sidebar in 2011 super fast. First, as always you would make a child theme. http://vudu.me/child for more on that. Once you have done that you can register the new sidebar from your child theme in functions.php like:

      function voodoo_widgets_init() {
      	register_sidebar( array(
      		'name' => __( 'Test Post Widget', 'twentyeleven' ),
      		'id' => 'sidebar-6',
      		'description' => __( 'An optional widget area for your first post', 'twentyeleven' ),
      		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
      		'after_widget' => "</aside>",
      		'before_title' => '<h3 class="widget-title">',
      		'after_title' => '</h3>',
      	) );
      }
      add_action( 'widgets_init', 'voodoo_widgets_init' );
      

      Note, this code only works for a 2011 child theme, you would need to adjust if if you are using a different theme, to match the way sidebars are coded.
      After registyering your sidebar, you could copy index.php from 2011 to your child theme and then add this code:

      		<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
      			<div class="post post-widget-area hentry">
      				<ul class="xoxo">
      					<?php dynamic_sidebar( 'sidebar-6' ); ?>
      				</ul>
      			</div><!-- #first .widget-area -->
      		<?php endif; ?>
      

      RIght here:

      get_header(); ?>
      
      		<div id="primary">
      
      			<div id="content" role="main">
                                                      CODE GETS PASTED HERE
      			<?php if ( have_posts() ) : ?>
      

      I tested that on my test site, works perfectly for a 2011 child theme.

  4. Nice post, I was wondering how do you control the order of the widgets that are already beneath your posts which you cannot change in the widget area.

Leave a Reply