The space above your blog posts is a great place to add a blog menu, an email optin, a featured post, an ad or simply an image. This tutorial will show you how to add a widget area to above your posts on your blog page so you can place any widget you want to that section.
1. Register widget area
First, we need to register the widget area so that the section appears as an option under Appearance > Widgets.
To do this you will need to edit your functions.php file. You can access this file by either using Filezilla or going to Appearance > Theme Editor if your theme allows.
Add the following code to your theme’s functions.php file and save. Take care when editing this file, as a mistake may cause a WordPress error.
/**
* Register widget area above blog posts
* xomisse.com/blog/widget-area-above-blog
*/
function xome_widgets_init() {
register_sidebar( array(
'name' => 'Widget area above blog posts',
'id' => 'above-blog-widget',
'description' => esc_html__( 'A widget area above blog posts.'),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
) );
}
add_action( 'widgets_init', 'xome_widgets_init' );
This will register the new widget area on your theme. If you go to Appearance > Widgets, you will see a new widget area called “Widget area above blog posts”.
Now you can add any widget you would like to this space. Don’t forget to customise the text and save it. For this example, I’m going to add an email optin widget.
2. Add widget area to theme
If you visit your blog page now, you will not see the image. That is because we need to now tell WordPress where we want that widget displayed by adding it to our theme.
So now you need to find where you want to add it, for this tutorial we’re going to add it to our header.php. We’re going to tell WordPress to only display this if there is a widget within the widget area and if we’re on the blog page.
Open up your header.php file, scroll down to the bottom. Paste the following code and save the file.
<?php if ( is_active_sidebar( 'above-blog-widget' ) && is_home() ) : ?><div id="above-blog-widget-area" class="widget-area" role="complementary"><?php dynamic_sidebar( 'above-blog-widget' ); ?></div><?php endif; ?>Now when you visit your blog page, you should see the widget displayed.
But as you can see the text is off, there isn’t a lot of space and it isn’t looking very appealing. So let’s customise it by adding some CSS.
3. Customise the style
To edit your theme’s CSS, we can do one of the following options.
a) Open our style.css file under Appearance > Editor
b) Add custom CSS under Appearance > Custom CSS
c) Add custom CSS under Appearance > Customizer > Additional CSS
d) Or open our style.css in a Text Editor using FileZilla
Some of these may not be available to you, depending on your theme.
For this tutorial, lets add a background colour, some spacing within the background colour (padding), and some space outside of the background area between the widget and blog posts (margin). Lets also centre the text and make it match the pink button.
The following CSS will look after those things…
#above-blog-widget-area {
background-color: rgba(238, 101, 147, 0.21);
padding: 50px;
margin: 0 auto 30px;
text-align: center;
}
#above-blog-widget-area .widget-title {
color: rgb(238, 101, 147);
}Much better! You can see what it looks like below.
Go even further: Use this same technique and a little more CSS to add columned featured widgets to showcase your main topics!
Conclusion
So there you go, we’ve added a new widget area above our blog posts that will only show on the blog page and when the widget area is activated.
Experiment with this – add images, featured boxes, categories, email subscriptions and so on.