Enhance Your WordPress Theme: Custom Headers Tips

Add Custom Header Support to your WordPress Themes

To enable Custom Headers in your wordpress themes, add the following to your functions.php file:

add_theme_support( 'custom-header' );

When enabling Custom Headers, you can configure several other options by passing along arguments to the add_theme_support() function.

You can pass specific configuration options to the add_theme_support function using an array:

$defaults = array( 'default-image' => '', 'random-default' => false, 'width' => 0, 'height' => 0, 'flex-height' => false, 'flex-width' => false, 'default-text-color' => '', 'header-text' => true, 'uploads' => true, 'wp-head-callback' => '', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-header', $defaults );

In the above case, the default array values are assigned to a variable called $defaults.

Set a custom header image

When the user first installs your theme, you can include a default header that will be selected before they choose their own header. This allows users to set up your theme more quickly and use your default image until they’re ready to upload their own.

Set a default header image 980px width and 60px height:

$args = array( 'width' => 980, 'height' => 60, 'default-image' => get_template_directory_uri() . '/images/header.jpg', ); add_theme_support( 'custom-header', $args );

Use flexible headers

By default, the user will have to crop any images they upload to fit in the width and height you specify. However, you can let users upload images of any height and width by specifying ‘flex-width’ and ‘flex-height’ as true. This will let the user skip the cropping step when they upload a new photo.

Set flexible headers:

$args = array( 'flex-width' => true, 'width' => 980, 'flex-height' => true, 'height' => 200, 'default-image' => get_template_directory_uri() . '/images/header.jpg', ); add_theme_support( 'custom-header', $args );

update your header.php file to:

<img alt="" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" />

Header text

By default, the user will have the option of whether or not to display header text over the image. There is no option to force the header text on the user, but if you want to remove the header text completely, you can set ‘header-text’ to ‘false’ in the arguments. This will remove the header text and the option to toggle it.

Adding A “Sticky” Header To Your WordPress Themes

Adding the feature to your own WordPress Themes is relatively easy thanks to the myStickymenu plugin. However, the plugin is preset for Twenty Thirteen and just for the menu, not the whole header, so if you are using any other theme then you’ll need to make some refinements.

myStickymenu is based on javascript which will add .myfixed css class to any predefined element class after scroll by default. For example with default .navbar class:

 <div id="navbar" class="navbar"></div>

will become

 <div id="navbar" class="navbar myfixed"></div>

after scroll.

This way we can have custom css style for sticky (.myfixed) class, and we are using only existing elements from the page

.myfixed css class can be modified through admin settings under “.myfixed css class”.These are defaults:

.myfixed { margin: 0 auto!important; float:none!important; border:0px!important; background:none!important; max-width: 100%!important; }

Since version 1.6 myStickymenu plugin wraps the target element in its own custom HTML (see code below) to fix some bugs on different templates.

First div (#mysticky-wrap) is used to copy the original element height, and stay in place so page don’t jump when scroll has taken place. This happens because mystickymenu is using original element from the page (which is no longer in place cause now is fixed on top of page).

Second div (#mysticky-wrap) is used to add a .wrapfixed class on scroll event and by default it has 100% width. This div is also a container for a menu and it keeps menu centered. Since this element is full-width, it’s perfect for attaching the shadow effect using some custom css. Background of .wrapfixed element is defined in “Sticky Background Color” setting field, simply leave it blank if you don’t won’t full width menu.

At the end we have a chosen element, in this case #navbar as a third div. This is your original element div, after scroll plugin will add .myfixed class and copy the original element width.

Before Scroll

 <div id="mysticky-wrap" style=""> <div id="mysticky-nav" class=""> <div id="navbar" class="navbar" style=""></div> </div> </div>

After Scroll

 <div id="mysticky-wrap" style="height: 45px;"> <div id="mysticky-nav" class="wrapfixed"> <div id="navbar" class="navbar myfixed" style="width: 1600px;"></div> </div> </div>

So now we can define some custom css style using “.myfixed css class” field to achieve desired style while sticky (on scroll).

For example:

.myfixed { margin: 0 auto!important; max-width: 100%!important; height:100%important; background-color:#ccc!important; } .myfixed li a { color:#fff; } .myfixed .sub-menu li a { color:#fff; background-color:#234266; } .myfixed .sub-menu li a:hover { color:#000; background-color:#ddd; } .myfixed li li a:hover { color:#ccc; background-color: #000 ; } .myfixed li:hover > a, .myfixed li a:hover { color: #234266; background-color: #ccc; } .myfixed .current_page_item > a, .myfixed .current_page_ancestor > a, .myfixed .current-menu-item > a, .myfixed .current-menu-ancestor > a { color: #fff !important; font-style: normal !important; background-color: #C00!important; } .myfixed .menu-toggle:hover { /*this changes the mini menu hover feature*/ background-color: #234266 !important;

If you want to hide sub menu items while menu is sticky:

.myfixed .sub-menu {display:none;}

To add shadow to sticky menu you can add smth like this in plugin settings to “.myfixed css class” field. just add it after .myfixed class (this will work on all themes)

.wrapfixed { -webkit-box-shadow: 0 2px 2px 0px rgba(66,66,66,0.3); -moz-box-shadow: 0 2px 2px 0px rgba(66,66,66,0.3); box-shadow: 0 2px 2px 0px rgba(66, 66, 66, 0.3); }

NOTE:This examples works with Twenty Thirteen theme, for other themes you will need to enter your element classes if different.

Backwards Compatibility

Custom Headers are supported in WordPress 3.4 and above. If you’d like your theme to support WordPress installations that are older than 3.4, you can use the following code instead of add_theme_support( ‘custom-header’);

global $wp_version; if ( version_compare( $wp_version, '3.4', '>=' ) ) : add_theme_support( 'custom-header' ); else : add_custom_image_header( $wp_head_callback, $admin_head_callback ); endif;