How to Add a WordPress Widget to Your Website Header

Do you want to add a WordPress widget to your website’s header area? Widgets allow you to easily add content blocks into designated sections of your theme. In this article, we will show you how to easily add a WordPress widget to your site’s header.… Read More »

The post How to Add a WordPress Widget to Your Website Header appeared first on WPBeginner.

Do you want to add a WordPress widget to your website’s header area? Widgets allow you to easily add content blocks into designated sections of your theme. In this article, we will show you how to easily add a WordPress widget to your site’s header.

Add a WordPress widget to your site's header

Note: This is an intermediate level tutorial. You will need to add code to your WordPress theme files and write CSS.

Why and When You Need a Header Widget on Your Site?

Widgets allow you to easily add content blocks to a designated area in your WordPress theme. These designated areas are called sidebars or widget-ready areas.

A widget ready area in header or before content can be used to display ads, recent articles, or anything you want.

This particular area is called ‘Below the fold’ and all popular sites use it to show really important stuff.

The header section on the popular List25 website

Typically, WordPress themes add sidebars next to the content or in footer area. Not many WordPress themes add widget-ready areas above the content are or in the header.

That’s why in this article, we will cover how to add a widget area to your WordPress website’s header.

Step 1. Creating a Header Widget Area

First, we need to create a custom widget area. This step will allow you to see your custom widget area on Appearance » Widgets page in your WordPress dashboard.

You will need to add this code to your theme’s functions.php file.

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

This code registers a new sidebar or a widget ready area for your theme.

You can now go to Appearance » Widgets page, and you will see a new widget area labeled ‘Custom Header Widget Area’.

Custom header widget area

Go ahead, and add a text widget to this newly created widget area and save it. See our guide on how to add and use widgets in WordPress for detailed instructions on adding widgets.

Step 2: Display Your Custom Header Widget

If you visit your website now, you will not be able to see the text widget you just added to your newly created header widget.

That’s because we haven’t yet told WordPress where to display this widget area.

Let’s do that in this step.

You will need to edit the header.php file in your theme and add this code where you want to display your custom widget area.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
	
<?php endif; ?>

Don’t forget to save your changes.

You can now visit your website and you will see your header widget area.

Unstyled header widget

You will notice that it looks a bit unpolished. That’s where you will need CSS to make it look better.

Step 3: Style Your Header Widget Area Using CSS

Depending on your theme, you will need to add CSS to control how the header widget area and each widget inside it is displayed.

The easier way to do this is by using CSS Hero plugin. It allows you to use an intuitive user interface to change CSS of any WordPress theme. For more details see our CSS Hero review.

If you don’t want to use a plugin, then you can add custom css to your theme by visiting Appearance » Customize page.

This will launch the WordPress theme customizer interface. You will need to click on the ‘Additional CSS’ tab.

Adding custom CSS to a WordPress theme

The additional CSS tab in theme customizer allows you to add your custom CSS while watching the changes appear in the live preview.

For the sake of this tutorial, we are assuming that you will be only using this area to add a single widget to display banner ads, or a custom menu widget.

Here is some sample CSS to help you get started.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}	
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

This is how our custom header widget area looked on the default Twenty Seventeen theme.

Preview of header widget

You may need to adjust the CSS to match your theme. Take a look at our guide on how to add custom styles to WordPress widgets.

We hope this article helped you learn how to add a WordPress widget to your site’s header. You may also want to see our list of 25 most useful WordPress widgets for your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a WordPress Widget to Your Website Header appeared first on WPBeginner.

How to Add and Use Widgets in WordPress

Beginner users often ask us what are widgets and how to use widgets in WordPress. Widgets allow you to add different functionality and features to your WordPress sidebars without writing any code. In this article, we will show you how to add and use Widgets… Read More »

The post How to Add and Use Widgets in WordPress appeared first on WPBeginner.

Beginner users often ask us what are widgets and how to use widgets in WordPress. Widgets allow you to add different functionality and features to your WordPress sidebars without writing any code. In this article, we will show you how to add and use Widgets in WordPress along with sharing Widget examples.

How to Add and Use Widgets in WordPress

What are Widgets? Why You Need to Use Widgets in WordPress?

Widgets are tiny blocks of specific functionality that you can place in your WordPress sidebars (also known as widget-ready-areas). For beginners, this is an easy way to add things like galleries, quotes, popular posts, facebook like boxes, and other dynamic items on their WordPress site.

Widgets can be found on Appearance » Widgets page in your WordPress admin area.

Widgets screen on a WordPress site

You will see the widgets that you can add under the list of available widgets.

On your right hand, you will find the designated areas on your WordPress site where you can place these widgets. These designated areas are defined by your WordPress theme. They are called sidebars or widget-ready areas.

If you don’t see a specific widget you’re looking for, then it can likely be added with a plugin (more on this later).

Adding Widget to a Sidebar in WordPress

There are multiple ways to add widgets to sidebars available in your WordPress theme. The easiest one is to simply drag and drop them to your sidebar.

Animation showing how to drag and drop a Widget to a sidebar in WordPress

You can also click on a widget title from the list of available widget. WordPress will show you the list of sidebars where you can add this widget.

Simply select the sidebar where you want to add the widget, and then click on Add widget button to add it.

Add widget button

There is also an accessibility mode for users who need it. To enable accessibility mode, you need to click on the Screen Options button at the top right corner of the screen.

Turn on accessibility mode for widgets in WordPress

It will display a fly down menu with a link to enable accessibility mode for widgets screen. Clicking on it will change the user interface of the widgets screen.

Each available widget will now have a simple ‘Add’ button. clicking on the button will take you to an accessible screen where you can easily select the sidebar.

Accessible widgets in WordPress

For detailed instructions see our guide on how to add WordPress widgets in accessibility mode.

The widgets page is not the only way to add widgets to your WordPress site. You can also add widgets using the live preview by visiting Appearance » Customize.

Animation adding a widget with customizer in WordPress

It’s important to note that not all of your widget-ready areas and sidebars will appear in the customizer. This is why we recommend using the Appearance » Widgets screen to add widgets in WordPress.

How to Remove a Widget in WordPress?

Removing a widget in WordPress is just as simple as adding them. Visit the Appearance » Widgets page.

Look for the widget that you want to remove in your sidebars and click on the widget title to expand it.

Removing a widget by deleting it from your WordPress sidebar

Below the widget settings, you will find the link to delete the widget. Deleting a widget will remove it from your sidebar and will also delete widget settings like title or any options that you selected.

Some widgets are too simple and don’t have many options in their settings while others have many options and settings. If you would like to remove a widget without losing the settings, then you need to drag and drop it to the inactive widgets section.

Removing a widget without deleting its settings

Deleting or sending a widget to inactive widgets does not remove it from the list of available widgets. You can always add a widget again from the list of available widgets or inactive widgets.

What Kind of Widgets are Available for WordPress?

A default WordPress installation comes with some built-in widgets like recent posts, recent comments, archives, search, etc.

Many WordPress themes and plugins come with their own plugins.

For example, Envira Gallery plugin allows you to create beautiful image galleries in your WordPress posts and pages. But it also comes with an Envira Gallery widget, which you can add to a sidebar to display image galleries in WordPress.

Envira gallery widget

Similarly, countless other themes and plugins add widgets, so their users can add things to their WordPress sidebars without writing any code or html.

There are hundreds of WordPress plugins that just add widgets for you to use in your sidebar. See our list of the 25 most useful WordPress widgets for your site.

What Else You Can do With WordPress Widgets?

Widgets are an incredibly powerful and flexible tool in WordPress. WordPress developers have been using them in many innovative ways.

As a WordPress site owner, you can take advantage of that to add almost anything imaginable to your WordPress site. Get started with our 12 WordPress sidebar tricks to get maximum results.

If you are comfortable with code, then you may want to learn how to create a custom WordPress widget of your own.

That’s all, we hope this article helped you learn how to add and use widgets in WordPress. You may also want to see our guide on how to display different sidebar for each post and page in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add and Use Widgets in WordPress appeared first on WPBeginner.

How to Display WordPress Widgets in Columns

Are you looking to display your WordPress widgets in columns? What if we told you there is an easy way to do this without any code knowledge. In this article, we will show you how to display WordPress widgets in columns without writing any HTML… Read More »

To leave a comment please visit How to Display WordPress Widgets in Columns on WPBeginner.

Are you looking to display your WordPress widgets in columns? What if we told you there is an easy way to do this without any code knowledge. In this article, we will show you how to display WordPress widgets in columns without writing any HTML or CSS.

Preview of WordPress widgets aligned horizontally in columns

First thing you need to do is install and activate the Widgets in Columns plugin. Upon activation, simply go to Appearance » Widgets.

Next, drag and drop a widget that you want to display in column. In the widget settings, you will notice a new drop down menu labeled width.

Here you need to select your desired width for the widget.

Select the width for your widget column

You can choose the width depending on how many widget columns you want in a row.

For example: if you want three columns, then you would choose one-third (1/3). You can also upload an icon for your widget.

Once you have added the first row of your widget columns, you can drag and drop a divider widget from available widgets.

This divider widget allows you to start a new row of widgets within the same widget area.

This plugin comes with three types of dividers: .divider, .break, and .clear.

After you are done adding your widgets, you can preview your site to see your widgets in columns.

That’s all. We hope this article helped you display WordPress widgets in columns inside a widget area.

You may also want to check out how to add custom styles to WordPress widgets.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Display WordPress Widgets in Columns on WPBeginner.