Problem with adding 2 widgets to header area

  • Resolved ketokookin

    (@ketok132)


    7 years, 2 months ago

    Hi, I have the following problem:
    I want to replace the header image/video area with 2 widget areas by using a child theme. These areas should be site by site, like standard footer1 and footer2.

    I managed to add 1 header widget area and removing the space caused by the header image/video area by playing around with the styling in the child theme’s live preview.

    However, if I add the second header widget area, live preview stops working and I don’t want to activate the child theme until I know that everything works like it should.

    This is my child theme’s functions.php code (with the not working area commented out):

     <?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// creating header widget area 
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget 1',
'id' => 'header-widget',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

/*
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget 2',
'id' => 'header-widget2',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );
*/
?>

    This is the child theme’s header.php:

    <?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.www.ads-software.com/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

	<header id="masthead" class="site-header" role="banner">

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

		<?php if ( has_nav_menu( 'top' ) ) : ?>
			<div class="navigation-top">
				<div class="wrap">
					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
				</div><!-- .wrap -->
			</div><!-- .navigation-top -->
		<?php endif; ?>

<?php //displaying custom header widget1

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

<?php //displaying custom header widget2

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

	</header><!-- #masthead -->

	<?php

	/*
	 * If a regular post or page, and not the front page, show the featured image.
	 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
	 */
	if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
		echo '<div class="single-featured-image-header">';
		echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

	<div class="site-content-contain">
		<div id="content" class="site-content">
Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter ketokookin

    (@ketok132)

    I spotted the mistake in my functions.php and the live preview works again.
    This is the working code:

    
// creating header widget area 
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget 1',
'id' => 'header-widget',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );

//header widget 2
register_sidebar( array(
'name' => 'Header Widget 2',
'id' => 'header-widget2',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

?>

    Now, the only problem left is that the header widget 2 area is shown beneath header widget 1 area.
    How do I achieve to show them side by side?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    As you’re facing a CSS problem would you be able to show us the page with the widgets?

    Thread Starter ketokookin

    (@ketok132)

    Thanks for the fast reply.
    I uploaded a screenshot of the live preview here: Preview

    The top widget (archives) is in header-widget-area, the other one in header-widget-area2.

    div#header-widget-area {
	width: 40%;
	height: 100%;
	background-color: #f7f7f7;
	/*border-bottom: 1px solid #eeeeee;*/
	text-align: center;
}   

h2.hw-title {
	display:none
}
div#header-widget-area2 {
	width: 40%;
	height: 100%;
	background-color: #f7f7f7;
	/*border-bottom: 1px solid #eeeeee;*/
	text-align: center;

	margin-bottom: 10vh;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thanks for taking the effort to provide code and to take a screenshot, but unfortunately screenshots are little help for CSS problems. Would you be able to emulate your webpage using cssdesk.com ?

    Thread Starter ketokookin

    (@ketok132)

    I’ve tried it over and over again with 3 different browsers. Unfortunately, the share button doesn’t work with any of them on cssdesk.com
    I used liveweave to recreate the site Link
    This is the best I could do, yet. I hope that helps in solving my problem.

    Edit:
    Alright, I got it now with cssdesk. I needed to click on share before changing the default “hello world” code, then, change the code and click save. CSSDesk link
    It is the same code I inserted in liveweave

    • This reply was modified 7 years, 2 months ago by ketokookin.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thank you. Does this do what you want:

    
@media screen and (min-width: 480px) {
    .hw-widget {
        float: left;
    }
}
    Thread Starter ketokookin

    (@ketok132)

    Applied suggestion screenshot

    Wow!! Thank you so much for the great help!
    It worked like a charm.

    In addition to your suggestion, I just needed to add margin on the left side for this to work, so the custom css is

    div#header-widget-area {
	width: 40%;
	height: 100%;
	background-color: #f7f7f7;
	/*border-bottom: 1px solid #eeeeee;*/
	text-align: center;
	margin-left: 5%
}   

h2.hw-title {
	display:none
}
div#header-widget-area2 {
	width: 40%;
	height: 100%;
	background-color: #f7f7f7;
	/*border-bottom: 1px solid #eeeeee;*/
	text-align: center;

	margin-bottom: 10vh;
}   

@media screen and (min-width: 480px) {
    .hw-widget {
        float: left;
    }
}

    If I leave out the “@media screen[…]” part it works, too.
    .hw-widget {float:left;}
    Does it make any difference?

    • This reply was modified 7 years, 2 months ago by ketokookin.
    • This reply was modified 7 years, 2 months ago by ketokookin.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does it make any difference?

    Maybe not. It just means “only apply it on devices that are wider than 480px”, because generally you don’t want to cram things onto 2 columns for mobile devices. However looks like it made no effect anyway, so you can remove it ??

    Thread Starter ketokookin

    (@ketok132)

    You have really been of awesome help to me! ??
    I just have one more question.
    Do “div#header-widget-area” and “.hw-widget” refer to the same element in this case?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes, if you look at the HTML of those elements you’ll see they share the same class. I recommend using a browser developer toolbar like the one that’s built into Chrome to help you with this. Right click on the widget and press “Inspect element” to see the HTML on a left panel and CSS on the right panel of the developer toolbar.

    Thread Starter ketokookin

    (@ketok132)

    Thanks again!
    You didn’t just solve my problem, but helped me to understand a lot of things.
    You are amazing ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Problem with adding 2 widgets to header area’ is closed to new replies.