Add a fourth footer widget area for Dazzling theme

Dazzling
1

Hi,

Dazzling seems to be the theme for our purpose backed up by the positive impression as a total of Colorlib.
I would though very much appreciate a fourth footer widget area!
What do I have to do?

All the best,
Kjell

2

I tried to write a tutorial but decided that it would be so much easier to just create a Child Theme for Dazzling theme that you have to download and install just like any other theme and once activated you will get another footer widget area or 4 columns in total.

Here you can download this theme.

Let me know if this helps.

3

Super, brilliant … I’m lucky I didn’t start that child yet as I’m just testing so far. The child theme works but I think you forgot to change third to fourth.

<?php if ( is_active_sidebar( ‘footer-widget-4’ ) ) : ?>
<div class=“col-sm-6 col-md-3 footer-widget” role=“complementary”>
<?php dynamic_sidebar( ‘footer-widget-4’ ); ?>
</div><!-- .widget-area .third →
<?php endif; ?>

And it puts itself in the first position above the others (see the attachment).

But one mor question; I would also appreciate the possibility to adjust the width of the (text) area under the sliders and above the footer. It would be nice to make it less wide.

Kjell

4

Both things are not really relevant. “Third” is just a comment for a code that doesn’t do anything but if you absolutely want to change it feel free to do so. It will not appear anywhere and has no power.

Second one can be changed by setting different priority for this widget by replacing current Child Theme functions with this one:

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function dazzling_child_widgets_init() {

	register_sidebar(array(
    'id'            => 'footer-widget-4',
    'name'          =>  __( 'Footer Widget 4', 'dazzling' ),
    'description'   =>  __( 'Used for footer widget area', 'dazzling' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widgettitle">',
    'after_title'   => '</h3>',
  ));

}
add_action( 'widgets_init', 'dazzling_child_widgets_init', 30 );
?>

This will make changes in backend but not frontend where it will always display fourth as the last one. So no need to change this either only if you want to. It will still work the same way.

5

it would be great if you could post your website URL, so I can see your website setup and provide custom CSS for content width. And if you want to make it smaller only on front page or on all pages?

6

This is the way it looks: http://tankekraft.net

One detail: The logo is somewhat near the top.

I can change the code if you tell me which affect the width.

7

First part of code will add margin for logo and it will no longer sit on the edge but in the middle of header navigation. Second part of this code will make content area smaller on front page. You can tweak percentage value to get the results you were looking for.

#logo img {
  margin-top: 10px;
}

@media (min-width: 1000px) {
  .home #content {
    width: 60%;
  }
}

This code can be used via Theme Options - Other - Custom CSS or by adding it to newly created Child Theme style.css at the bottom of this file.

8

I’m impressed!
This is the real thing: http://stilprofiler.se
More to come.
Thank you.

9

Can I continue this thread as I can’t find my problem elsewhere?

When adding subpages to the toplevel it’s possible to open only the subpages, not the toplevel page from the menu.

10

For that you can follow this tutorial: https://colorlibsupport.com/t/child-theme-menu-override-in-functions-php-adding-a-third-level-of-menu-depth/#post-11642

This is for Sparkling theme but they are very similar and this trick should work the same way.