[Feature Request] Dynamic footer columns based on active footer widgets
Describe the feature that you'd like
Implemented by #776
Why is this feature needed? What problem does it solve?
It would give users a choice, now they don't have any choice because there are 4 columns hard coded. What if they want 2 columns? They can if they have a footer based on how many footer widgets are active then the users can decide how many columns the footer is going to have.
Checklist
- [X] I have searched the issues and this feature has not been requested.
https://github.com/bootscore/bootscore/pull/776#issuecomment-2123113932
I’ve now modified the structure of the footer code, which also enables the functionality to use footer widgets as required:
<?php if (is_active_sidebar('footer-2')) : ?>
<div class="<?= apply_filters('bootscore/class/footer/col', 'col-md-6 col-lg', 'footer-2'); ?>">
<?php dynamic_sidebar('footer-2'); ?>
</div>
<?php endif; ?>
<?php if (is_active_sidebar('footer-3')) : ?>
<div class="<?= apply_filters('bootscore/class/footer/col', 'col-md-6 col-lg', 'footer-3'); ?>">
<?php dynamic_sidebar('footer-3'); ?>
</div>
<?php endif; ?>
<?php if (is_active_sidebar('footer-4')) : ?>
<div class="<?= apply_filters('bootscore/class/footer/col', 'col-md-6 col-lg', 'footer-4'); ?>">
<?php dynamic_sidebar('footer-4'); ?>
</div>
<?php endif; ?>
</div>
Is there a way to use the footers with templates parts instead of widgets? Currently our website is not using any widgets and is overriding the footer.php, but updating the theme is then more time consuming.
Is there a way to use the footers with templates parts instead of widgets?
Not yet, using template parts in header and footer is something for a major update later.
Currently our website is not using any widgets and is overriding the footer.php, but updating the theme is then more time consuming.
If you have overridden footer.php in your child, updating the main-theme is hassle-free.
Edit: If you have an idea to use template-parts without breaking changes for existing installations, a PR is highly appreciated.
I just came here to make the same request. I had previously used a template override in 5.x and when I updated the site to 6.x I forgot to check how it looked on mobile. I was only using widgets in footer-2 and footer-3 and they essentially are centered until you get to mobile which is where the unused footer-1,-2 mess things up.
I was going to make the same recommendation above, which is to move the sidebar checks outside the col. You'd change the containing row default class to center everything and, I assume, this would cover most use cases.
<div class="row justify-content-center">
If you wanted to really give more control to stay inline with not having to create template overrides in the child theme, you would also add a filter for the containing row because sometimes I do like to change how the footer elements line up.
For example
<div class="<?= apply_filters('bootscore/class/footer/widgetsrow', 'row justify-content-center'); ?>">
@seanvandermolen
I was going to make the same recommendation above, which is to move the sidebar checks outside the col.
Problem is here that if you are using, for example just Footer 1 and 4, cols are line-up as Footer 1 and "2". In that case you have to add an empty widget to Footer 2 and 3 to get the space back. Additionally then you have a bottom margin on this empty widgets which disturbs in mobile view.
If you have only used Footer 2 and 3, then you don't need to add justify-content-center to the row, because as you wrote these cols are already centered due the empty Footer 1 and 4 col. You can use filters as well to change each col width. With this tools, its possible to create nearly every kind of footer you like.
If you wanted to really give more control to stay inline with not having to create template overrides in the child theme, you would also add a filter for the containing row because sometimes I do like to change how the footer elements line up.
Yes, we will add more and more filters, do you want to open a PR? Contributions are highly appreciated.
However, I'm completely open for any kind of improvements here. But we are responsible for thousands of sites, breaking changes are not allowed until v7 which comes with Bootstrap 6.
Using template-parts https://fullsiteediting.com/lessons/adding-full-site-editing-features-to-classic-themes/#h-5-add-block-based-template-parts is planned for v7 as well. This may solve this by itself.
Yeah, its almost the reverse uno of the shortcut of centering items using 2 and 3. While it would be a breaking change, the fix would be filtering the row with row justify-content-between. Is it intuitive... IDK does that even exist anymore? lol
Not sure I understand the bottom margin, if the whole col is gone there is no widget. Actually, how WP is wrapping widgets broke my h-100 I used in a static html widget congaing cards for col 2 and 3. One of my pet peeves is how WP wraps widgets with DIVS and CSS that break/ block things and they provides no way to either not wrap it or apply custom CSS to the wrapper.
Of course, there's more than one way to skin a cat, no ones going to do things the same way. The way I did it before 6.x was the template override. Thinking that anyone who's going to use filters and avoid duping templates will be using pretty basic layouts. If they want something fancy, their going to override the template anyways.
Maybe another way to think about it is a feature add:, an additional filter to disable col positions all together so you have the choice to consume the footer position space or not.
I would love to open a PR, time allowing. I have handful of ideas to try out and share.
EDIT: I guess I didn't think this through, probably because I haven't considered all of the changes from 5.x to 6 with this particular site.
When I decided to skip customizing the footer template from 5.x what I got was this
My thought process is to get rid of the Col entirely, but I could have used the existing filter to set the CSS to d-none. duh
I guess I should start figuring out how to take advantage of template parts.
I guess I should start figuring out how to take advantage of template parts.
Why so complicated? It's simple, there are 4 columns. If you leave a widget empty, then there is the space from the empty column. If you need a 3 col layout instead, set Footer 1, 2 and 3 to col-md-4and Footer 4 to d-none.
but I could have used the existing filter to set the CSS to d-none. duh
Yes, and what's wrong here?
The image
Please share a link to your site, then we can inspect and fix it.
Not sure I understand the bottom margin, if the whole col is gone there is no widget.
The bottom margin is added to the widget and not to the col. That's why an empty col has no bottom margin.
If they want something fancy, their going to override the template anyways.
You can modify almost everything with filters and actions. If you find an area where is something missing, please open a PR and we can add it.
Three tiny examples, zero overrides, just filters and actions. Pay attention to header and footer:
- https://www.vdzev.de/
- https://song-ev.de/
- https://themes.bootscore.me/boilerplate/
I don't have any problems with the site now.
It might help to understand my approach and how I even came to this. The is a tight budget contract, I take shortcuts, spend as little time on something as possible.
When updating from 5.x to 6.x I tried to take advantage as many of the new opportunities that have been provided with this theme that allows me to skip creating and customizing. Big thumbs up on this approach btw.
This was an oversite, that led to a discovery mission on my part on how it came to be (I decided not to reuse the custom template from the last version) to how to fix it quickly, and then could the theme be structured differently instead of do I understand the changes. I'm still learning the filters and actions.
When seeing this, my first thought is how do I get rid of cols because its cleaner and because I prefer removing unused code since performance is baked into my thinking.
If a widget doesn't exists, why should the col that should contain it.
- It should if you're a designer and are counting on it for positioning
- If you aren't depending on it, then not having the code is more efficient than leaving it and having the device deal with parsing the html, parsing the CSS and processing the outcome. How important is this, not so much unless you're really concerned about speed.
In my case I was counting on it for desktop views, but then it was a problem I missed for mobile.
However, my approach with not including unneeded code is a preference and after consideration It's not necessary and I will use the provided filters.
The screenshot was the result from not using the previous template, and not checking how the result looked in mobile. I have resolved that issue for now.
This entire request seems to be a discovery mission coming from a particular approach to achieving solutions.