Topic: Create Sidebar for Post Category | Themeco Community

← 1 … 3 4 5 →

Author

Posts

April 8, 2015 at 6:03 am #244559

Moderator

Hi,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

April 9, 2015 at 8:19 am #245522

Kike H

Participant

Hello!

I was trying to do the same, but i have some problems with that, i don’t know why, but it changes the view of the SB in the single post

Look:

Category page: http://gennymobility.vl15617.dinaserver.com/noticias/

Single post: http://gennymobility.vl15617.dinaserver.com/acuerdo-con-segway-inc-y-deka-research-para-la-distribucion-de-genny-en-europa/

This is my functions.php:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================

function post_category_add_meta_field() {
  // this will add the custom meta field to the add new term page
  ?>
  <div class="form-field">
    <label for="term_meta[category-sidebar]"><?php _e( 'Item\'s Sidebar', '__x__' ); ?></label>
    <select name="term_meta[category-sidebar]" id="term_meta[category-sidebar]"><?php echo post_category_sidebar_options(); ?></select>
    <p class="description"><?php _e( 'Select Sidebar','__x__' ); ?></p>
  </div>
<?php
}

function post_category_edit_meta_field($term) {
 
  // put the term ID into a variable
  $t_id = $term->term_id;
 
  // retrieve the existing value(s) for this meta field. This returns an array
  $term_meta = get_option( "taxonomy_$t_id" ); ?>
  <tr class="form-field">
  <th scope="row" valign="top"><label for="term_meta[category-sidebar]"><?php _e( 'Item\'s Sidebar', '__x__' ); ?></label></th>
    <td>
    <select name="term_meta[category-sidebar]" id="term_meta[category-sidebar]"><?php echo post_category_sidebar_options( $term_meta['category-sidebar'] ); ?></select>
      <p class="description"><?php _e( 'Select Sidebar','__x__' ); ?></p>
    </td>
  </tr>
<?php
}

add_action( 'category_edit_form_fields', 'post_category_edit_meta_field', 10, 2 );
add_action( 'category_add_form_fields', 'post_category_add_meta_field', 10, 2 );

function save_post_category_custom_meta( $term_id ) {
  if ( isset( $_POST['term_meta'] ) ) {
    $t_id = $term_id;
    $term_meta = get_option( "taxonomy_$t_id" );
    $cat_keys = array_keys( $_POST['term_meta'] );
    foreach ( $cat_keys as $key ) {
      if ( isset ( $_POST['term_meta'][$key] ) ) {
        $term_meta[$key] = $_POST['term_meta'][$key];
      }
    }
    // Save the option array.
    update_option( "taxonomy_$t_id", $term_meta );
  }
}  
add_action( 'edited_category', 'save_post_category_custom_meta', 10, 2 );  
add_action( 'create_category', 'save_post_category_custom_meta', 10, 2 );

function post_category_sidebar_options ( $default ) {
  $sidebars = get_option( 'ups_sidebars' );
  $option = '<option value="sidebar-main" '.( !isset($default) || empty($default) || $default == 'sidebar-main' ? ' selected ' : '' ).'>Default</option>';
  foreach ( $sidebars as $id => $sidebar ) {
      $option .= '<option value="'.$id.'" '.( $id==$default ? ' selected ' : '' ).'>'.$sidebar['name'].'</option>';
  }
  return $option;
}

And my wp-single.php

<?php

// =============================================================================
// VIEWS/ICON/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Icon.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
<div class="x-main-right" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( 'icon', 'content', get_post_format() ); ?>
      <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

  </div>

 <aside class="x-sidebar left" role="complementary">

<?php

$terms = get_the_terms( get_the_ID(), 'category' );

if ( !isset( $terms ) && count( $terms ) == 0 ) $sidebar = 'sidebar-main';
else {

    $term = array_pop( $terms );
    $setting = get_option( "taxonomy_".$term->term_id );
    $sidebar = $setting['category-sidebar'];
}

dynamic_sidebar( $sidebar );

?>

</aside>
<?php get_footer(); ?>

Any ideas?

April 9, 2015 at 11:30 am #245644

Zeshan

Member

Hi Kike,

Thanks for writing in!

Please add following CSS under Custom > CSS in the Customizer:

@media (min-width: 1200px) {
    .x-sidebar {
      padding: 20px;
    }
}

Thanks!

April 9, 2015 at 12:36 pm #245676

Kike H

Participant

Hi,

Thank you, but it soes not work,

as i see with the inspector, the sidebar that works
http://gennymobility.vl15617.dinaserver.com/noticias/
has the class “x-sidebar-nano” which has an inner container with the “max with nano-content” that has the padding

lement.style {
  right: -16px;
}
gennymobility.vl15617.dinaserver.com/media="all"
@media (min-width: 1200px)
.x-sidebar .max.width {
  padding-left: 20px;
  padding-right: 20px;
}
gennymobility.vl15617.dinaserver.com/media="all"
.x-sidebar .max.width {
  padding-top: 5%;
  padding-bottom: 5%;
}
gennymobility.vl15617.dinaserver.com/media="all"
.nano .nano-content {
  overflow: scroll;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
gennymobility.vl15617.dinaserver.com/media="all"
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
user agent stylesheetdiv {
  display: block;
}
Inherited from body.blog.logged-in.admin-bar.x-icon.x-navbar-fixed-top-active.x-full-width-layout-active.x-sidebar-content-active.x-blog-standard-active.x-post-meta-disabled.x-portfolio-meta-disabled.wpb-js-composer.js-comp-ver-4.3.5.vc_responsive.x-v3_2_3.x-child-theme-active.x-shortcodes-v3_0_5.customize-support
body {
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  color: #777777;
  background-color: #ffffff;
}
gennymobility.vl15617.dinaserver.com/media="all"
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #566471;
  background: #f2f2f2;
}
Inherited from html.js.no-touch.cssanimations.csstransforms.csstransforms3d.csstransitions
gennymobility.vl15617.dinaserver.com/media="all"
html {
  overflow-x: hidden;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
Pseudo ::-webkit-scrollbar element
gennymobility.vl15617.dinaserver.com/media="all"
.has-scrollbar .nano-content::-webkit-scrollbar {
  visibility: visible;
}
gennymobility.vl15617.dinaserver.com/media="all"
.nano .nano-content::-webkit-scrollbar {
  visibility: hidden;
}

position0
0margin‒
‒border‒
‒padding16.938
20315 × 464.12520
16.938‒
‒‒
‒-16
0

.
The other sidebar

http://gennymobility.vl15617.dinaserver.com/mi-vida-con-genny-ha-cambiado-totalmente/

Has the class “x-sidebar left”, with no inner container…

April 9, 2015 at 1:10 pm #245695

Kike H

Participant

OK, it works!!!!

BUT

Only if you add the code in the custom.css of the child theme, NOT in the Customizer.

I have not the slightest idea why…

Anyway, adding custom css in the customizer does not seem to be a great idea

April 9, 2015 at 6:04 pm #245884

Nico

Moderator

Glad to hear that!

Both ways should work using customizer or custom css in your child theme style.css. However the best way to do something custom CSS is through Child Theme.

Let us know if you need anything else.

Thanks.

May 14, 2015 at 11:27 am #273657

evanarc

Participant

Hi–

You guys helped me with this before, but I had to rebuild my site and I lost the changes. I’m trying to get the individual post sidebars to match the category sidebar for that post.

I edited the functions.php and wp-single.php per the earlier instructions, but it’s again shoving all of the content to the right side. See http://thefbgpeach.wordforhire.com/live-at-luckenbach/ for an example.

My wp-single.php code looks like the below. What did you change last time to get this to work?

<?php

// =============================================================================
// VIEWS/ETHOS/WP-SINGLE.PHP
// —————————————————————————–
// Single post output for Ethos.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), ‘_x_post_layout’, true );

<?php get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>
<?php x_get_view( ‘ethos’, ‘content’, get_post_format() ); ?>
<?php x_get_view( ‘global’, ‘_comments-template’ ); ?>
<?php endwhile; ?>

</div>

<?php

$terms = get_the_terms( get_the_ID(), ‘category’ );

if ( !isset( $terms ) && count( $terms ) == 0 ) $sidebar = ‘sidebar-main’;
else {

$term = array_pop( $terms );
$setting = get_option( “taxonomy_”.$term->term_id );
$sidebar = $setting[‘post-category-sidebar’];
}

dynamic_sidebar( $sidebar );

</aside>
</div>
</div>

<?php get_footer(); ?>

May 14, 2015 at 4:32 pm #273899

Rad

Moderator

Hi Eva,