Sidebar

  • firenetcc

    (@firenetcc)


    8 years, 3 months ago

    Hey guys,

    I’m developing my theme and I’m stuck with the sidebars.
    I try to add multiple sidebars just like in this image:

    Image

    I wish to modify every sidebar like this:
    Sidebar-1(left) for Search,
    Sidebar-2(left) for Social media,
    Sidebar-3(right) for Usefull links,
    Sidebar-4(right) for Progress bar,
    And maybe later a chatbox, and a random link to our characters from World of Warcraft.

    I mention, at the moment I have sidebars activated only in Page.php

    Thanks in advice.

    • This topic was modified 8 years, 3 months ago by firenetcc.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator t-p

    (@t-p)

    8 years, 3 months ago

    Useful Codex Guides:
    https://codex.ww.wp.xz.cn/Sidebars
    https://codex.ww.wp.xz.cn/Widgetizing_Themes
    https://codex.ww.wp.xz.cn/Customizing_Your_Sidebar

    Mr Case

    (@mr-case)

    8 years, 3 months ago

    first you should register sidebars in your functions file. This way they show up as available spaces in your widgets section.

    helpful links:
    https://codex.ww.wp.xz.cn/Function_Reference/register_sidebars
    https://developer.ww.wp.xz.cn/themes/functionality/sidebars/

    example of that for 4 sidebar areas used in a footer template:

    function custom_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 1', 'yourthemename' ),
		'id'            => 'footer-1',
		'description'   => __( 'Appears in the footer section of the site.', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h5 class="widget-title">',
		'after_title'   => '</h5>',
	) );
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 2', 'yourthemename' ),
		'id'            => 'footer-2',
		'description'   => __( 'Appears in the footer section of the site.', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h5 class="widget-title">',
		'after_title'   => '</h5>',
	) );
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 3', 'yourthemename' ),
		'id'            => 'footer-3',
		'description'   => __( 'Appears in the footer section of the site.', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h5 class="widget-title">',
		'after_title'   => '</h5>',
	) );
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 4', 'yourthemename' ),
		'id'            => 'footer-4',
		'description'   => __( 'Appears in the footer section of the site.', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h5 class="widget-title">',
		'after_title'   => '</h5>',
	) );
}
add_action( 'widgets_init', 'custom_widgets_init' );

    Then you can write where those sidebars show up in your theme’s page template files. here’s a very loose example of what that code may look like:

    <div class="widget-area">
	<section id="footer-one" class="foot">
		<?php dynamic_sidebar( 'footer-1' ); ?>
	</section>

	<?php if (is_active_sidebar( 'footer-2' ) ) : ?>
			<section id="footer-two" class="foot">
				<?php dynamic_sidebar( 'footer-2' ); ?>
			</section>
	<?php endif; ?>

	<?php if (is_active_sidebar( 'footer-3' ) ) : ?>
			<section id="footer-three" class="foot">
				<?php dynamic_sidebar( 'footer-3' ); ?>
			</section>
	<?php endif; ?>

	<?php if (is_active_sidebar( 'footer-4' ) ) : ?>
			<section id="footer-four" class="foot">
				<?php dynamic_sidebar( 'footer-4' ); ?>
			</section>
	<?php endif; ?>
</div>

    you will of course decide how you want that marked up, but you get the idea. Register some sidebars. add them to whatever template files you want. (and style them of course) and then slap some widgets in there.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Sidebar’ is closed to new replies.