As a WordPress developer, part of my concern for my WordPress users is the ability for them to change their WordPress website content as much as possible; Without having to resort to contacting me to do so for them. This makes me think outside of the box on how I can make the WordPress theme have an intended layout, while allowing the flexibility of dynamic content. That’s where widgets come into play!

WordPress Widgets provide a structured way to allow dynamic content in a specific area of your theme without (or at least minimize the chance of) breaking the layout. Sometimes certain widgets are meant to look good in one area, but maybe not another area of the WordPress theme.

I really think widgets are the wave of the future with WordPress Theme Development. Especially with all the fancy updates to the WordPress theme customizer lately.

If you’re a WordPress Theme Developer and you’re theme’s aren’t “widget ready”, you should really change that. You can start by reading the rest of this article. 🙂

The following “How to Conditionally Display Widget Ready WordPress Template Files Tutorial” is very basic and bare-bones, but enough to give you the idea to run with.

Disclaimer: This “how to / tutorial” doesn’t cover WordPress Theme Options. This assumes you already have your WordPress theme settings managed in some way.

In this “how to / tutorial” I’ll demonstrate how you can give your WordPress users more control over the header section of their WordPress website. Although, don’t stop your creativity there. You could apply this basic idea in many other conventions.

Step 1 – Tell WordPress About the “Widget Areas” Supported by Your WordPress Theme.

The following code should be pasted in your currently active WordPress theme’s functions.php file:

if ( ! function_exists( 'tbd_15_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 https://www.michaelbrentecklund.com/
     *
     * @return bool
     */
    function tbd_15_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', 'tbd_15_theme_register_widget_areas' );

}

Step 2 – Create the WordPress 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 WordPress 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 WordPress Theme to Activate Dynamic Header Output.

<?php

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

# Retrieve theme option configured by user.
if ( ! $header_template = get_option( 'mbe-theme-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;

?>

There you have it! You can now “dynamically” display content in your header template file using widgets. Optionally, you could display static content which could serve as your “default content” or “fallback content” in-case there’s no widgets assigned to that particular widget area.

This small and simple change can really add a lot of flexibility to your WordPress Themes.

Credits

Original question asked by @AlonsoF1 on WordPress Stack Exchange: Show/hide widgets in WordPress admin based on current Advanced Custom Fields option.
Answer to Question: Show/hide widgets in WordPress admin based on current Advanced Custom Fields option by @Michael Ecklund on WordPress Stack Exchange.

Related Questions

This article assists in answering all of the following related questions:

  1. [WordPress Development] Show/hide widgets in WordPress admin based on current Advanced Custom Fields option asked by: @AlonsoF1
  2. [WordPress Development] What’s the best way to handle css for multiple header layouts/multiple custom header.php files? asked by: @AlonsoF1
  3. [WordPress Development] How Can I Register Menus and Widgets Conditionally Based on Theme Options/Settings? asked by: @Ryan Dorn
  4. [WordPress Development] Custom Menus, Widgets & Conditional Statements asked by: @Justice Is Cheap

Leave a Reply