Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sidebar Layout Option im WordPress Customizer
<?php
/**
* Adds Layout Options section and sidebar position setting.
*
* @param WP_Customize_Manager $wp_customize The Customizer object.
*/
function theme_slug_customize_register( $wp_customize ) {
// Add layout options section.
$wp_customize->add_section( 'theme_slug_layout_options', array(
'title' => esc_html__( 'Layout Options', 'theme-slug' ),
'priority' => 120,
) );
// Add featured category setting and control.
$wp_customize->add_setting( 'sidebar_position', array(
'default' => 'right',
'sanitize_callback' => 'theme_slug_sanitize_select',
'transport' => 'refresh',
) );
$wp_customize->add_control( 'sidebar_position', array(
'label' => esc_html__( 'Sidebar Position', 'theme-slug' ),
'section' => 'theme_slug_layout_options',
'type' => 'select',
'priority' => 1,
'choices' => array(
'left' => esc_html__( 'Left Sidebar', 'theme-slug' ),
'right' => esc_html__( 'Right Sidebar', 'theme-slug' ),
),
) );
}
add_action( 'customize_register', 'theme_slug_customize_register' );
<?php
/**
* Adds custom classes to the array of body classes.
*
* @param array $classes Classes for the body element.
* @return array
*/
function theme_slug_body_classes( $classes ) {
// Switch sidebar to left.
if ( 'left' === get_theme_mod( 'sidebar_position', 'right' ) ) {
$classes[] = 'left-sidebar';
}
return $classes;
}
add_filter( 'body_class', 'theme_slug_body_classes' );
@media screen and (min-width: 56.875em) {
.left-sidebar .sidebar {
float: left;
margin-right: 75%;
margin-left: 0;
}
.left-sidebar .content-area {
float: right;
margin-left: -100%;
margin-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.