How to add "widget area" into "Custom Field" above the Menú

Hi,
I have created a widget area (I have named it "loginheader"). Into this widget area I have introduced the widget "login" of buddypress. I`d like show the login in all of my pages of my web, above the MENÚ. I want it will be the first element showed in the web.
So I think I need to create a "custom field" above my Menú, and add into this new "Custom Field" my new widget area "loginheader".
How can I do that? It is a feature that is depending of my theme? Or I can do that independing of the theme I use?
I have a child theme with a function php. So I think I need add some code into "function.php".
Can you provide the code?
Thanks for your support.

  • Dimitris

    Hey there Francesc Prada,

    hope you're doing good and thanks for reaching us!

    Here you can find a basic tutorial on how to add a custom sidebar (widget area).
    http://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/

    In order to display this, you should insert the following snippet in the appropriate template file.

    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    	<div id="secondary" class="widget-area" role="complementary">
    	<?php dynamic_sidebar( 'sidebar-1' ); ?>
    	</div>
    <?php endif; ?>

    where "sidebar-1" is the ID of the sidebar in the example of the link I provided.

    If you want this to be above the main menu area, then most probably you have to:
    1. Copy header.php file from parent theme to child theme folder
    2. Edit this file, locate the main menu code by searching for a wp_nav_menu() function
    3. Use previous snippet (with the appropriate ID) just above your menu
    4. Further style it with some additional CSS

    On the other hand, this may be possible with a custom menu instead of a sidebar, so you may use some URLs or pages instead of widgets. For a workaround like that, please have a quick read on Jenni's article here https://premium.wpmudev.org/blog/add-menus-to-wordpress/

    Warm regards,
    Dimitris

  • Francesc Prada

    hi Dimitris
    thanks for your reply.
    Following I add header.php
    I dont find wp_nav_menu() function, I am not informatic and I dont know what is it...
    I also must change 'sidebar-1' with the appropriate ID. If I understand well, ID is the name of the "WIDGET AREA". In my case (just how say in my post) my ID is "loginheader". It is so?
    If it is so, the correct snippet is the following:

    <?php if ( is_active_sidebar( 'loginheader' ) ) : ?>
    	<div id="secondary" class="widget-area" role="complementary">
    	<?php dynamic_sidebar( 'loginheader' ); ?>
    	</div>
    <?php endif; ?>

    Ok, if all is correct, can you add your the this snippet in the correct position into the function I provide you following? With that I can will have the complete code and we can avoid errors.
    Thanks :sweat_smile:

    However, I am not sure if the solution you provide me is the best solution. Why do I say that? I explain following:
    If I copy and past all the code from header.php to function.php in my child theme, everytime I update my theme I need to copy the new update code from header.php (maybe it was update... I dont know...) to function.php in my child theme.
    But I have created child theme just for dont lost changes when I update theme. Do you understand what I say?
    So, I think the solution is add only your snippet in function.php, and add to it same other code just for to indicate that this snippet must be introduce in above the function you say, without copy al the code of header.php in function.php
    Do you understand what I say?
    Please, let me know if it is possible.
    Thanks very very much for your support

    <?php
    	if ( !defined('ABSPATH') ){ die(); }
    
    	global $avia_config;
    
    	$style 				= $avia_config['box_class'];
    	$responsive			= avia_get_option('responsive_active') != "disabled" ? "responsive" : "fixed_layout";
    	$blank 				= isset($avia_config['template']) ? $avia_config['template'] : "";
    	$av_lightbox		= avia_get_option('lightbox_active') != "disabled" ? 'av-default-lightbox' : 'av-custom-lightbox';
    	$preloader			= avia_get_option('preloader') == "preloader" ? 'av-preloader-active av-preloader-enabled' : 'av-preloader-disabled';
    	$sidebar_styling 	= avia_get_option('sidebar_styling');
    	$filterable_classes = avia_header_class_filter( avia_header_class_string() );
    
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?> class="<?php echo "html_{$style} ".$responsive." ".$preloader." ".$av_lightbox." ".$filterable_classes ?> ">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <?php
    /*
     * outputs a rel=follow or nofollow tag to circumvent google duplicate content for archives
     * located in framework/php/function-set-avia-frontend.php
     */
     if (function_exists('avia_set_follow')) { echo avia_set_follow(); }
    
    ?>
    
    <!-- mobile setting -->
    <?php
    
    if( strpos($responsive, 'responsive') !== false ) echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
    ?>
    
    <!-- Scripts/CSS and wp_head hook -->
    <?php
    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    
    wp_head();
    
    ?>
    
    </head>
    
    <body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank." ".$sidebar_styling); avia_markup_helper(array('context' => 'body')); ?>>
    
    	<?php 
    
    	if("av-preloader-active av-preloader-enabled" === $preloader)
    	{
    		echo avia_preload_screen();
    	}
    
    	?>
    
    	<div id='wrap_all'>
    
    	<?php
    	if(!$blank) //blank templates dont display header nor footer
    	{
    		 //fetch the template file that holds the main menu, located in includes/helper-menu-main.php
             get_template_part( 'includes/helper', 'main-menu' );
    
    	} ?>
    
    	<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>
    
    	<?php 
    
    		if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
    		do_action('ava_after_main_container'); 
    
    	?>
  • Adam Czajczyk

    Hey there Francesc Prada!

    The code that Dimitris provided cannot be put into the functions.php file. It is for showing a "widget area" and has to be put into the template file. Since you want this to be displayed in header of your site, the "header.php" file would be the one that you need.

    I understand your concerns about updates but that's how it works in WordPress: either you would manually update the header.php file of your child-theme after updating the parent theme or you would leave it intact in order to preserve the way your child theme works/looks.

    There may be another solution as in the code that you provided I see some action hooks but I'm not able to tell that for sure until I check the theme first. The theme that I think you are using seems to be a premium theme and I don't have access to it so could you please provide me with an access to your site? First, make sure please that there's an "Appearance -> Edit" option available in your site's dashboard (as this would let me review theme code) and if so, please grant me a support access to your site as described here:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    I would then check the site and see if that could be done other way.

    Best regards,
    Adam

  • Francesc Prada

    Hi Adam Czajczyk and Dimitris
    you are very kindly with your fast replies.
    I can give you acces to my site, but I think it is more simple to contact to my theme support for solve it.
    But the problem is that, maybe I will change my theme in the next month (I am not sure to continue with this theme...), so I look for a UNIVERSARL solution independing of the theme. Maybe it is not possible... but my first objective is look for universal solution.
    So is not important work very hard around my theme for solve this problem because I am not sure if I continue with this theme...
    So I think that there are two independants best ways for solve fast my problem:

    1)can you tell me where I must introduce the code provide from Dimitris into the header.php?
    Dimitris told me I need to do the following:

    2. Edit this file, locate the main menu code by searching for a wp_nav_menu() function
    3. Use previous snippet (with the appropriate ID) just above your menuI cant find

    I posted my header.php function previously. Can you return me the correct and complete header.php I must copy into my child theme?

    2) I am thinking in a universal solution. Dimitris give me a solution I need introduce into the header of my theme, so this solution depend of the theme... I have thought about that and I am thinking if there is a solution for add a CUSTOM FIELD just under the admin bar (and not above the header of the theme...). If I can insert a CUSTOM FIELD under the admin bar, the solution will be related to wordpress and it will not related to the theme. Do you understand me what I mean?

    Maybe the solution 2 is not possible... but considering that I dont know if I will change my theme, I ask you if you can reply both the question number 1 and the question number 2, so I can have 2 solution independing what I decide to do with my theme.

    I hope your answer about the 2 questions.
    Please, let me know.
    Thanks for your support.

  • Dimitris

    Hello Francesc Prada,

    1) For making this change theme-specific, duplicate header.php file from your parent theme folder to your child theme folder so you can have something like
    /wp-content/themes/YOUR_CHILD_THEME_NAME/header.php.
    In there, locate the 'wrap_all' ID and use your snippet right after that, like:

    ...
    <div id='wrap_all'>
    
    <?php if ( is_active_sidebar( 'loginheader' ) ) : ?>
    	<div id="secondary" class="widget-area" role="complementary">
    	   <?php dynamic_sidebar( 'loginheader' ); ?>
    	</div>
    <?php endif; ?>
    ...

    2) Another approach would be via a MU plugin. Simply copy next snippet in a .php file and save it in your server like /wp-content/mu-plugins/loginheader.php. If /mu-plugins folder doesn't exist, simply create it.

    <?php
    function loginheader() {
      if ( is_active_sidebar( 'loginheader' ) ) : ?>
        <div id="secondary" class="widget-area" role="complementary">
    	     <?php dynamic_sidebar( 'loginheader' ); ?>
    	  </div>
    <?php endif;
    }
    add_action( 'wp_head', 'loginheader', 1 );

    This will display your custom sidebar right after the opening <body> tag.

    Take care,
    Dimitris :slight_smile:

  • Francesc Prada

    Hi Dimitris
    Thanks very much for your support. I have tested solution number 2 (because I like a independent solution from theme) and it runs very vell. Good work :grinning:
    Following, I add the picture, so you can see how is showed the widget:
    http://subefotos.com/ver/?c160e74dfd45fa90c1f2727157767e5do.jpg

    Now I only have a few simple questions:

    1) The widget area "loginheader" is showed in 100% the width of the screen. Can I reduce horizontal width for example to 80%? And can I reduce vertical height to 60%

    2) username and password fields are WHITE, while background is BLACK. What I need to do for to have: username and password fields GRAY, and background WHITE?

    Thanks for your support

  • Francesc Prada

    hi Dimitris
    in addition to the other 2 previously question

    1) The widget area "loginheader" is showed in 100% the width of the screen. Can I reduce horizontal width for example to 80%? And can I reduce vertical height to 60%
    
    2) username and password fields are WHITE, while background is BLACK. What I need to do for to have: username and password fields GRAY, and background WHITE?

    I`d like know how dont show the following:
    3) How dont show the button "login" and "Register" located in admin bar?
    4) At this time it is GRAY and the text into it (login) is BLACK. How change the color of them? For example the BUTTON in BLACK color and the TEXT "login" in a WHITE color.
    Thanks very much for your support

  • Dimitris

    Hey there Francesc Prada,

    hope you're doing good and please excuse our late response here, it's been a bit busy in our forums lately.

    To further assist you though, and provide the appropriate CSS rules, we should see this new region in action. Could you please provide the URL to check this? Or are you developing this locally?

    If this is a live URL indeed, but you don't want to share it's domain name publicly, you can grant us with support access to your website. This can be done easily (one-click) via our "WPMUDEV Dashboard" plugin. For more details please check our manual page here https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/.

    Kind regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.