How to Add Widgets Above and Below Posts & Pages in WordPress

Being able to add widgets above and below my content in WordPress is a must for me. Mostly it’s the below content area that I need, but being able to add it above content comes in handy as well.

Some themes will give you widgets above and below content, but the problem with those is sometimes you need it injected into the content; have it show up before the first sentence and after the last. If you have other plugins being used, like Jetpack’s sharing feature, then odds are that the widget will come after that because of how Jetpack’s sharing feature injects itself.

Anyway, chances are if you’re reading this then you know what you’re after anyway. So, why am I convincing you? ­čśë

tldr; Jump down to the code without explanation.

Registering the Sidebars

The first thing you need to do is tell WordPress that you are creating new sidebars. Sidebars are what widgets are placed into.

You will need to add code to your theme’s functions.php file. Ideally, you will create a child theme. If you don’t create a child theme then the next time your theme updates you will lose the code you added.

add_action('widgets_init','my_widgets_init');

function my_widgets_init() {
	register_sidebar( array(
		'name' => __('Above Content'),
		'id' =>'my_above_content',
		'description' => __('Shows widgets above content.'),
		'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget' => '</div></section>',
		'before_title' => '<h4 class="widget-title">',
		'after_title' => '</h4>',
	));	
	register_sidebar( array(
		'name' => __('Below Content'),
		'id' => 'my_below_content',
		'description' => __('Shows widgets below content.'),
		'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget' => '</div></section>',
		'before_title' => '<h4 class="widget-title">',
		'after_title' => '</h4>',
	));
}

There’s a few things you’ll want to consider in the code.

1. The areas in the code above that reference before_widget, after_widget, before_title, and after_title will need to be adjusted. Every theme displays its widgets a bit differently. So, what I do is match those elements up to the theme I’m using. That code above is how my theme draws widgets, so I use it to keep things consistent with styling.

To see how your theme creates widgets you can try looking in your theme’s functions.php file. Search for register_sidebar in the code and look for those mentioned lines:┬ábefore_widget, after_widget, before_title, and after_title. When you find it, just copy those lines and replace the ones in my code with them.

2. Alternatively, you can keep those lines as I have them, or you can change them however you like – creating your own elements.

before_widget – This is the stuff inserted before the widget itself.
after_widget – The code that comes after the widget. Often this is used to close out any opening code used in before_widget.
before_title – The code appearing before the title element of your widget. The title being that field you type into when you place the widget into the sidebar. Most often you’ll use a heading tag, like above there’s an h4 tag.
after_title – What comes after the title mentioned. Usually you’ll close out any tags you opened in before_title.

Above Content Widget

Now, you need to add the code that will insert the widget into the content. This code will work on any post, page, and 404 page.

add_filter('the_content','my_above_content_widgets', 99);

function my_above_content_widgets($content = false) {
	global $post;

	if(is_active_sidebar('my_above_content') && ((is_singular() && is_main_query() && !is_feed()) || is_404())) {
		ob_start();
		$sidebar = dynamic_sidebar('my_above_content');
		$new_content = ob_get_clean();
		$content = $new_content . $content;
	}

	return $content;
}

If you have any problems with your widget not appearing before your content then you may need to adjust something. The first line above with add_filter() has a value of 99 at the end. That value tells WordPress when to run the filter. I’ve found that using 99 will insert the widget correctly. However, if your widget is inserting somewhere inside the content, and not above it, then you can try changing that value of 99 to something higher. That will delay the execution of the code, give time for other things to happen, and hopefully put it where you want it.

Below Content Widget

Lastly, add in the code to create the widgets below our content. This code will work on any post, page, and 404 page.

add_filter('the_content','my_below_content_widgets', 1);

function my_below_content_widgets($content = false) {
	global $post;

	if(is_active_sidebar('my_below_content') && ((is_singular() && is_main_query() && !is_feed()) || is_404())) {
		ob_start();
		$sidebar = dynamic_sidebar('my_below_content');
		$new_content = ob_get_clean();
		$content .= $new_content;
	}

	return $content;
}

As I mentioned with the above content widget, the add_filter() has a value of 1. Opposite of the previous widget, this one tries to insert it’s code as fast as it can. The lower the value the earlier it tries to insert itself.

That value can be adjusted as needed. I like to use a value of 1 because I also use Jetpack’s sharing widget, and a value of 1 inserts my widget before Jetpack’s sharing. However, if I wanted my below widget after Jetpack’s sharing, or some other widget that inserts after content, then I could adjust that value of 1 to something like 20, 30, 40, etc.

The default value is 10, which is what many other plugins use, so going higher than 10 should have this widget come later. However, you may have to keep testing to get it just right depending on what plugins you’re using.

Putting it All Together – tldr;

Here’s all the code you need. Place it inside your theme’s functions.php file.

add_action('widgets_init','my_widgets_init');

function my_widgets_init() {
	register_sidebar( array(
		'name' => __('Above Content'),
		'id' =>'my_above_content',
		'description' => __('Shows widgets above content.'),
		'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget' => '</div></section>',
		'before_title' => '<h4 class="widget-title">',
		'after_title' => '</h4>',
	));	
	register_sidebar( array(
		'name' => __('Below Content'),
		'id' => 'my_below_content',
		'description' => __('Shows widgets below content.'),
		'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget' => '</div></section>',
		'before_title' => '<h4 class="widget-title">',
		'after_title' => '</h4>',
	));
}

add_filter('the_content','my_above_content_widgets', 99);

function my_above_content_widgets($content = false) {
	global $post;

	if(is_active_sidebar('my_above_content') && ((is_singular() && is_main_query() && !is_feed()) || is_404())) {
		ob_start();
		$sidebar = dynamic_sidebar('my_above_content');
		$new_content = ob_get_clean();
		$content = $new_content . $content;
	}

	return $content;
}

add_filter('the_content','my_below_content_widgets', 1);

function my_below_content_widgets($content = false) {
	global $post;

	if(is_active_sidebar('my_below_content') && ((is_singular() && is_main_query() && !is_feed()) || is_404())) {
		ob_start();
		$sidebar = dynamic_sidebar('my_below_content');
		$new_content = ob_get_clean();
		$content .= $new_content;
	}

	return $content;
}

As a Plugin

This can also be easily turned into a plugin. The advantage there is you won’t have to add this to every theme you use.

To do that you will want to create a folder; let’s say we call it my-widgets. You need to create a PHP file with all the code in it, and info at the top that tells WordPress this is a plugin.

<?php

/*
	Plugin Name: Widgets Above & Below Content
	Plugin URI: http://blogplayground.com/
	Description: Adds sidebars above and below content for widgets.
	Author: Thor
	Version: 1.0.0
	Author URI: http://blogplayground.com/
*/

add_action('widgets_init','my_widgets_init');

function my_widgets_init() {
	register_sidebar( array(
		'name' => __('Above Content'),
		'id' =>'my_above_content',
		'description' => __('Shows widgets above content.'),
		'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget' => '</div></section>',
		'before_title' => '<h4 class="widget-title">',
		'after_title' => '</h4>',
	));	
	register_sidebar( array(
		'name' => __('Below Content'),
		'id' => 'my_below_content',
		'description' => __('Shows widgets below content.'),
		'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget' => '</div></section>',
		'before_title' => '<h4 class="widget-title">',
		'after_title' => '</h4>',
	));
}

add_filter('the_content','my_above_content_widgets', 99);

function my_above_content_widgets($content = false) {
	global $post;

	if(is_active_sidebar('my_above_content') && ((is_singular() && is_main_query() && !is_feed()) || is_404())) {
		ob_start();
		$sidebar = dynamic_sidebar('my_above_content');
		$new_content = ob_get_clean();
		$content = $new_content . $content;
	}

	return $content;
}

add_filter('the_content','my_below_content_widgets', 1);

function my_below_content_widgets($content = false) {
	global $post;

	if(is_active_sidebar('my_below_content') && ((is_singular() && is_main_query() && !is_feed()) || is_404())) {
		ob_start();
		$sidebar = dynamic_sidebar('my_below_content');
		$new_content = ob_get_clean();
		$content .= $new_content;
	}

	return $content;
}

?>

Now, save that code inside the my-widgets folder and name it my-widgets.php.

You have to get the plugin installed and there are two ways to do that.

    1. FTP into your web host and upload the my-widgets folder with the file to wp-content/plugins/
    1. Zip the folder with file, then go to Plugins->Add New->Upload Plugin.

If you do the first option, you’ll need to go to Plugins to activate it. If you do the second option, you will get the option to activate it once uploaded.

Please Rate this Article

Please take a second to rate this. It helps us deliver to you the stuff you enjoy.

How to Add Widgets Above and Below Posts & Pages in WordPress
5 (100%) 2 votes

Author: Thor

I started blogging in 2009 for my gaming blog Creative Twilight. I've been blogging ever since.

I later created Command Center, a tool for 40K. I've also set up, maintain, and run my wife's site ecoLifestyle for her business.

I'm also a PHP programmer for a local web hosting company where I develop WordPress plugins.

Leave a Reply!

Note: You can comment as a guest by clicking the field indicated Name and checking off “