Jobifier: Add Sidebar To Single Post

A sidebar can be used to displaying several important message such as your Ads, Facebook Fan Page Widget, Information, etc.

Unfortunately this thing isn’t available on Jobifier. There is no sidebar available when you check the single post while using this theme. At this tutorial, i will tell you a trick about how to make it work.

To do it, you will need to do several modifications and you will need to access your FTP using a third party software such as FileZilla, etc.

Step #1

At this first step you need to add a toggle to set the sidebar on/off. In case you don’t want to have a sidebar on some article, you can make it using this toggle.

To do this modification, you need to modify a file named theme-options.php. This file can be found via FTP at directory: wp-content → themes → jobifier → includes.

Open the file and find out this code:

if ( ( 'post' == get_post_type()) || ( !get_post_type() ) ) {

This code can be found around line 945. Once you find it, put this code right below it:

  $colabs_metaboxes[] = array (  "name"  => $shortname."_show_sidebar",
					            "std"  => "",
					            "label" => __("Activate Sidebar","colabsthemes"),
					            "type" => "checkbox",
					            "desc" => __("","colabsthemes"));
								

And done!

activate sidebar

You can check the modification result by editing or adding a new post, you will have a new option named Activate Sidebar.

Step #2

At this second step you need to create a new option at the widget page (WordPress dashboard → Appearance → Widgets). To do this modification you need to modify a file named theme-sidebar-init.php. This file can be found via FTP at directory: wp-content → themes → jobifier → includes.

Open the file and find out this code:

// Footer Sidebar
    register_sidebar(array(
      'name'          => sprintf(__('Footer Sidebar','colabsthemes') ),
      'id'            => 'sidebar-footer',
      'description'  => __('Appear on the footer section', 'colabsthemes'),
      'before_widget' => '
<aside id="%1$s" class="widget column col4 %2$s">',
      'after_widget' => '</aside>

',
      'before_title' => '
<h4 class="widget-title">',
      'after_title' => '</h4>

 '
    ));   

Once you find it, put this code just below it:

register_sidebar(array(
      'name'          => sprintf(__('Post Sidebar','colabsthemes') ),
      'id'            => 'sidebar-post',
      'description'  => __('Appear on the post section', 'colabsthemes'),
      'before_widget' => '
<aside id="%1$s" class="widget column col12 %2$s">',
      'after_widget' => '</aside>

',
      'before_title' => '
<h4 class="widget-title">',
      'after_title' => '</h4>

 '
    ));   

And done!

You can check the modification result by going to: WordPress dashboard → Appearance → Widget. You will have a new sidebar named post sidebar.

Step #3

At this third step you need to synchronize the option you made at the first step and the sidebar you made at the second step. The result of this step will be like this one:

sidebar result

To do this modification, you need to modify a file named single.php. This file can be found via FTP at directory: wp-content → themes → jobifier.

Open the file and replace all codes you find with the one below:

<?php get_header(); ?>

<div class="page-title-section">
  <div class="container">
    <div class="row">
      <h1 class="page-title entry-title">
        <?php _e('Journal', 'colabsthemes'); ?>
      </h1>
    </div>
  </div>
</div><!-- .page-title-section -->

<section class="main-section">
  <div class="container">
    <div class="row">
  
	<?php
		 $colabs_single_sidebar = get_post_meta($post->ID, 'colabs_show_sidebar', true);
		 if($colabs_single_sidebar == 'true') {
	?>
      <div class="main-content column col8">
	
	<?php }else{ ?>
	  <div class="main-content column col12">	
	<?php } ?>
        
        <?php while( have_posts() ) : the_post(); 
          $post_media = '';
          $single_top = get_post_custom_values("colabs_single_top");
          if( $single_top ) {
            switch ( $single_top[0] ) {
              // Single Image
              case 'single_image':
                $image_url = get_post_meta( get_the_id(), 'image', true );
                $image_id = colabs_get_attachment_id_from_url( $image_url );

                if( $image_id ) {
                  $post_image = vt_resize( $image_id, '', 1170, '', true );
                  $post_media = '<img src="'. $post_image['url'] .'">';
                } elseif( $image_url ) {
                  $post_media = '<img src="'. $image_url .'">';
                }
                break;

              // Video Embed
              case 'single_video':
                $embed = colabs_get_embed('colabs_embed',1170,434,'single_video',$post->ID);
                if (''!=$embed){
                  $post_media = $embed;
                }
                break;
            }
          }

          // If empty get from post thumbnail
          if( $post_media == '' ) {
            if( has_post_thumbnail() ) {
              $thumb_id = get_post_thumbnail_id();
              $thumb_data = vt_resize( $thumb_id, '', 1170, '', true );
              $post_media = '<img src="'. $thumb_data['url'] .'">';
            }
          }
          $post_media_class = ($post_media != '') ? 'has-post-image' : 'no-post-image';

          ?>

          <div <?php post_class('post entry-post clearfix ' . $post_media_class ); ?>>
            <div class="entry-post-date"><?php echo get_the_date(); ?></div>

            <?php
              // Post Media
              // ----------
              if( $post_media != '' ) {
                echo '<div class="entry-media">';
                echo $post_media;
                echo '</div>';
              }

              // Post Category
              // -------------
              echo '<div class="entry-post-category">' . get_the_category_list( ', ', '', $post->ID ) . '</div>';
            ?>

            <div class="entry-post-content">
              <h1 class="entry-title"><?php the_title(); ?></h1>
              
              <p class="entry-post-author">
                <?php 
                  global $authordata;
                  $author_link = sprintf( '<a href="%1$s" rel="author">%2$s</a>', get_author_posts_url( $authordata->ID, $authordata->user_nicename ) , get_the_author() );
                  printf( _x( 'By %s', 'Post Author name', 'colabsthemes' ), $author_link );
                ?>
              </p>
              
              <div class="entry-content">
                <?php the_content(); ?>

                <?php wp_link_pages(array('before' => __('<p class="pagination-single"><strong>Pages:</strong>','colabsthemes'), 'after' => '</p>', 'next_or_number' => 'number')); ?> 

                <?php colabs_ad_gen(); ?>
              </div>
  
              <div class="entry-post-share clearfix">
                <h5><?php _e('Share This', 'colabsthemes'); ?></h5>
                <?php echo colabs_share(); ?>
              </div>

              <?php comments_template(); ?>
            </div><!-- .entry-post-content -->

          </div>

        <?php endwhile; ?>

      </div><!-- .main-content -->

	<?php
		 $colabs_single_sidebar = get_post_meta($post->ID, 'colabs_show_sidebar', true);
		 if($colabs_single_sidebar == 'true') {
	?>  
		<div class="column col4">
			<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-post') ) : ?>
			<?php endif;?>
		</div>
    <?php } ?>
  
    </div>
  </div>
  
 
</section>
<!-- /.main-section -->

<?php get_footer(); ?>

And that’s it! You are done with the modification.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s