How to Add and Customize a Top Bar in WordPress

What a WordPress top bar does

A top bar is a slim strip above your main header or navigation menu. Use it for details visitors need fast, such as store hours, a phone number, a sale notice, or social links. It should support your main menu, not compete with it.

Most WordPress themes include a header setting, a widget area, or both. Check your theme options before adding code. A built-in feature is easier to update and less likely to break when the theme changes.

If your theme has no top bar, you can add one with a child theme. This approach gives you control over its layout and content. Back up your site first, and try changes on a staging site when possible.

Add a top bar with a child theme

Start by creating a child theme if you do not already have one. A child theme keeps your edits when the main theme updates. Find its files in your host’s file manager or through SFTP. You can also use a code editor plugin, but file access is safer for larger edits.

Open the child theme’s functions.php file. Add two widget areas, one for each side of the bar. WordPress calls these areas sidebars, even when they appear in a header.

Use this sample in functions.php. Change the labels to fit your site.

function tw_register_top_bar_widgets() {
register_sidebar( array( 'name' => 'Top Bar Left', 'id' => 'top-bar-left', 'before_widget' => '<div class="top-bar-widget">', 'after_widget' => '</div>' ) );
register_sidebar( array( 'name' => 'Top Bar Right', 'id' => 'top-bar-right', 'before_widget' => '<div class="top-bar-widget">', 'after_widget' => '</div>' ) );
}
add_action( 'widgets_init', 'tw_register_top_bar_widgets' );

Next, add the bar markup where your theme builds its header. In many themes, that means editing the child theme’s header.php file. Place this block before the main header markup.

<div class="site-top-bar">
<div class="top-bar-inner">
<div class="top-bar-left"><?php dynamic_sidebar( 'top-bar-left' ); ?></div>
<div class="top-bar-right"><?php dynamic_sidebar( 'top-bar-right' ); ?></div>
</div>
</div>

Theme files differ, so check the header structure before placing the block. A misplaced wrapper can shift the logo or menu. WordPress explains how to register and show widget areas in its theme developer guide to sidebars.

Save your changes, then open the Widgets screen under Appearance. Add a Paragraph widget to the left area and enter a short message. Add a Custom HTML widget to the right area for a phone link or icon.

Keep a copy of the original files. If a PHP typo causes an error, restore the backup through your host’s file manager.

Fill the bar with useful content

Widgets let you change top bar content without editing theme files again. Use the left side for a short message and the right side for one or two useful links. For example, show “Free shipping over $50” beside a support phone link.

To add an icon, use a theme icon feature or an icon set already loaded by your theme. Avoid adding a large icon library for one small symbol. If the theme offers no icon tool, use a simple text symbol or a small, accessible SVG from a trusted source.

Keep link labels clear and short. A phone number should link with a tel: address, while a service link should name its destination. Test every link on a phone as well as a desktop.

Style the top bar to fit your site

Add CSS in Appearance, then Customize, then Additional CSS, if your theme offers that panel. You can also put the rules in your child theme’s style.css file. These styles set a dark bar, white text, and a centered inner row.

.site-top-bar { background: #222; color: #fff; font-size: 14px; }
.top-bar-inner { max-width: 1200px; margin: 0 auto; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-top-bar a { color: #fff; text-decoration: none; }
.site-top-bar a:hover { text-decoration: underline; }

Change the color values to match your theme. Keep contrast strong so links remain easy to read. The 1200-pixel width is only a starting point; match the width used by your site header.

If your theme already has a top bar, use its own settings first. To change a menu bar, edit the menu under Appearance, then Menus, or use the Site Editor in a block theme. A top bar is separate from that menu unless your theme combines them.

Make the top bar work on phones

A bar that fits on a wide screen may wrap or crowd a phone screen. Keep the message brief, limit the number of links, and let items wrap when needed. Test at narrow widths, including around 320 pixels.

Add a small-screen rule in your stylesheet. This stacks the two sides and centers the content when the screen is 600 pixels wide or less.

@media (max-width: 600px) {
.top-bar-inner { flex-direction: column; gap: 6px; text-align: center; }
.top-bar-left, .top-bar-right { width: 100%; }
}

Check that the bar does not cover the menu or take up too much screen space. If it contains a phone number, make sure it can wrap cleanly. Hide optional content on small screens only when visitors can still reach that information elsewhere.

Fix common top bar problems

If the widget areas do not appear, confirm that the registration code is in the active child theme’s functions.php file. Then check the Widgets screen again. A syntax error may stop the code from running, so review the quotes and brackets.

If the bar appears in the wrong place, move its markup within the child theme header. If styles seem to have no effect, clear any cache and check whether your theme uses more specific CSS rules. Add a parent selector only when needed.

If the top bar duplicates, look for a built-in theme bar and turn it off. After theme updates, test the header and widgets again. Keep your custom code in the child theme, not the parent theme, to reduce the risk of losing it.