Can sidebars be added?

Hi, I don’t know of any plugins that would add a sidebar into TwentyTwenty or any easy way of doing it. It would require creating a child theme, implementing the sidebar functionality and then adding in the additional CSS needed to ensure it displays correctly across different browser widths.

Ale, I was able to add two sidebars into my Twenty Twenty theme.

As Jarret said, you need to create a Child Theme.

If you need more help, I may add the code I used.

@jarretc , thanks for your reply. I guess there is no plugin, couldn’t find any either!

@diego92v thank you! I would appreciate if you could share the code! I have already created a child theme for Twenty Twenty for other tweaks I needed to perform. I’m not a developer, but I am able to do some code tweaking here and there by googling a lot and also by trial and error, so I might be able to do it!

Thanks!
Ale

• This reply was modified 4 years, 10 months ago by Ale.

@aleloiacono

I have four sidebars in the footer, although I think you will be able to change them easily. I am also learning with trial-error.

This two parts should be in functions.php:

/*Remove sidebar added by default*/

add_action( 'after_setup_theme', function() {
        remove_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
        }
);

The following code uses “twentytwenty_sidebar_registration2” instead of “twentytwenty_sidebar_registration” because I didn’t know how to delete it. The description of each footer is in Galician. I guess you

/*Widgets no menú. 4 pés de páxina*/
function twentytwenty_sidebar_registration2() {

	// Arguments used in all register_sidebar() calls.
	$shared_args = array(
		'before_title'  => '<h3 class="widget-title subheading heading-size-3">',
		'after_title'   => '</h3>',
		'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
		'after_widget'  => '</div></div>',
	);

	// Footer #1.
	register_sidebar(
		array_merge(
			$shared_args,
			array(
				'name'        => __( 'Footer #1', 'twentytwenty' ),
				'id'          => 'sidebar-1',
				'description' => __( 'Os widgets desta área mostraranse na pimeira columna do pé de páxina.', 'twentytwenty' ),
			)
		)
	);

	// Footer #2.
	register_sidebar(
		array_merge(
			$shared_args,
			array(
				'name'        => __( 'Footer #2', 'twentytwenty' ),
				'id'          => 'sidebar-2',
				'description' => __( 'Os widgets desta área mostraranse na segunda columna do pé de páxina.', 'twentytwenty' ),
			)
		)
	);

	// Footer #3.
	register_sidebar(
		array_merge(
			$shared_args,
			array(
				'name'        => __( 'Pé de páxina #3', 'twentytwenty' ),
				'id'          => 'sidebar-3',
				'description' => __( 'Os widgets nesta área mostraranse na terceira columna do pé de páxina.', 'twentytwenty' ),
			)
		)
	);

	// Footer #4.
	register_sidebar(
		array_merge(
			$shared_args,
			array(
				'name'        => __( 'Pé de páxina #4', 'twentytwenty' ),
				'id'          => 'sidebar-4',
				'description' => __( 'Os widgets nesta área mostraranse na cuarta columna do pé de páxina. Ves Jojo?', 'twentytwenty' ),
			)
		)
	);

}

This third code should be in child-theme-link/template-parts/footer-menus-widgets.php

<?php
/**
 * Displays the menus and widgets at the end of the main element.
 * Visually, this output is presented as part of the footer element.
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

$has_footer_menu = has_nav_menu( 'footer' );
$has_social_menu = has_nav_menu( 'social' );

$has_sidebar_1 = is_active_sidebar( 'sidebar-1' );
$has_sidebar_2 = is_active_sidebar( 'sidebar-2' );
$has_sidebar_3 = is_active_sidebar( 'sidebar-3' );
$has_sidebar_4 = is_active_sidebar( 'sidebar-4' );

// Only output the container if there are elements to display.
if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 || $has_sidebar_3 || $has_sidebar_4 ) {
	?>

	<div class="footer-nav-widgets-wrapper header-footer-group">

		<div class="footer-inner section-inner">

			<?php

			$footer_top_classes = '';

			$footer_top_classes .= $has_footer_menu ? ' has-footer-menu' : '';
			$footer_top_classes .= $has_social_menu ? ' has-social-menu' : '';

			if ( $has_footer_menu || $has_social_menu ) {
				?>
				<div class="footer-top<?php echo $footer_top_classes; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
					<?php if ( $has_footer_menu ) { ?>

						<nav aria-label="<?php esc_attr_e( 'Footer', 'twentytwenty' ); ?>" role="navigation" class="footer-menu-wrapper">

							<ul class="footer-menu reset-list-style">
								<?php
								wp_nav_menu(
									array(
										'container'      => '',
										'depth'          => 1,
										'items_wrap'     => '%3$s',
										'theme_location' => 'footer',
									)
								);
								?>
							</ul>

						</nav><!-- .site-nav -->

					<?php } ?>
					<?php if ( $has_social_menu ) { ?>

						<nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>" class="footer-social-wrapper">

							<ul class="social-menu footer-social reset-list-style social-icons fill-children-current-color">

								<?php
								wp_nav_menu(
									array(
										'theme_location'  => 'social',
										'container'       => '',
										'container_class' => '',
										'items_wrap'      => '%3$s',
										'menu_id'         => '',
										'menu_class'      => '',
										'depth'           => 1,
										'link_before'     => '<span class="screen-reader-text">',
										'link_after'      => '</span>',
										'fallback_cb'     => '',
									)
								);
								?>

							</ul><!-- .footer-social -->

						</nav><!-- .footer-social-wrapper -->

					<?php } ?>
				</div><!-- .footer-top -->

			<?php } ?>

			<?php if ( $has_sidebar_1 || $has_sidebar_2 || $has_sidebar_3 || $has_sidebar_4 ) { ?>

				<aside class="footer-widgets-outer-wrapper" role="complementary">

					<div class="footer-widgets-wrapper">

						<?php if ( $has_sidebar_1 ) { ?>

							<div class="footer-widgets column-one grid-item">
								<?php dynamic_sidebar( 'sidebar-1' ); ?>
							</div>

						<?php } ?>

						<?php if ( $has_sidebar_2 ) { ?>

							<div class="footer-widgets column-two grid-item">
								<?php dynamic_sidebar( 'sidebar-2' ); ?>
							</div>

						<?php } ?>
						
						<?php if ( $has_sidebar_3 ) { ?>

							<div class="footer-widgets column-third grid-item">
								<?php dynamic_sidebar( 'sidebar-3' ); ?>
							</div>

						<?php } ?>
						
						<?php if ( $has_sidebar_4 ) { ?>

							<div class="footer-widgets column-fourth grid-item">
								<?php dynamic_sidebar( 'sidebar-4' ); ?>
							</div>

						<?php } ?>

					</div><!-- .footer-widgets-wrapper -->

				</aside><!-- .footer-widgets-outer-wrapper -->

			<?php } ?>

		</div><!-- .footer-inner -->

	</div><!-- .footer-nav-widgets-wrapper -->

<?php } ?>

If you need to change the size of the title of each footer, go to “widget-title subheading heading-size-3” in functions.php

Regards,

Diego