How to Add a Widget at the Top of Each Page or Post in WordPress

Suppose we would like to add some information to our website at the top of the page or post, above the main content. This may be for example advertising, links, appeals, whatever you want, all that is enough fantasy.
Functional blocks in WordPress are called widgets. Widgets are placed on sidebars. Widgets and sidebars can be managed and configured in the WordPress administration panel.
Administration panel – Appearance – Widgets

Let’s add a sidebar to your sidebars list, which will also appear in the WordPress admin panel among all sidebars and then we can drag some widget to its sidebar.
There are two options for how this can be done:

1. Install the plugin
2. Add code to the function.php file, and add some code to the page or post template in the place where we want to place our sidebar (and widget(s) on this sidebar)

1. Install the plugin

There are several plugins that can be used to insert a widget at the top of the page, or elsewhere on the page, most of them add widgets via shortcodes, like these plugins:

• Widgets on Pages
• Widget Shortcode

Let’s try them.

Install and activate both plugins. In the  Appearance – Widgets page we will see two new sidebars appear (one for each plug-in):

Put some widgets on both sidebars, and get shortcodes:

Add shortcode to some place of our page (at the top of the page for example) in page editor:

There is the result:

Great! But we have to insert shortcodes into each page separately (which can be convenient for certain goals) and you can’t add a widget for all pages or posts at once.

There is a plugin that adds a widget for all pages:

• Add Widget After Content

Great plugin by the way! But unfortunately, it adds the widget only after the content, which is not suitable for our task (we want the widget at the top of the page, before the content).

2. Adding a widget without using plugins

Suppose we want to add a widget with some information at the top of all blog posts on the site (between the title and the text of the article itself). Now look at the page:

To begin with, we initialize our sidebar, which we will then place on the right page or post, and on this sidebar, we will be able to place any widgets from the WordPress admin panel.

Let’s get started. We have to place this code in the theme function.php file:

function before_content_sidebar() {
    register_sidebar(
        array (
            'name' => __( 'Content Top', 'your-theme-domain' ),
            'id' => 'before_content-side-bar',
            'description' => __( 'Content Top Sidebar for Posts', 'your-theme-domain' ),
            'before_widget' => '<div class="content_top_sidebar">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'before_content_sidebar' );

Then. Add our sidebar to the right place on the page or post. For example, I added code to the single.php post template (for the page it must be page.php template file). To the very beginning of the post container:

And here is the code itself:

<?php
   if ( is_active_sidebar( 'before_content-side-bar' ) ) {
      dynamic_sidebar( 'before_content-side-bar' );
   }
?>

Add some more styles to our sidebar. Styles can be added in the theme style.css file, or through theme settings (if your theme supports). Or directly on the page itself (but this is not convenient, because you need to add CSS code to each page where the sidebar will be displayed)

.content_top_sidebar {
   text-align: center;
   padding: 5px 0;
}

Let the widgets that we add to the sidebar be in the center, and set padding from top and bottom (you may not need padding, depending on the theme and where you placed the sidebar).

Further. Go to the WordPress admin panel. Select the menu option – Widgets.

We see that our sidebar has appeared in the sidebar list – Content Top:

If the sidebar did not appear here, then either you didn’t add code to function.php or did it wrong (contact your programmer for help).

Then. Place the Custom HTML widget (for example) on our sidebar, which allows you to place any HTML code on the sidebar.

And paste the actual code itself, save:

Code:

<div>
	<img width="150px" alt="Some Alt" src="https://bytescout.com/wp-content/uploads/2018/07/A42_ProfessionalJavascript.jpg">
	<span>Some text here.</span>
</div>

That’s what we did! In my opinion very functional:

Thank you all for your attention!

   

About the Author

ByteScout Team of Writers ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.