admin管理员组

文章数量:1122832

Pretty often I use one widget area placed in the footer of my theme, what displays its widgets as columns. As a theme developer I try to offer as much flexibility as possible. So if the theme user wants a specific amount of columns in the footer, than 1, 2, 3 or 4.. columns. It shouldn't be any problem, they all will fit perfectly (as long as css supports it).

Unfortunately I couldn't find a way to render my widgets in a similair way as posts are rendered. I want an array of widgets of a specific area, so I can count them and calculate what column class should be used on the container element of the widget.

Pretty often I use one widget area placed in the footer of my theme, what displays its widgets as columns. As a theme developer I try to offer as much flexibility as possible. So if the theme user wants a specific amount of columns in the footer, than 1, 2, 3 or 4.. columns. It shouldn't be any problem, they all will fit perfectly (as long as css supports it).

Unfortunately I couldn't find a way to render my widgets in a similair way as posts are rendered. I want an array of widgets of a specific area, so I can count them and calculate what column class should be used on the container element of the widget.

Share Improve this question edited Aug 17, 2016 at 16:43 luukvhoudt asked Aug 17, 2016 at 15:09 luukvhoudtluukvhoudt 8411 gold badge8 silver badges19 bronze badges 6
  • Yes, there's a great plugin for this. That guy scraped the code from few developers and designed this -> wordpress.org/plugins/limit-widgets – Josip Ivic Commented Aug 17, 2016 at 15:26
  • @JosipIvic Thanks the answer probably can be found in that plugin's source. Unfortunately it's not exactly what I'm looking for, because this plugin sets a limit for the amount of widgets on all widget areas. – luukvhoudt Commented Aug 17, 2016 at 15:32
  • Can you provide some context as to why you would need to do this? – Tom J Nowell Commented Aug 17, 2016 at 15:36
  • @JosipIvic if that answers the question can you write an answer and be sure to write up how that plugin does what it does? – Tom J Nowell Commented Aug 17, 2016 at 15:37
  • 1 Possible duplicate: wordpress.stackexchange.com/q/19907/11761 – Max Yudin Commented Aug 17, 2016 at 15:47
 |  Show 1 more comment

2 Answers 2

Reset to default 1

How do I get an array of widgets?

You can look into

$sidebars_widgets =  wp_get_sidebars_widgets();
print_r( $sidebars_widgets );

Here's an output example:

Array
(
    [orphaned_widgets_1] => Array
        (
            [0] => text-6
        )

    [wp_inactive_widgets] => Array
        (
            [0] => text-7
            [1] => rss-2
        )

    [sidebar-1] => Array
        (
            [0] => recent-posts-3
            [1] => recent-posts-4
            [2] => text-9
            [3] => calendar-2
            [4] => categories-3
            [5] => search-4
            [6] => text-8
            [7] => categories-2
        )

    [sidebar-2] => Array
        (
            [0] => search-5
        )

    [sidebar-3] => Array
        (
            [0] => recent-posts-2
        )

)

To dynamically calculate the number of columns in the footer widget area and apply appropriate CSS classes, you can achieve this by:

  1. Registering the Widget Area in your theme's functions.php.
  2. Counting the Number of Active Widgets in the widget area.
  3. Applying the CSS Classes Dynamically based on the number of widgets.

Here's a step-by-step approach to accomplish this:

Step 1: Register the Widget Area

Add this to your theme's functions.php file to register the footer widget area.

function my_theme_widgets_init() {
    register_sidebar(array(
        'name' => 'Footer Widget Area',
        'id' => 'footer-widget-area',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

Step 2: Count the Number of Active Widgets

In your theme’s functions.php file, create a function to count the active widgets and assign column classes.

function count_active_widgets($sidebar_id) {
    $sidebars_widgets = wp_get_sidebars_widgets();
    return isset($sidebars_widgets[$sidebar_id]) ? count($sidebars_widgets[$sidebar_id]) : 0;
}

function dynamic_footer_columns() {
    $widget_count = count_active_widgets('footer-widget-area');
    $column_class = '';

    if ($widget_count == 1) {
        $column_class = 'one-column';
    } elseif ($widget_count == 2) {
        $column_class = 'two-columns';
    } elseif ($widget_count == 3) {
        $column_class = 'three-columns';
    } elseif ($widget_count >= 4) {
        $column_class = 'four-columns';
    }

    echo $column_class;
}

Step 3: Apply the CSS Classes Dynamically

In your theme’s footer template file (e.g., footer.php), apply the dynamic column class to the footer widget area container.

<footer id="footer">
    <div id="footer-widget-area" class="<?php dynamic_footer_columns(); ?>">
        <?php if (is_active_sidebar('footer-widget-area')) : ?>
            <?php dynamic_sidebar('footer-widget-area'); ?>
        <?php endif; ?>
    </div>
</footer>

Step 4: Add CSS for Column Classes

In your theme’s CSS file (e.g., style.css), add styles for the column classes.

#footer-widget-area {
    display: flex;
    flex-wrap: wrap;
}

#footer-widget-area.one-column .widget {
    flex: 0 0 100%;
}

#footer-widget-area.two-columns .widget {
    flex: 0 0 50%;
}

#footer-widget-area.three-columns .widget {
    flex: 0 0 33.33%;
}

#footer-widget-area.four-columns .widget {
    flex: 0 0 25%;
}

Summary

This approach dynamically calculates the number of active widgets in the footer widget area and applies appropriate CSS classes to render them in columns. By using CSS Flexbox, you ensure that the widgets will adjust their layout according to the specified number of columns. Adjust the CSS as needed to fit your theme's design.

本文标签: How do I get an array of widgets