Alan Henness
posted this
08 December 2019
This seems fairly straightforward to do with a bit of knowledge.
I created a blank Nicepage theme with the sidebar on the right and exported that and uploaded it into WordPress. I named it basic_r_sidebar1.
I edited functions.php and added the code to create the new left sidebar (replace 'basic_r_sidebar1' with the name of your template and you can give it whatever name you like - I've called it 'Left Widget Area' and add whatever description you like):
function left_sidebar() {
register_sidebar(array(
'name' => __('Left Widget Area', 'basic_r_sidebar1'),
'id' => 'left',
'description' => __('Add widgets here to appear in your LEFT sidebar on blog posts and archive pages.', 'basic_r_sidebar1'),
'before_widget' => '<widget id="%1$s" name="%1$s" class="widget %2$s">',
'after_widget' => '</widget>',
'after_title' => '</title>',
'before_title' => '<title>',
));
}
add_action('widgets_init', 'left_sidebar');
The id of this new sidebar is 'left'. This adds it to the Appearance:Widgets' screen in wp-admin where widgets can be added - see screenshot - but it now has to be added into the template so it can be seen. This is done in the file wp-content/themes/<theme name>/template-parts/layouts/post-before.php. This will have two lines of code:
<div class="u-page-root"><div class="u-content-layout u-sheet">
<div class>
ETA: This doesn't seem to format correctly here: the second line should say div class="u-content" inside tags.
You need to add the following code (this is the code Nicepage uses for the right widget with an id of 'primary' but with the id changed to refer to the id of the new sidebar, left) between these two lines:
<?php $sidebar_html = theme_sidebar(array(
'id' => 'left',
'template' => <<<WIDGET_TEMPLATE
<div class="u-block u-indent-30 u-block-undefined-2">
<div class="u-block-container u-clearfix">
<h5 class="u-block-header u-text u-block-undefined-3">{block_header}</h5>
<div class="u-block-content u-text u-block-undefined-4">{block_content}</div>
</div>
</div>
WIDGET_TEMPLATE
)); if ($sidebar_html): ?><aside class="u-indent-40 u-sidebar u-block-undefined-1">
<?php echo stylingDefaultControls($sidebar_html); ?>
<style data-mode="XL"> .u-block-undefined-1 {flex-basis: 250px}
.u-block-undefined-3 {font-size: 1.125rem; line-height: 2}
.u-block-undefined-4 {font-size: 0.875rem; line-height: 2}
.u-block-undefined-6 {font-size: 1.125rem; line-height: 2}
.u-block-undefined-7 {font-size: 0.875rem; line-height: 2}
.u-block-undefined-9 {font-size: 1.125rem; line-height: 2}
.u-block-undefined-10 {font-size: 0.875rem; line-height: 2}
<style data-mode="LG"></style>
<style data-mode="MD"></style>
<style data-mode="SM"></style>
<style data-mode="XS"></style>
<?php else:?><div class style></div><?php endif;?>
This will add the sidebar to the Posts page. If you want to add it to the Blog page as well as or instead of the Posts page, add the same code to wp-content/themes/<theme name>/template-parts/layouts/blog-before.php in the same way,
I've not yet got round to working out how to change the width of the sidebar - they are currently identical - but I think that should be straightforward with some CSS.
Note that this is hacking the template code and is probably frowned upon by Nicepage :-) but it gets round the problem until Nicepage can incorporate this feature. Also, it would probably be better to use a child theme but I've not done that yet.
If anyone sees any problems with doing this, please let me know!
This seems fairly straightforward to do with a bit of knowledge.
I created a blank Nicepage theme with the sidebar on the right and exported that and uploaded it into WordPress. I named it basic_r_sidebar1.
I edited functions.php and added the code to create the new left sidebar (replace 'basic_r_sidebar1' with the name of your template and you can give it whatever name you like - I've called it 'Left Widget Area' and add whatever description you like):
function left_sidebar() {
register_sidebar(array(
'name' => __('Left Widget Area', 'basic_r_sidebar1'),
'id' => 'left',
'description' => __('Add widgets here to appear in your LEFT sidebar on blog posts and archive pages.', 'basic_r_sidebar1'),
'before_widget' => '<widget id="%1$s" name="%1$s" class="widget %2$s">',
'after_widget' => '</widget>',
'after_title' => '</title>',
'before_title' => '<title>',
));
}
add_action('widgets_init', 'left_sidebar');
The id of this new sidebar is 'left'. This adds it to the Appearance:Widgets' screen in wp-admin where widgets can be added - see screenshot - but it now has to be added into the template so it can be seen. This is done in the file wp-content/themes/<theme name>/template-parts/layouts/post-before.php. This will have two lines of code:
<div class="u-page-root"><div class="u-content-layout u-sheet">
<div class>
*ETA: This doesn't seem to format correctly here: the second line should say div class="u-content" inside tags.*
You need to add the following code (this is the code Nicepage uses for the right widget with an id of 'primary' but with the id changed to refer to the id of the new sidebar, left) ***between*** these two lines:
<?php $sidebar_html = theme_sidebar(array(
'id' => 'left',
'template' => <<<WIDGET_TEMPLATE
<div class="u-block u-indent-30 u-block-undefined-2">
<div class="u-block-container u-clearfix">
<h5 class="u-block-header u-text u-block-undefined-3">{block_header}</h5>
<div class="u-block-content u-text u-block-undefined-4">{block_content}</div>
</div>
</div>
WIDGET_TEMPLATE
)); if ($sidebar_html): ?><aside class="u-indent-40 u-sidebar u-block-undefined-1">
<?php echo stylingDefaultControls($sidebar_html); ?>
<style data-mode="XL"> .u-block-undefined-1 {flex-basis: 250px}
.u-block-undefined-3 {font-size: 1.125rem; line-height: 2}
.u-block-undefined-4 {font-size: 0.875rem; line-height: 2}
.u-block-undefined-6 {font-size: 1.125rem; line-height: 2}
.u-block-undefined-7 {font-size: 0.875rem; line-height: 2}
.u-block-undefined-9 {font-size: 1.125rem; line-height: 2}
.u-block-undefined-10 {font-size: 0.875rem; line-height: 2}
<style data-mode="LG"></style>
<style data-mode="MD"></style>
<style data-mode="SM"></style>
<style data-mode="XS"></style>
<?php else:?><div class style></div><?php endif;?>
This will add the sidebar to the Posts page. If you want to add it to the Blog page as well as or instead of the Posts page, add the same code to wp-content/themes/<theme name>/template-parts/layouts/blog-before.php in the same way,
I've not yet got round to working out how to change the width of the sidebar - they are currently identical - but I think that should be straightforward with some CSS.
Note that this is hacking the template code and is probably frowned upon by Nicepage :-) but it gets round the problem until Nicepage can incorporate this feature. Also, it would probably be better to use a child theme but I've not done that yet.
If anyone sees any problems with doing this, please let me know!
Last edited 08 December 2019 by Alan Henness
