Widgets don't save - what am I doing wrong?

[Lena]

I’m trying to create two widget areas in my theme, they show up at the Widgets screen, I add widgets to the areas, save and everything looks fine. But if I leave Widgets screen and come back, the widget areas are empty, and the widgets I added before are now moved to Inactive Widgets, and of course there’s no output. I works fine with ClassicPress Theme, so I must have missed something somewhere… But I can’t figure out what or where!

Code in functions.php:

//widget areas
if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => 'Left column',
        'id' => 'leftCol',
        'before_widget' => '<div>',
        'after_widget' => '</div>'
    ));
    register_sidebar(array(
        'name' => 'Right column',
        'id' => 'rightCol',
        'before_widget' => '',
        'after_widget' => ''
    ));
}

And in the template file:

<?php get_header() ?>
		<div class="row">
			<div class="col-sm-6 widget-area">
			<?php if(is_active_sidebar('leftCol')) : ?>
				<div class=" widget-container border rounded shadow-sm p-3">
				<?php dynamic_sidebar('leftCol') ?>
				</div>
			<?php endif ?>
			</div>
			<div class="col-sm-6 widget-area">
			<?php if(is_active_sidebar('rightCol')) : ?>
				<div class="widget-container border rounded shadow-sm p-3">
				<?php dynamic_sidebar('rightCol') ?>
				</div>
			<?php endif ?>
			</div>
		</div>
<?php get_footer() ?>

Is there anything more I should include? I’ve compared the files with the ones in ClassicPress Theme, but can’t find anything that seems relevant. Still, I must have missed something, so any help would be much appreciated.

[raygulick]

I don’t spot anything obviously wrong, but give this a try in your functions file:

1. remove (or comment out while trying this approach) the first line if(function_exists('register_sidebar')){ (this ensures backwards compatibility with earlier versions of WP, which really isn’t necessary)
2. replace that line with function cp_widgets_init() {
3. AFTER the closing brace, add this line: add_action('widgets_init', 'cp_widgets_init'); (this runs cp_widgets_init() on the widgets_init hook)

[Lena]

Thank you for answering, I tried your suggestion but that didn’d do the trick either.

Widgets aren’t really necessary to me right now, there are other ways to achieve what I want for the theme, I just find it hard to leave an unsolved problem.

[timkaye]

I think your problem is not with the code you have provided here. Like Ray, apart from an unnecessary space in the first iteration of <div class=" widget-container, I don’t see anything wrong with your code (and that space wouldn’t cause your problem).

Are you getting any JavaScript errors in your browser console?

[Lena]

No, no errors exept for something about a logo image missing. That warning has been there from start, and hasn’t anything to do with this, I guess? The complete console message (if you can read out anything strange about it):

"GET
https://utkast.omullans.se/wp-includes/images/w-logo-blue-white-bg.png
[HTTP/1.1 404 Not Found 0ms]

GET
https://utkast.omullans.se/wp-includes/images/w-logo-blue-white-bg.png
Status
404
Not Found
VersionHTTP/1.1
Överfört3,15 kB (9,21 kB storlek)
Referreringspolicystrict-origin-when-cross-origin
DNS-uppslagningSystem

Cache-Control
	no-cache, must-revalidate, max-age=0
Connection
	keep-alive
Content-Encoding
	gzip
Content-Length
	3152
Content-Type
	text/html; charset=UTF-8
Date
	Thu, 31 Oct 2024 08:09:48 GMT
Expires
	Wed, 11 Jan 1984 05:00:00 GMT
Link
	<https://utkast.omullans.se/wp-json/>; rel="https://api.w.org/"
Server
	nginx
Vary
	Accept-Encoding,User-Agent
X-Powered-By
	PHP/8.0.30
	
Accept
	image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Accept-Encoding
	gzip, deflate, br, zstd
Accept-Language
	sv-SE,sv;q=0.8,en-US;q=0.5,en;q=0.3
Connection
	keep-alive
Cookie
	wp-settings-1=libraryContent%3Dbrowse%26imgsize%3Dfull%26advImgDetails%3Dshow%26editor%3Dtinymce%26widgets_access%3Doff; wp-settings-time-1=1730289162; wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_e4e52a972ebce3d464a830803e67025b=Lena%7C1730375158%7CNhrAsJJLY94PE8C5xy4PB2sC1cUXlATH0lYpMyZTZA3%7C410af31b9c9096f2798aabc7c4902822b4b9734a3270ba0a44f9e5918084ce36
Host
	utkast.omullans.se
Referer
	https://utkast.omullans.se/kontakt/
Sec-Fetch-Dest
	image
Sec-Fetch-Mode
	no-cors
Sec-Fetch-Site
	same-origin
User-Agent
	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

[Lena]

Thinking about it, viewing the page’s console wouldn’t help, as the problem is at the widget settings.
So, I added a widget to a widget area (drag and drop), and got this message:

MouseEvent.mozPressure är föråldrad. Använd PointerEvent.pressure istället. tinymce.min.js:2:8857
(Translation: “är föråldrad” = “is deprecated”, “Använd … istället” = “Use … instead”.

Another try in accessibilty mode, got this message:

JQMIGRATE: Migrate is installed, version 3.3.2 load-scripts.php:5:709

[timkaye]

Hmm, that’s not causing this problem. Is this a child or parent theme?

[Lena]

It’s a parent, made by me. It uses Bootstrap, so there’s quite a lot of javascript. I’ll try to disconnect BS later on, to see if it make any difference.

But the theme doesn’t touch anything at in the admin area, so it seems odd that Bootstrap could hurt anything there.

I’ve made my own themes from scratch for ever (when was WP born?), so I’m not unfamiliar with that. I use to solve problems like this with pure stubborness (and a bit of searching), but now I’m stuck.

[timkaye]

I doubt it’s caused by Bootstrap, because I’d expect that to show in the console. What else do you have in functions.php? I’d try commenting out the rest of that file so far as is possible, and seeing if it works then.

[Lena]

The usual things like enqueueing scripts, registering menu and such. Plus a few custom querys (that I will move to a plugin instead). But I’ll try that too, commenting out as much as possible later tonight.

Thank you for your time so far!

[Lena]

Well, I have now tested with everything exept setup_theme and register_sidebar disabled in functions.php. Same behavior as before. I’ve also double (and triple) checked wp_footer is in the right place in the footer template, if it has any impact.

If anyone have any more suggestions for me to test, I will do that. Otherwise we leave it for now, I guess you have better and more important things to do. As I mentioned, it’s not a necessary thing right now.

[timkaye]

This isn’t likely to be caused by anything on the front-end. My own inclination would be to swap out your functions.php file for one from a theme that works. (The simpler the file, the better.) Check that it does indeed work (although your sidebars will have the wrong names at this point) and then start modifying that. You can then check every step to see where the problem lies.

[Ciprian]

@Lena You could also try to set WP_DEBUG to true and WP_DEBUG_LOG to true and see if anything gets added to /wp-content/error.log (or /wp-content/debug.log).

Maybe a fatal error gets triggered behind the scenes, and this is the only way to see it.

[EliteStarServices]

My functions file uses this format for the name entry:

'name' => __('Sidebar Right', 'blue-haze'),
'id' => 'sidebar-right',
...

Then I call them in the template like this (after if logic):

get_sidebar('right');

Slightly different than what you have and it works in my theme, so might be worth a try.
I also have the sidebar area registration inside a function:

    function bootstrapBasicWidgetsInit()
    {

Which has an associated action:

add_action('widgets_init', 'bootstrapBasicWidgetsInit');

[Lena]

Please correct me if I’m wrong, but if I haven’t misunderstood it completely, that format is required for translation, and since my themes are not intended to go anywhere, I’ve never used it.

[EliteStarServices]

It is, but I do not translate my themes either.
There are some other minor differences though.

I might lean toward widgets_init not being called, but mine just worked so I never really had to troubleshoot.

[Lena]

@EliteStarServices

Which has an associated action:

add_action('widgets_init', 'bootstrapBasicWidgetsInit');

I usually use the hook like you do, and did so this time too. But when it didn’t work, I copied how it was done in CPTheme, where the hook isn’t used.

Anyway, now I have turned debugging and log filing on, but I didn’t get any help from that. Next thing is to take a functions.php from a working theme, but I’m getting too sleepy now, and don’t really know what I’m doing anymore.

Tomorrow is another day. Thank you all for your ideas and suggestions so far!

[Ciprian]

You can also trigger logging by using:

<?php
error_log( 'I clicked Save' . $myvariable, 0 );

The line above will populate your debug.log file.

This way you can add various variables and see if any of them is undefined. This could be the issue.

[Lena]

I think that’s a bit over my head, I would need a detailed step-by-step explanation.

Today I first tested with Chrome browser as well, the problem’s still there.
Now I made a brand new theme, I thought starting from scratch and adding things one at a time must show me were I make the mistake.

But guess what? The files (index.php, style.css, functions.php) are nearly empty, and the problem is still there. I’m beginning to think I’m to old for this, who am I thinking I know anything about any code at all… Everyone of the pre-installed themes works as expected. None of mine.

The files look like this:

/*
Theme Name: Debug Widgets
*/

<!DOCTYPE html>
<html>
	<head>
		<?php wp_head() ?>
	</head>
	<body>
		<?php wp_footer() ?>
	</body>
</html>

<?php
    function debugAddScripts(){
        wp_enqueue_style('style', get_template_directory_uri().'/style.css');
    }
    add_action('wp_enqueue_scripts', 'debugAddScripts');
    
    function debugSetup(){
        add_theme_support('widgets');
    }
    add_action('after_setup_theme', 'debugSetup');
    
    function debugWidgetsInit(){
        register_sidebar(array('id' => 'mainSidebar', 'name' => 'Main Sidebar'));
    }
    add_action('widgets_init', 'debugWidgetsInit');
?>

With these files, not doing anything, it must be something I’m doing wrong. Probably a small thing I don’t see because I’ve been starring at i too long. And you all will have a good laugh (or shaking your heads and mumble something about old ladies should stick to their knitting).

[timkaye]

You have a closing ?> tag at the end of at least one file. You need to remove all of them. I don’t know if that’s the cause of your problem, but I do know that including such closing tags causes lots of different issues.