WordPress Header Customizer

WordPress Header Customizer

SHARE

WordPress Header Customizer

WordPress Header Customizer is a WordPress plugin enables you to modify your header while live previewing it at the same time. Only after you are happy with your settings, you can save and publish it safely. This Documentation is intended to help you configure and get the most of your Header Customizer.

Header Customizer is a premium WordPress plugin which can replace your WordPress header entirely, is responsive and also has a sticky feature. It enables you to have up to four layers of navigation in your header.

It’s purpose is to make your website more useful, user friendly and to improve the general look and feel, even on phones and tablets.

You can modify your header visually using WordPress Customizer API, which enables you to make changes to the header while looking at your website at the same time.

Installing Header Customizer

This plugin requires minimum WordPress version 3.4.

You can install Header Customizer via FTP (or copy it by any other techniques) in the following manner:

  1. Download the plugin from and extract the contents
  2. Copy the awesome-header folder to the /wp-content/plugins/ directory
  3. Activate the plugin through the Plugins page in WordPress dashboard
  4. Put following code inside your content:
    <?php echo apply_filters('hc_print_header', ''); ?>
  • Most of the time it would be in your header.php file, right after opening <body> tag

Next, using WordPress Customization you can start customizing. Simply inside admin area go to Appearance -> Customize. There choose Header Customizer pane to use this plugin’s features. I prepared you nice gif so you don’t feel confused:

intro

Insert Header Into Your Theme

Simply insert following code right below <body> tag:

<?php echo apply_filters('hc_print_header', ''); ?>

And that is it. You’ll be able to see changes while modifying your header through Header Customizer

How can I change fonts?

You can change fonts for the whole header, or specific parts of the header, i.e. for logo, site description, menus, breadcrumbs, search field, page title. Take a look at this presentation below for logo font family how easy it is:

change fonts

General Settings

Header Customizer can replace your theme’s header and it can appear once a user scrolls down and your theme’s header disappears from sight (sticky option).

This panel contains following settings:

  1. Header width – width of the header content
  2. Stretch header width? – should header wrapper stretch the whole width of a browser?
  3. Header left position – if your header is sticky, you should use this option if you don’t want header to be horizontally on the center
  4. Margin top
  5. Margin bottom
  6. Margin left
  7. Margin right
  8. Google Font – choose font for the header; there are more specific options for fonts (e.g. only for logo area) but this is for the whole header at once
  9. Custom CSS – you can type any CSS here; make sure to start your CSS definitions with ”.hc-wrap {” so you don’t mess with other website’s CSS definitions