widget | Drafie's Design

Adding new widget areas in Suffusion

Aug 092014

Posted by Ciprian on 09/08/2014 How-To's Tagged with: child theme, Suffusion, widget, Widget Area No Responses »

Sometimes we need more widget areas below Suffusion header or above the footer, as it was asked recently on Suffusion Forum and is not so hard to obtain how many areas we want with few lines of code.

Of course, for this kind of changes we need a child theme.

1. For adding a new widget area below header, add in functions.php of your child theme:

register_sidebar(array (
	"name" => "Second Widget Area Below Header",
	'id' => 'sidebar-head-1',
	"description" => "This appears above the content, just below the header. It is as wide as the page.",
				'before_widget' => '<!-- widget start --><aside id="%1$s" class="%2$s suf-widget"><div class="dbx-content">',
				"after_widget" => '</div></aside><!-- widget end -->',
				"before_title" => '<h3>',
				"after_title" => '</h3>'
));

register_sidebar(array (

"name" => "Second Widget Area Below Header",

'id' => 'sidebar-head-1',

"description" => "This appears above the content, just below the header. It is as wide as the page.",

'before_widget' => '',

"before_title" => '

',

"after_title" => ''

));

Now, by ftp, COPY sidebar-below-header.php from /suffusion/ to your child theme folder. Edit the copy and add at the very end of file, after the last “ ?> “

<!-- sidebar-head-1 Widget Area -->
<div id="sidebar-head-1" class="dbx-group <?php echo $suf_wa_wabh_style;?> warea fix">
<?php if ( !dynamic_sidebar('Second Widget Area Below Header') ) : ?>
      <?php endif; ?>
</div>
<!-- /sidebar-head-1 -->

<div id="sidebar-head-1" class="dbx-group echo $suf_wa_wabh_style;?> warea fix">

if ( !dynamic_sidebar('Second Widget Area Below Header') ) : ?>

endif; ?>

</div>

2. For a new widget area above footer, the procedure is the same. First, register the new sidebar in functions.php of the child theme:

register_sidebar(array (
	"name" => "Second Widget Area Above Footer",
	'id' => 'sidebar-footer-1',
	"description" => "This appears below the content, just above the footer. It is as wide as the page.",
				'before_widget' => '<!-- widget start --><aside id="%1$s" class="%2$s suf-widget"><div class="dbx-content">',
				"after_widget" => '</div></aside><!-- widget end -->',
				"before_title" => '<h3>',
				"after_title" => '</h3>'
));

register_sidebar(array (

"name" => "Second Widget Area Above Footer",

'id' => 'sidebar-footer-1',

"description" => "This appears below the content, just above the footer. It is as wide as the page.",

'before_widget' => '',

"before_title" => '

',

"after_title" => ''

));

Then copy by ftp sidebar-above-footer.php from /suffusion/ to your child theme folder and at the end of the file, after the last “ ?> ” add:

<!-- sidebar-footer-1 Widget Area -->
	<div id="sidebar-footer-1" class="<?php echo $suf_wa_waaf_style; ?> warea fix">
<?php if ( !dynamic_sidebar('Second Widget Area Above Footer') ) : ?>
      <?php endif; ?>
	</div>
<!-- /sidebar-footer-1 -->

<div id="sidebar-footer-1" class=" echo $suf_wa_waaf_style; ?> warea fix">

if ( !dynamic_sidebar('Second Widget Area Above Footer') ) : ?>

endif; ?>

</div>

Adding jQuery plugins in Suffusion

In this article I will try to show you the basic directions for inserting jQuery codes in Suffusion. The principles are the same for any javascript plugin, but bear in mind that it is not a straight way for getting these plugins to works. Those plugins wasn’t created specifically for WordPress, sometimes they are conflicting with WordPress or theme or other plugins javascript’s.