How can I add a left sidebar in the realistic theme
Topics related to Realistic theme goes here.

shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

How can I add a left sidebar in the realistic theme

linkPost by shibaa987 » Mon Jul 18, 2016 11:44 am

I am new in this forum and this is my first post.

I was just looking for some help regarding implementing a left sidebar in the Realistic theme?
Can anybody please help me on this?
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How can I add a left sidebar in the realistic theme

linkPost by admin » Tue Jul 19, 2016 12:21 am

Hi shibaa987, welcome to our forum :)
First, please tell me whether you want to add an additional sidebar and place it to the left or you just want to change the default sidebar position?
If you just want to change the default sidebar position, go to Appearance => Customize => Design & Layout and set the Sidebar Settings option to Left Sidebar.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

Re: How can I add a left sidebar in the realistic theme

linkPost by shibaa987 » Tue Jul 19, 2016 6:09 am

Asmi wrote: First, please tell me whether you want to add an additional sidebar and place it to the left or you just want to change the default sidebar position?
If you just want to change the default sidebar position, go to Appearance => Customize => Design & Layout and set the Sidebar Settings option to Left Sidebar.
Hello Asmi,

I want an additional sidebar on the left side of the layout keeping the rightside bar as is.
Could you please help me out and guide me how to do that?
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How can I add a left sidebar in the realistic theme

linkPost by admin » Sun Jul 24, 2016 9:23 pm

Ok! Here we go :)
First, let's create our Custom Sidebar by adding the below code to functions.php file:
	function realistic_child_custom_sidebar() {
		
		register_sidebar( array(
			'name'          => __( 'Custom Sidebar', 'realistic' ),
			'id'            => 'sidebar-custom',
			'description'   => 'Custom Sidebar widget area.',
			'before_widget' => '<aside id="%1$s" class="widget sidebar-widget mdl-card mdl-shadow--2dp mdl-grid mdl-cell mdl-cell--12-col %2$s">',
			'after_widget'  => '</aside>',
			'before_title'  => '<div class="widget-title"><h3>',
			'after_title'   => '</h3><div class="thin-bar"></div></div>',
		) );
	}
	add_action( 'widgets_init', 'realistic_child_custom_sidebar' );
This will create a new widget area called "Custom Sidebar" that will appear in Widgets page.

Next, we need to edit index.php, archive.php, search.php, 404.php, single.php & page.php files as follow ( Yeah that's too many files! ): Let's use index.php as example:
Replace this code:
	<div id="primary" class="content-area mdl-cell mdl-cell--8-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone">
		<main id="main" class="site-main" role="main">
With this code:
	<div id="primary" class="content-area mdl-grid mdl-cell mdl-cell--9-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" style="padding:0;margin:0;">

		<?php if ( is_active_sidebar( 'sidebar-custom' ) ) { ?>
			<div id="sidebar-custom" class="widget-area mdl-cell mdl-cell--3-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" role="complementary">
				<?php dynamic_sidebar( 'sidebar-custom' ); ?>
			</div>
		<?php } ?>

		<main id="main" class="site-main mdl-cell mdl-cell mdl-cell--9-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" role="main">
Do the same for the rest of template files mentioned above.

Finally, open sidebar.php file and replace this code:
 <div id="secondary" class="widget-area mdl-cell mdl-cell--4-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" role="complementary">
	<?php dynamic_sidebar( 'sidebar' ); ?>
</div><!-- #secondary -->
With this code:
<div id="secondary" class="widget-area mdl-cell mdl-cell--3-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" role="complementary">
	<?php dynamic_sidebar( 'sidebar' ); ?>
</div><!-- #secondary -->
( We just changed 4 to 3 )

That's it! By the way, sorry for my late answer.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

Re: How can I add a left sidebar in the realistic theme

linkPost by shibaa987 » Mon Aug 01, 2016 10:13 am

Hello Asmi,

I really appreciate your support. Yes, the response was a little late but I have to understand that you might be a busy person as you might be answering other people too and you might be busy developing some other things simultaneously.

Anyway, My primary question is: The main text area is shrinked a bit. Is there anyway to stretch the text area with the left and right sidebar?
shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

Re: How can I add a left sidebar in the realistic theme

linkPost by shibaa987 » Tue Aug 02, 2016 12:33 pm

I have updated the following to occupy the full width:

.site-content {
max-width: 100%;
}

Is that OK or will it create some other problems ??
shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

Re: How can I add a left sidebar in the realistic theme

linkPost by shibaa987 » Thu Aug 04, 2016 10:05 am

Hi Asmi,

Once more I wanted to Thank you for your great effort to accomplish my wish to add a new left sidebar on the Realistic wordpress theme.

Here I found a minor bug after updating the search.php file as per the above guide. Because this is a public forum and someone might be following this thread will have the same issue that I had faced.

The primary issue was:
After updating with the above code everything on my Realistic theme was working just perfect except the search results. In the search results the right sidebar was coming after the main content area and not beside.

The issue was, Unlike other files (index.php, 404.php ...) the search.php does not have a div tag with primary id rather it has a section tag.

To Fix this issue Replace the following code in search.php file:
    <section id="primary" class="content-area mdl-cell mdl-cell--8-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone">
      <main id="main" class="site-main" role="main">
With the following
    <section id="primary" class="content-area mdl-grid mdl-cell mdl-cell--9-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" style="padding:0;margin:0;">

      <?php if ( is_active_sidebar( 'sidebar-custom' ) ) { ?>
         <div id="sidebar-custom" class="widget-area mdl-cell mdl-cell--3-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" role="complementary">
            <?php dynamic_sidebar( 'sidebar-custom' ); ?>
         </div>
      <?php } ?>

      <main id="main" class="site-main mdl-cell mdl-cell mdl-cell--9-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone" role="main">
jeni soloman

Banned Member Rank
Posts: 1
Joined: Fri Aug 05, 2016 7:15 am
Display Name: jeni soloman
Location: Glasgow

Re: How can I add a left sidebar in the realistic theme

linkPost by disuja045 » Fri Aug 05, 2016 7:20 am

[******] is a vast field, every student is pressured with the burden of competing with the other. Studies, extra-curricular activities along with the added pressure of becoming an established individual are too much to deal with.

ADMIN NOTICE: Spamming is strictly prohibited here. You've been banned from using our forum. Contact us if you want to restore your account.
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How can I add a left sidebar in the realistic theme

linkPost by admin » Fri Aug 05, 2016 10:23 pm

shibaa987 wrote:Hello Asmi,

I really appreciate your support. Yes, the response was a little late but I have to understand that you might be a busy person as you might be answering other people too and you might be busy developing some other things simultaneously.

Anyway, My primary question is: The main text area is shrinked a bit. Is there anyway to stretch the text area with the left and right sidebar?
I promise I will do my best to provide quicker and better support. Sorry for any inconvenience :oops:
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How can I add a left sidebar in the realistic theme

linkPost by admin » Fri Aug 05, 2016 10:41 pm

shibaa987 wrote:I have updated the following to occupy the full width:

.site-content {
max-width: 100%;
}

Is that OK or will it create some other problems ??
Yes! That's a good decision :D Since you will be using 3 columns in your website's layout. You should make use of any available pixel.
But it's better to always set max-width to fixed value because you cannot expect which resolution your visitors do have. Some people use 3 monitors at the same time. 3 Full-HD monitors have a resolution of 3X1080 = 3240px :shock:
So my suggestion is to use this code instead of yours:
.site-content {
	max-width: 1200px;
}
.sidebar-widget {
	max-width: inherit;
}
You may change 1200px to 1300px but many users still using 1200px monitors. I know that 1200px still the standard resolution of many tablets & smartphones but small devices by default have a high DPI (dots per inch) or PPI (pixels per inch) that's why a 2K Samsung Galaxy S6 phone still render websites just like 480px phone ( Galaxy S6 has PPI set to 577ppi while Galaxy S2 has it set to 217ppi )
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Fri Aug 23, 2019 7:55 pm