Inserting a new widget area in TwentySixteen

  • Resolved madamecholet

    (@madamecholet)


    8 years, 10 months ago

    I have managed to successfully create a new widget area (yeay!) but I can’t get it to display (:(). I understand that you have to tell the appropriate theme template to show the active widgets. However I don’t seem to be doing this bit properly. Any help greatly appreciated :).
    The widget area I have created I’ve called side-bar ‘page-content-top’ to put it on all pages above the main content. I have tried putting various things into the page.php template but it always causes and error.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator t-p

    (@t-p)

    https://codex.www.ads-software.com/Widgetizing_Themes

    You can use this approach to widgetize any template.

    Thread Starter madamecholet

    (@madamecholet)

    Great,thanks for that link.
    I still can’t find the best place to put it in the page template,but I’ll keep trying. Got to improve my skills ??

    Thread Starter madamecholet

    (@madamecholet)

    So when I copy the steps in the link exactly and put the code onto the sidebar.php page I can create a new widget area. However what I would really like to do is put the new widget area at the top of the page – above the header image.
    I have tried inserting the code into the header.php just after the code
    <body <?php body_class(); ?>> which I thought might be the right place to put it.
    However instead of showing a widget area the black border at the top of the page has just doubled in height.
    Any ideas as to what I’m doing wrong?
    Any advice welcome!!

    However instead of showing a widget area the black border at the top of the page has just doubled in height.

    you possibly are getting black writing on a black background.

    try inserting the code after this line:

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

    please post the exact full code of header.php including your chnages.

    Thread Starter madamecholet

    (@madamecholet)

    Thank you Michael, that worked perfectly.
    Here is the exact full code of header.php including my changes.

    <?php
    /**
    * The template for displaying the header
    *
    * Displays all of the head element and everything up until the “site-content” div.
    *
    * @package WordPress
    * @subpackage Twenty_Sixteen
    * @since Twenty Sixteen 1.0
    */

    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?> class=”no-js”>
    <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″&gt;
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
    <?php endif; ?>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>

    <div id=”page” class=”site”>
    <div class=”site-inner”>
    <?php _e( ‘Skip to content’, ‘twentysixteen’ ); ?>

    <header id=”masthead” class=”site-header” role=”banner”>
    <?php if ( is_active_sidebar( ‘home_right_1’ ) ) : ?>
    <div id=”primary-sidebar” class=”primary-sidebar widget-area” role=”complementary”>
    <?php dynamic_sidebar( ‘home_right_1’ ); ?>
    </div><!– #primary-sidebar –>
    <?php endif; ?>
    <div class=”site-header-main”>
    <div class=”site-branding”>
    <?php
    twentysixteen_the_custom_logo(); ?>

    <?php if ( is_front_page() && is_home() ) : ?>
    <h1 class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
    <?php else : ?>
    <p class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></p>
    <?php endif;

    $description = get_bloginfo( ‘description’, ‘display’ );
    if ( $description || is_customize_preview() ) : ?>
    <p class=”site-description”><?php echo $description; ?></p>
    <?php endif; ?>
    </div><!– .site-branding –>

    <?php if ( has_nav_menu( ‘primary’ ) || has_nav_menu( ‘social’ ) ) : ?>
    <button id=”menu-toggle” class=”menu-toggle”><?php _e( ‘Menu’, ‘twentysixteen’ ); ?></button>

    <div id=”site-header-menu” class=”site-header-menu”>
    <?php if ( has_nav_menu( ‘primary’ ) ) : ?>
    <nav id=”site-navigation” class=”main-navigation” role=”navigation” aria-label=”<?php esc_attr_e( ‘Primary Menu’, ‘twentysixteen’ ); ?>”>
    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘primary’,
    ‘menu_class’ => ‘primary-menu’,
    ) );
    ?>
    </nav><!– .main-navigation –>
    <?php endif; ?>

    <?php if ( has_nav_menu( ‘social’ ) ) : ?>
    <nav id=”social-navigation” class=”social-navigation” role=”navigation” aria-label=”<?php esc_attr_e( ‘Social Links Menu’, ‘twentysixteen’ ); ?>”>
    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘social’,
    ‘menu_class’ => ‘social-links-menu’,
    ‘depth’ => 1,
    ‘link_before’ => ‘<span class=”screen-reader-text”>’,
    ‘link_after’ => ‘</span>’,
    ) );
    ?>
    </nav><!– .social-navigation –>
    <?php endif; ?>
    </div><!– .site-header-menu –>
    <?php endif; ?>
    </div><!– .site-header-main –>

    <?php if ( get_header_image() ) : ?>
    <?php
    /**
    * Filter the default twentysixteen custom header sizes attribute.
    *
    * @since Twenty Sixteen 1.0
    *
    * @param string $custom_header_sizes sizes attribute
    * for Custom Header. Default ‘(max-width: 709px) 85vw,
    * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px’.
    */
    $custom_header_sizes = apply_filters( ‘twentysixteen_custom_header_sizes’, ‘(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px’ );
    ?>
    <div class=”header-image”>
    ” rel=”home”>
    <img src=”<?php header_image(); ?>” srcset=”<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>” sizes=”<?php echo esc_attr( $custom_header_sizes ); ?>” width=”<?php echo esc_attr( get_custom_header()->width ); ?>” height=”<?php echo esc_attr( get_custom_header()->height ); ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”>

    </div><!– .header-image –>
    <?php endif; // End header image check. ?>
    </header><!– .site-header –>

    <div id=”content” class=”site-content”>

    As you can see I haven’t changed the name from sidebar (home_right_1) which I should do for it to make sense, but now that I know where I should be adding the extra code I can change that.
    Many thanks

    @madamecholet if this fixed your problem please mark this post as ‘resolved’ – it really helps those of us who spend time here trying to help others, as we don’t waste time reading through posts that have already been resolved – thanks! ??

    Thread Starter madamecholet

    (@madamecholet)

    Apologies- Will do.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Inserting a new widget area in TwentySixteen’ is closed to new replies.