Docs

[Alex]

Hello,

I use a plugin to add a secondary sidebar to this post:

http://superpokemonworld.com/pokemon-go/pokemon-go-get-starter-pikachu/

But on the blog index page, it can’t add the sidebar because it is added only to the content and blog index seems to have some custom template.

I contacted the developer and he said I should edit the template file and add the WP function do_shortcode:

do_shortcode()

But could you direct me on where I should put a shortcode to output the sidebar in the template? What file should I edit? And where to put a shortcode inside?

Also, I’d like to add the sidebar to the category pages and archive and tag pages. Please direct me to their templates as well.

Thanks.

—
Alex

[Rue Nel]

Hello There,

Thanks for writing in! What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

This is where you insert your custom sidebar code.

3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

As this is all custom development with a 3rd party plugin, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Alex]

Hello,

Thank you very much for the code!

I added the new file into the folder you mentioned, but you didn’t mention the place in the file where I should put the shortcode to output the sidebar. Could you hint on that too?

Thanks!

—
Alex

[Christian]

Hey Alex,

We’re sorry but third party plugin integration falls outside the scope of our support. We only could direct you to the file you need. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[Alex]

Hello again,

Thanks for giving me the direction to fix this thing. I managed to do so adding this code to the template you gave me:

<?php echo do_shortcode( '<div class="index-otw-sidebar-right otw-six otw-columns otw-primary-sidebar">[otw_is sidebar=otw-sidebar-4]</div>' ); ?>

But the problem is, the content is basically moved to the left of the secondary sidebar I added and it scaled down turning into a really thin and long column:

http://take.ms/hdm5W

The developer of the plugin said that the structure for the sidebar to be responsive is:

<div class=”otw-row”>
<div class=”otw-eighteen otw-columns”>
The content from the editor goes here.
</div>
<div class=”otw-six otw-columns otw-primary-sidebar”>
The sidebar goes here.
</div>
</div>

This is what makes the sidebar go bellow the content on a mobile device.

Could you give me a hint on how to maintain that structure in your template? I added the code mentioned above as follows:

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <?php echo do_shortcode( '<div class="index-otw-sidebar-right otw-six otw-columns otw-primary-sidebar">[otw_is sidebar=otw-sidebar-4]</div>' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>
  </div>

Thanks.

—
Alex

[Jade]

Hi Alex,

I tried checking the page http://superpokemonworld.com/pokemon-go-get-starter-pikachu/ but I can’t seem to see the section you added through the child theme.

Would you mind placing it back in the code so that we could check it as we might possibly be able to add a custom CSS to fix it.

[Alex]

Hello Jade,

I’m so sorry, the link I meant is this:

http://superpokemonworld.com/blog/

I added the sidebar via child theme only to index pages (like blog index and category index).

Thank you!

—
Alex

[Rad]

Hi there,

Please add this custom CSS as well,

@media ( max-width: 979px ) {

.index-otw-sidebar-right {

float: none;
clear: both;

}

}

Cheers!

[Alex]

Hello Rad,

Thank you very much! You’re the best! You helped me so much you even don’t know. 🙂

—
Alex

[Thai]

You’re most welcome, Alex 🙂

If you need anything else please let us now.

[Alex]

Hello again,

Actually, I’ve got one last question: though the code you provided states that the sidebar should go below when the device screen is no more than 979 px wide, I tested the site with Screensfly and it shows that when the device’s screen is 1024 (like on netbooks) the second sidebar is still visible on the right:

http://take.ms/t71nH

Could you give me a hint how I can make the code work to hide the sidebar on netbooks with 1024 px wide screen too?

Thanks!

—
Alex

[Thai]

Hi Alex,

Please add the following CSS:

@media (max-width: 1024px){
    .index-otw-sidebar-right {
        display: none;
    }
}

Hope it helps 🙂

[Alex]

Hello Thai,

Thank you very much! That helps a lot! 🙂 As usual, you’re the best.

Could you just clarify one point? I don’t get why on devices like netbooks and iPads the main sidebar (which in my case is on the left) goes below the content. I mean, those devices have enough screen capacity to accommodate the content and the sidebar as well.

You see, I thought that if I make my second sidebar disappear under the content, then the main sidebar will be visible (which I wanted to achieve). But now I see that it’s not the case, it’s how your main sidebar is to work on smaller screen devices.

Thanks.

—
Alex

[Rupok]

Hi Alex,

The nano sidebar will be collapsed if the screen resolution is less than 1200px. So no matter which device you are using, if the screen resolution is less than 1200px it will be gone. If you want to show for a smaller screen as well; you can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

body.x-sidebar-content-active, body.x-sidebar-content-active.x-blank-template-sidebar-active[class*="page-template-template-blank"] {
  padding-left: 250px;
}

.x-sidebar.nano {
  border-right: 1px solid rgba(0, 0, 0, 0.075);
  left: 0;
  position: fixed;
  top: 0;
  width: 250px;
}
}

Hope this helps.

[Author]

Posts