3

So, in an effort to move my new project forward, I'm looking for a way to register and de-register widget areas depending on which header file I load via ACF Pro in the Options page.

A bit of info to bring everyone up to speed: I'm using ACF Pro (Advanced Custom Fields Pro) to select and call header layouts. For example: Selecting "Black" in the dropdown calls header-black.php and is applied globally as the site header upon saving my selection.

What I am now trying to figure out is how to register widgets that are exclusive to a selected header (such as "Black") and have header "Black" widgets appear in the widget admin page as the only available header widgets.

Example: Select header style "Black" which has two widgets areas in it (Header Black Widget Right, and Header Black Widget Left) and those become the only two available header widgets available for use in the widget admin page.

A scenario for example: In my first emample, I selected header style "Black" ok, so now I want to change to a different header layout called "Slim". Now, I select header style "Slim" which has three widget areas in it (Header Slim Widget 1, Header Slim Widget 2, Header Slim Widget 3) and, upon saving my choice of header, the "Black" header style's two widgets go away and get replaced with header style "Slim's" three widget areas.

I dug around for a couple of hours and found another question here that sort of touches on what I want to accomplish, but I'm still not quite clear how to execute it correctly because the answer given got edited/updated and that only added to my confusion.

Here's the link to the other thread I found here: How Can I Register Menus and Widgets Conditionally Based on Theme Options/Settings?

Hope you guys can help me map this deal out.

Happy New Year! Ray

5

You're in luck. I was actually looking for an excuse to do this on one of my projects. I finally took the time to add this idea into one of my themes. :)

You can take this idea and run with it. It's very basic and bare-bones example, but it does what you want it do to.

This doesn't cover theme options. This assumes you already have your theme settings managed in some way (which it sounds like you do).

Step 1 - Tell WordPress about "Widget Areas" supported by your theme.

if ( ! function_exists( 'mbe_theme_register_widget_areas' ) ) {

    /**
     * This function tells WordPress that your theme supports up to 4 Widget Areas:
     * 1.) Header Column 1
     * 2.) Header Column 2
     * 3.) Header Column 3
     * 4.) Header Column 4
     *
     * Allows Widgets to be placed in various places within the theme header.
     *
     * @author Michael Ecklund
     * @author_url http://www.michaelbrentecklund.com/
     *
     * @return bool
     */
    function mbe_theme_register_widget_areas() {

        $widget_areas = array();

        $widget_areas[] = array(
            'name' => 'Header Column 1',
            'id'   => 'mbe-theme-widget-area-header-column-1'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 2',
            'id'   => 'mbe-theme-widget-area-header-column-2'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 3',
            'id'   => 'mbe-theme-widget-area-header-column-3'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 4',
            'id'   => 'mbe-theme-widget-area-header-column-4'
        );

        foreach ( $widget_areas as $widget_area ) {

            $default_args = array(
                'before_widget' => '<div id="%1$s" class="widget mbe-theme-widget %2$s">',
                'after_widget'  => '</div><!-- end .mbe-theme-widget -->',
                'before_title'  => '<div class="mbe-theme-widget-title">',
                'after_title'   => '</div><!-- end .mbe-theme-widget-title -->'
            );

            $args = wp_parse_args( $widget_area, $default_args );

            register_sidebar( $args );

        }

        return true;

    }

    add_action( 'widgets_init', 'mbe_theme_register_widget_areas' );

}

The above code should be pasted in your currently active WordPress theme's functions.php file.

Step 2 - Create the template files for each type of header.

In this example, you'll want to create 4 new template files in the root directory of your currently active WordPress theme:

  1. header-column-1.php
  2. header-column-2.php
  3. header-column-3.php
  4. header-column-4.php

Step 3 - Make each new header template file widget ready.

In this example, I'll demonstrate a 4 column header template (header-column-4.php):

<?php


# BoF Header Column 1
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-1' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-1' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #1' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 1


# BoF Header Column 2
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-2' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-2' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #2' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 2


# BoF Header Column 3
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-3' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-3' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #3' . PHP_EOL;

}
echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 3


# BoF Header Column 4
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-4' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-4' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #4' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 4


echo '<div class="clearfix"></div>' . PHP_EOL;

?>

Step 4 - Edit header.php in your currently active theme to activate dynamic header output.

<?php

echo '<section class="container">' . PHP_EOL;
echo '<section class="row">' . PHP_EOL;

$header_template = get_option( 'mbe-theme-header-template' ); // Retrieve theme option configured by user.

if ( ! $header_template ) {
    $header_template = 'column-3'; // Fallback: Set a default header template.
}

get_template_part( 'header', $header_template );// Load the header template.

echo '</section><!-- end .row -->' . PHP_EOL;
echo '</section><!-- end .container -->' . PHP_EOL;

?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.