I have a question about website layout with and without wp widges in sidebar. Here is the code i have for my registered sidebar.

if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(products) ) :

And this is the code i have in functions.php

if (function_exists('register_sidebar')) {
        $opts   = array(
        'name'          =>  'Products',
        'before_widget' =>  '<div id="%1$s2" class="container %2$s">',
        'after_widget'  =>  '</div>',
        'before_title'  =>  '<p class="h4">',
        'after_title'   =>  '</p>'

I have wrote my own css for two different layouts when designing the website for my client. They are One-column layout and two-column layout which is one small & one big column layout(for wp widget purpose).

Is there any way i can display the webpage to 1-column website layout if i didn't add wp widget to the page i want? In other words, the web page will be one-column if there is no widget applied or else will be two-column website layout if that page is with widgets?

Probably this way that i'm want it to be.

<?php if --- with sidebar ---

<div id="column-1">
Column 1 appears

<?php elseif --- without sidebar ---

<div id="column-2">
Column 2 appears


Do you think this way work? Please advice. Will be great if this can be done in wp php coding. Thank you!

  • You can get specific template parts via get_template_part() – Sven Dec 21 '14 at 12:17
  • Hi! I wrote different codes in one single css file. I just want to use php code to make it display differently when with widget or no widget on the page. Any suggestion? Thanks! – Jornes Dec 21 '14 at 12:25

You can use is_active_sidebar() as a condition to enqueue your styles. It does precisely that — tells you if it has any widgets assigned.

PS stop function_exists() madness :) that is completely pointless check in modern WordPress.

  • Hi Rarst, i have updated my question. Would you please take a look and provide a suitable solution? Appreciate your response and Thank you so much! :) – Jornes Dec 21 '14 at 12:27

You can do something like this inside your functions.php:

add_action( 'wp_head', 'dynamic_layout' );

function dynamic_layout() {
echo '<style type="text/css">'; 

if ( is_active_sidebar( 'secondary' ) && is_active_sidebar( 'main' ) ) {//If both sidebars are active
#blog {

width: 100%;

<?php } // End If both sidebars are active 

else if ( !is_active_sidebar( 'secondary' ) && is_active_sidebar( 'main' ) ) {/*If main sidebar here*/
.post {
width: 239px;
margin-right: 7px;

<?php }/*End If main sidebar here*/

else if ( !is_active_sidebar( 'secondary' ) && !is_active_sidebar( 'main' )) {/*No sidebar*/

#blog {
float: none;
max-width: 100%;

<?php } /*End No sidebar*/

else if ( is_active_sidebar( 'secondary' ) && !is_active_sidebar( 'main' ) ){/*If only secondary sidebar is here */

float: left;

<?php }   /*End If only secondary sidebar is here */
echo '</style>';
}//End function dynamic_sidebar_layout
  • What if i want to do this in my html file? Because i have a few different sidebar on different pages. So that i can adjust any page i want. Thanks! – Jornes Dec 22 '14 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.