Have you ever felt the need to create your own custom header element and position it at any place of your choice in the header section of a WordPress blog or website ? If your answer is yes then don’t go anywhere yet. your answer might be right here.
let’s go straight to it.
NB: MAKE SURE YOUR ARE CONVERSANT WITH EDITING YOUR WORDPRESS THEME FILES IF NOT YOU MIGHT BE LOOKING FOR A PLUGIN TO DO THIS MAGIC WE ARE ABOUT TO PERFORM.
1. Kindly open your theme function.php file and paste the code right below it and save.
Please make sure you find no errors whilst saving your file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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' ); |
The code above will automatically create a hook in WordPress to register a custom widget for you. to access this widget you can move to appearance menu on your left and click on Widgets ie. Appearance>>>Widgets.
In there you will see the newly created custom widget as the same name above. Custom Header Widget Area. Now add whatever you want to display in the custom header section of your site.
2. You will not be able to see the newly created header if you don’t complete the magic by implementing the below code in the the theme’s header.php ie. This could also be a custom header in your theme’s directory so please make sure you target the right section.
|
1 2 3 4 5 6 7 |
<?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; ?> |
after pasting exactly this code you can now save or update the file without error.
3. At this point be sure to have done the most important part of the work. Refresh you site or blog to see the changes being effected.
you need to play around with some CSS to make sure you place the element at the right place, the CSS snippet below might help you to go the right direction.
|
1 2 3 4 5 6 |
#header-widget-area { float:right !important; margin-top: 5px !important; margin-right: 200px; } |
I hope you have what you want. Enjoy yourself and happy coding…
Leave a comment