[Theme: Yoko] Sidebar Headache / Please Help

I’ve been continuing to try and fix this issue over the last two hours, I have come across many websites that have resolved the issue somehow. I’ve opened their CSS stylesheet and a lot have hidden the secondary sidebar, some have deleted the code entirely, but I can’t access their sidebar.php to see the final step in the process.

If anybody could please find a way to fix this for me, and those other users who have been trying to fix this (the forums search option yields a handfull of people who have asked the same query and never been answered.)

One website that has solved it is: https://elschy.de/

Looking at that last link you provided, I think to expand the width of the content and eliminate the middle column, just use some CSS.

Also a little child theme functions.php file will clean up the Sidebar widget area.

Create wp-content/themes/yoko-child/style.css and put in these lines:

/*
Theme Name: Yoko Child Theme
Author: Self-Help WordPress User
Template: yoko
*/

@import url("../yoko/style.css");

/* Start child theme CSS here */

#content {
        width: 100%;
        float: left;
        margin-right: 4%
}
#secondary {
        display: none;
}
#tertiary {
        width: 21%;
        float: right;
        overflow: hidden;
}

I’m really pushing the code line limit here, so just in case here is the Pastebin link https://pastebin.com/DEEjJ6YU

Now comes the fun part (which I understand better than CSS). Create a wp-content/themes/yoko-child/functions.php file and copy this into it.

<?php

add_action( 'init' , 'mh_unregister_sidebar' , 11 );

function mh_unregister_sidebar() {
        unregister_sidebar( 'sidebar-1' );
        unregister_sidebar( 'sidebar-2' );

        register_sidebar( array (
                'name' => __( 'Sidebar', 'yoko' ),
                'id' => 'sidebar-2',
                'description' => __( 'One Sidebar Only', 'yoko' ),
                'before_widget' => '<aside id="%1$s" class="widget %2$s">',
                'after_widget' => "</aside>",
                'before_title' => '<h3 class="widget-title">',
                'after_title' => '</h3>',
                )
        );

}

And the Pastebin link for that is https://pastebin.com/gvBi7U7n

The this removes the old sidebars and creates a new sidebar-2 with a different label and description.

Technically, you can do without the functions.php file but you’d need to remember that Sidebar 1 never gets displayed. ??

Thanks so much for your clear response, I’m sure this will help many many people who have been searching for an answer. I’ve moved on to a different theme as I was growing weary and didn’t think I’d get a reply (judging on past users who had the same problem, no slight against the community). Looking at what you’ve done there, I don’t think I would have figured that out on my own.

Thanks again ^_^

Actually the above code works..But when the themes resizes itself for mobile devices..the sidebar doesn’t look cramped..any suggestion for this ? Or I am the only one having this issue ?

My blog was already mentioned. So I decided to publish my yoko child theme. You can download my child theme under https://elschy.de/-child_yoko

best regards
elschy

I know this is an old post, but there is a much easier way of going about it. I managed to remove the third column and also stretch the second column to fit the space with just a few CSS tweaks.

These were done in the stylesheet.css file:

ORIGINAL CODE:

#main {
	width: 74.59%;
	float: left;
	overflow: hidden;
}
#content {
	width: 75.669%;
	float: left;
}
#secondary {
	width: 17.275%;
	margin-left:7.054%;
	float: left;
}

#tertiary {
	width: 23.775%;
	float: right;
	overflow: hidden;
}

MY CHANGES:

#main {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	width: 65%;
	float: left;
}
#secondary {
	width: 25%;
	margin-left:7.054%;
	float: left;
}
/*
#tertiary {
	width: 23.775%;
	float: right;
	overflow: hidden;
}*/

By Hiding the tertiary bar and then fixing the widths of the main, content, and secondary divs. (With the secondary and content divs you need to just make sure that you are accounting for the margin-left in the percentages.)

It seemed to work fine for me here.

Although, and this is a big one. I have yet to test it on mobile and tablets. This is a quickfix for the browser based version…. Will let you know once i have done a couple more tests.

Thanks TKoen, that helped me so much ??

Can I just add though in case it helps anyone else, I had to remove the ‘tertiary’ code from sidebar.php for the above css fix to work properly.

No trouble!

Odd that you had to remove the ‘tertiary’ code.. It seemed happy with me commenting out the CSS… But at least you got it working!

I used TKoen’s code to remove a sidebar, ( 3rd previous post).

It is fine when I am looking through a browser, but when I reduce the browser to test for mobile devices the content is not full width and the sidebar stays on the left rather than change position to go below the main content.

I looked at TKeon link to his website and that theme behaves correctly: when the browser is reduced for mobile devices the sidebar goes below the main content and the main content is 100% wide.

Can anyone help me? Any ideas?

Here are a couple of links:
https://tabla-art.com/deodesign/
https://tabla-art.com/deodesign/?cat=12

Below is the code I took from TKoen:

#main {
	width:100%;
	float:left;
	overflow:hidden;
}

#content {
	width:65%;
	float:left;
}

#secondary {
	width:25%;
	margin-left:7.054%;
	float:left;
}

Regards

Hello:

I’m super new to this website design thing, I tried changing the CSS stylesheet to the above code, I tried both deodesign and Tkoen’s suggestions, I update the code and go to my website and nothing has changed.. am I missing a step? Any assistance would be greatly appreciated!
https://www.fullcirclewellnesscentre.ca

I’m simply trying to remove the second sidebar and increase the content and sidebar 1 size.

Be well,

As you’re not contributing to the original poster, consider posting your own thread on the issue.

please help me in making change in css so that the theme looks like

[sidebar1][content][sidebar2]

both sidebar should be of same width.

thanks in advance

elschy I like your child theme. I am wondering if it solves the issue I am having. The date takes up a whole column for itself to the left of my posts. I’m using a non-static page, with posts. Ideally I’d like to hide post dates but can’t find out how to do this.

Do you guys know a way to move the date to the post area and not off to the side? Or at a minimum have the date use less space?

Thankyou.

Closing thread.

Create your own thread for support with your own issues.