Introduction

Header Customizer is a WordPress plugin developed by vmux which enables you to create your header by 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.

You may also want to look at my FREE plugin, the Lite version of the Header Customizer.

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:

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:

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:

If you need more font families, simply contact me here via email and I’ll add them ASAP! But remember, this plugin only supports Google Fonts for now.

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).

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

Margin top

Margin bottom

Margin left

Margin right

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

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

Here you can see some playing around inside General Settings (click on this image to see it fully enlarged):

Middle Header

Middle Header is section of Header Customizer which contains logo area (logo & description) and main menu (with submenus). You can customize following:

Header type – how are your logo and menus placed; by default logo goes on the left side, while main menu goes to the right side of the header; you can set them both centrally aligned, or move menu to the left next to the logo

Here you can see some playing around with backgrounds inside Middle Header (click on images to see them fully enlarged):

Here you can see some playing around border radius of the Middle Header so it looks rounded>

Top Header

Top Header is another important section of Header Customizer. It contains (same as bottom header) left and right side, which goes centrally aligned when responsive mode is turned on (when your screen size is small, i.e. size set in Responsive Header panel). You can choose for both sides to have either: some other menu, breadcrumbs, current page title or search box. Following are settings that you can modify:

Enabled? – is the Top Header enabled at all? (checkbox)

Left menu side type – choose between menu, breadcrumbs, current page title or search box for the left side of Top Header

Right menu side type – choose between menu, breadcrumbs, current page title or search box for the right side of Top Header

Background color – same here as for Middle Header

Background image – same here as for Middle Header

Background image repeat – same here as for Middle Header

Background image attachment – same here as for Middle Header

Background image position – same here as for Middle Header

Background image size – same here as for Middle Header

Google font family – choose font family only for this (top) header; you may contact me if you need more fonts added

Top left (and bottom left, top right, bottom right) radius – same here as for Middle Header

Bottom Header

Bottom Header is another important section of Header Customizer. It contains (same as bottom header) left and right side, which goes centrally aligned when responsive mode is turned on (when your screen size is small, i.e. size set in Responsive Header panel). You can choose for both sides to have either: some other menu, breadcrumbs, current page title or search box. Following are settings that you can modify:

Padding (top/bottom) – same here as for Middle Header (exists only if you’re currently not on front page)

Padding (top/bottom) on front page – this is same as above except it’s only when you’re on home page! When you’re on page other than home or front (depends on your WordPress settings) then this option won’t exist

Padding (left/right) – same here as for Middle Header

Text color – same here as for Top Header

Link color (and hover color) – same here as for Top Header

Margins for menu items (left/right) – if menu is selected to be on left or right side, this will be their left and right margins

Top left (and bottom left, top right, bottom right) radius – same here as for Middle Header

Logo Area

Logo area is part of your header which contains logo (as text or image link) and site description. Following are the settings you can modify:

Menu item top-left (and top-right, bottom-left, bottom-right) radius – each of these options have possibility to exclude all other items except first or last item, so the whole menu looks “rounded” (take a look at the gif example below!)

To setup main menu, first you need to set any menu you have saved before to be placed to “HC Main Menu” location. Take a look at the following example:

Here’s how you can modify link colors for example:

Main Submenus

Submenus appear on hover or click on main menu items. There are up to four levels of submenus to choose how deep submenus will go. Many more options are here, so let’s list them below:

Submenus depth – like stated previously, you can choose how many levels of submenus you’ve got

Show submenu on mouse hover? – whether to click or hover main menu items or submenu items in order to show submenus; responsive header will always react on tap (click)

Menu items border top (and bottom) color – border color of submenu links (except first one, or last one if it’s bottom color)

Menu items border top (and bottom) width – border width of submenu links (except first one, or last one if it’s bottom width)

Shadow – shadow set using CSS property box-shadow; it’s set in text field using full definition, e.g. 2px 2px 2px 2px rgba(85, 85, 85, 0.8) and when you make changes to any of the values you can see them live as you type

Note: To have search box you must select it as left or right side menu in Top or Bottom headers.

Responsive Header

Responsive header appears when your screen size (which you can also set) is small enough for your header so it transforms making it appealing for your phone or tablet. You can set following options:

Responsive Width – width which defines breaking point between desktop and responsive header; when you load your website on screen sizes below this point your header will look “minified”

Hamburger Color – “hamburger” icon appears instead of your main menu, which you can click on to show the menu on small screens but this time the menu items are ordered below each other

Sticky Header

And finally, the sticky header. As most of us are already familiar with this term, it means that your header “sticks” on top of your website even when you start scrolling down the content. Sticky header greatly
improves bounce rate of your visitors. You can turn it off and on by simply check/uncheck the checkbox. For now you are presented with following settings:

Is sticky header enabled? – as mentioned above, you can easily enable/disable sticky header with this checkbox

Offset – in pixels, this is the distance how long you scroll until the header sticks to the top; it can also be set to zero so your header becomes sticky immediately

Padding top/bottom for Top Header – paddings only for Top Header; this is very helpful so you can for example make header smaller in height when it becomes sticky (with nice transition effect)

Padding top/bottom for Middle Header – same as point above but for Middle Header

Padding top/bottom for Bottom Header – same as point above but for Bottom Header

Show Top Header? – you can hide (or not) Top Header completely when the header becomes sticky

Show Middle Header? – same as point above but for Middle Header

Show Bottom Header? – same as point above but for Bottom Header

Social Menu Icons

On any of your menus you can add social media icon. How many icons are there you can see on this page. First you need to enable CSS classes for your menu items. If you don’t have it enabled here are the steps:

In admin area go to Appearance -> Menus. There check CSS Classes under “Screen Options”:

This also can be done in Customizer on exactly the same location as you edit your Header Customizer, only in “Menus” section:

There is no difference how will you add these classes, what’s important is that you enable CSS Classes field first under Screen Options.

Here is how it all looks like in action:

Uninstalling

You can find uninstall (delete) option after you deactivate the plugin from the Plugins page.
Keep in mind that when you delete Header Customizer you will also delete all of its color, menu and any other settings. If you only deactivate the plugin, its settings will remain and will not need to be entered again if plugin is re-activated.

Support

For support requests please use my support page. If you like the plugin, please take the time to rate it. It means a lot to me.

Changelog

1.3.2 Add plain text option, like telephone number and such

1.3.1 Added social menu icons (take a look on how to add them); small fixes for submenus

1.2.0 More options for search box, like search icon, expand on click, etc.