custom widget wordpress code example

Example 1: custom widget area wordpress

<?php
  
 /**
 * Register our sidebars and widgetized areas. - Most times you can place this instead your fuction file.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => 'Home right sidebar',
		'id'            => 'home_right_1',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>
  
/* show sidebar - template file */  
<?php if ( is_active_sidebar( 'home_right_1' ) ) : ?>
	<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'home_right_1' ); ?>
	</div><!-- #primary-sidebar -->
<?php endif; ?>

Example 2: how create widget widget in wordpress

/*  add this code in footer.php child theme file  */

		<div id="footer-sidebar" class="secondary">
			<div id="footer-sidebar1">
				<?php
				if(is_active_sidebar('footer-sidebar-1')){
				dynamic_sidebar('sidebar1');
				}
				?>
			</div>
			<div id="footer-sidebar2">
				<?php
				if(is_active_sidebar('footer-sidebar-2')){
				dynamic_sidebar('sidebar2');
				}
				?>
			</div>			
		</div>
        
/*  add this code in functions.php child theme file */
    
    register_sidebar( array(
	'name' => 'Footer #1',
	'id' => 'sidebar1',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
	) );
	register_sidebar( array(
	'name' => 'Footer #2',
	'id' => 'sidebar2',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
	) );
    
    }
add_action( 'wp_enqueue_scripts', 'twentytwenty_child_enqueue_child_styles' );

Example 3: how create widget widget in wordpress

/*add this code in your child theme css style.css file */

#footer-sidebar {
	display:block;
	height: 250px;
	}
	
	#footer-sidebar1 {
	float: left;
	width: 340px;
	margin-left:5px;
	margin-right:5px;
	}
	
	#footer-sidebar2 {
	float: left;
	width: 340px;
	margin-right:5px;
	margin-left:5px;
	}
/* end style.css  */