[bryan1976Participant]

Hi,

I am sure I am missing something obvious here but cannot see the wood from the trees! I have searched the forum but perhaps there is something not right in my setup.

I would like a sidebar on only my shop pages, to allow a filter of ‘Brand’ and ‘Price’ for my products.

I am using Icon
Wordpress and theme/cornerstone all up to date.

URL is http://dev.theaudiobarn.co.uk/

I will supply credentials below.

Many thanks.

[bryan1976Participant]

This reply has been marked as private.

[Prasant RaiModerator]

Hello Bryan,

Thanks for writing in!

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Add the following code to your functions.php file in your child theme first:

function x_my_custom_widgets_init() {

  register_sidebar( array(
    'name'          => __( 'My Shop Sidebar', '__x__' ),
    'id'            => 'sidebar-my-custom-shop',
    'description'   => __( 'Appears on the index shop page.', '__x__' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4 class="h-widget">',
    'after_title'   => '</h4>',
  ) );

}

add_action( 'widgets_init', 'x_my_custom_widgets_init' );

Then you’ll need to update the /framework/views/integrity/wp-sidebar.php file from your parent theme by copying it to your child theme and modifying the markup. Once you have copied the file over correctly by following the instructions in the Knowledge Base article above, you will need to update this file’s output with the following markup:

<?php

$blog_layout      = get_theme_mod( 'x_blog_layout' );
$archive_layout   = get_theme_mod( 'x_archive_layout' );
$shop_layout      = get_theme_mod( 'x_woocommerce_shop_layout_content' );
$portfolio_layout = get_theme_mod( 'x_portfolio_layout' );
$main_layout      = get_theme_mod( 'x_integrity_layout_content' );

if ( $main_layout != 'full-width' ) {
  if ( is_home() ) {
    $layout = $blog_layout;
  } elseif ( is_archive() ) {
    if ( is_post_type_archive( 'x-portfolio' ) ) {
      $layout = $portfolio_layout;
    } elseif ( function_exists( 'is_shop' ) && is_shop() ) {
      $layout = $shop_layout;
    } else {
      $layout = $archive_layout;
    }
  } elseif ( function_exists( 'is_product' ) && is_product() ) {
    $layout = 'full-width';
  } else {
    $layout = $main_layout;
  }
} else {
  $layout = $main_layout;
}

?>

<?php if ( is_page_template( 'template-layout-content-sidebar.php' ) ) : ?>

  <aside class="x-sidebar right" role="complementary">
    <?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
      <?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
    <?php else : ?>
      <?php dynamic_sidebar( 'sidebar-main' ); ?>
    <?php endif; ?>
  </aside>

<?php elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) : ?>

  <aside class="x-sidebar left" role="complementary">
    <?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
      <?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
    <?php else : ?>
      <?php dynamic_sidebar( 'sidebar-main' ); ?>
    <?php endif; ?>
  </aside>

<?php elseif ( function_exists( 'is_shop' ) && is_shop() ) : ?>

  <aside class="x-sidebar left" role="complementary">
    <?php dynamic_sidebar( 'sidebar-my-custom-shop' ); ?>
  </aside>

<?php elseif ( $layout != 'full-width' ) : ?>

  <aside class="<?php x_integrity_sidebar_class(); ?>" role="complementary">
    <?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
      <?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
    <?php else : ?>
      <?php dynamic_sidebar( 'sidebar-main' ); ?>
    <?php endif; ?>
  </aside>

<?php endif; ?>

After you have done this, you can add widgets to your sidebar widget area for your shop under Appearance > Widgets in the admin area.

Thanks!

[bryan1976Participant]

Hi,

Thanks for your email.

Step one is fairly easy and I have entered the code into my child themes function.php

However back in the parent theme ‘X’ I cannot locate /framework/views/integrity/wp-sidebar.php to copy this accross to the child theme.

Please advise.

Thanks,

Bryan

[Prasant RaiModerator]

Hello Bryan,

Thanks for updating the thread!

As you are running Icon stack on website, please navigate to /framework/views/icon/wp-sidebar.php. Here is a screencast that will help you to locate the file:

http://screencast.com/t/gG009VXKg

Hope that helps.

Thanks.

[bryan1976Participant]

OK so I have followed these instructions 100% I think.

I can see the widget area now named ‘My Shop Sidebar’ and I have attached the screenshot.

However the widgets I have added to this are not visible in my store??

I want to see a sidebar with filters on ‘category’ and ‘product’ pages.

I do not want ANY sidebar on other pages.

Many thanks for your help.

Bryan

[ChristopherModerator]

Hi there,

Please remove provided code.
Please select one of content layouts with sidebar from Customize -> Layout and design. For other pages that you don’t want to to display sidebar change page template under cornerstone settings tab.
Navigate to Appearance -> Sidebar and add custom sidebar, check the box to display it in shop page.

If you want to display sidebar on product pages as well, add following code in child theme’s functions.php file :

//Add sidebar to single product
// =============================================================================

if ( ! function_exists( 'x_get_content_layout' ) ) :
  function x_get_content_layout() {

    $stack          = x_get_stack();
    $content_layout = x_get_option('x_layout_content', 'content-sidebar' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content','sidebar' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout', 'sidebar' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }

    return $layout;

  }
endif;

To display specific sidebar on product pages, add this in functions.php as well :

// Add custom sidebar to product page//
//===================================================
add_filter( 'ups_sidebar', 'product_sidebar', 9999 );

function product_sidebar ( $default_sidebar ) {
if ( x_is_product() ) return 'ups-sidebar-custom-sidebar'; //Must match the ID of your target sidebar
return $default_sidebar;
}

Hope it helps.

[bryan1976Participant]

This reply has been marked as private.

[JadeModerator]

Hi Bryan,

Kindly provide us with your FTP details so that we could assist you further. Thank you.

[bryan1976Participant]

This reply has been marked as private.

[LelyModerator]

Hello Bryan,

Thank you for the credentials. Upon checking, you have missing closing curly brace at the end of your function.
Please open your child theme’s functions.php file via Cpanel.

At the end, the last two lines is this:

      echo '</div>';

    }

There should be two closing curly brace like this:

      echo '</div>';

    }
}

Please update the file and it should work after that.

Cheers!

[bryan1976Participant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

I’ve edited your theme and added this custom function:

// Add custom sidebar to product page//
//===================================================
add_filter( 'ups_sidebar', 'product_sidebar', 9999 );

function product_sidebar ( $default_sidebar ) {
  if ( x_is_product() ) {
    return 'ups-sidebar-shop-sidebar'; //Must match the ID of your target sidebar
  }
  return $default_sidebar;
}

The sidebar on the hand is displaying in the shop page. Since you are using icon stack, the sidebar will appear in the far right of the page (http://prntscr.com/bb9f67).

[bryan1976Participant]

Hi,

Thanks…I did manage to get this effect, but I want it to not overlap the header and footer?

Is this possible please?

Cheers,

Bryan

[RadModerator]

Hi there,

Would you mind providing the screenshot of overlapping footer and header?

Thanks!

[Author]

Posts