Update to WP 5.5 breaks the “recent posts” home page.

Wordpress 5.5 updated its bundled Masory.js from version 3.3.2 to version 4.2.2.
Did some research on this and I found that Oblique uses 'wp-content/themes/oblique/js/vendor/masonry-init.js' to initialize masonry.

In that file, the function _getColGroup:
var colGroup = this._getColGroup( colSpan );
was changed to _getTopColGroup in masonry version 4, so just change that line to:
var colGroup = this._getTopColGroup( colSpan );
and Oblique works again.

I love this theme but it has been abandoned by its authors.
Maybe it’s time to move on because who knows when it will break again in the future.

Huzzah! That fixed it!

You are a saint among men, and likely smell very good as well.

I too love this theme, and I really don’t want to move away from it.

I’ll rage against the night until I hit a snag that nobody smarter than me can fix. Then I’ll cry a little bit and go find a new theme.

But until that day comes, the ride never ends.

Thanks much for your help, it is greatly appreciated.

Thank you so much for posting this. I use the Oblique theme and exactly the same happened to me. I have been tearing my hair out. I love Oblique but it looks like I will have to change. I wonder if there is something similar.

Thank you so much for your help!

@rakaloah is a life-saver.

If, like me, you’re running a child theme of Oblique, in order to avoid editing Oblique’s own js/vendor/masonry-init.js file (and risking them breaking anything else when they eventually update), you’ll have to do the following:

1. Make a copy of wp-content/themes/oblique/js/vendor/masonry-init.js to wp-content/themes/oblique-child/js/vendor/masonry-init.js (or whatever your child folder is at).
2. Edit wp-content/themes/oblique-child/js/vendor/masonry-init.js, change line:
var colGroup = this._getColGroup( colSpan );
to:
var colGroup = this._getTopColGroup( colSpan );
3. For that to stick, you need to kill their script late and enqueue your own as per this answer. To do that, simply add this function at the end of your wp-content/themes/oblique-child/functions.php file:

// Fix broken outdated Oblique masonry script.
add_action('wp_enqueue_scripts', 'child_masonry_fix', 100);
function child_masonry_fix() {
	wp_dequeue_script('oblique-masonry-init');
	wp_enqueue_script('child_oblique-masonry-init', get_stylesheet_directory_uri().'/js/vendor/masonry-init.js', array( 'jquery', 'masonry' ), true );
}

Note that your functions.php might already have other wp_enqueue_scripts in there, but in my experience you should enqueue this separately so it gets loaded late (I believe that’s what the “100” property does).

Hope this helps!

I just switched to another theme and then back to Oblique.

Sort of a manual version of the same thing. The new script enqueues when the theme starts up, same as if you’d never ran that theme before.

Since Themeisle stopped updating Oblique, I’ve just modified the original files to stop them being end-of-life’d, so I’m not squeamish about modifying the original files.

I keep a clean copy of the original Oblique offline as a backup, as well as documentation of all the things I’ve changed so that I can start from square one again if I have to.

Plus, I run Revisr and Get for version control, so if things go terribly pear shaped on me, I just roll back to a previous known-good commit and try something else.

perfect thanks

Hi,
My page using Oblique got the same problem since a few days ago with the frontpage having the blog posts all mixed up.

My skills are not that good.

Can I please get some very basic step by step helg!

So also an “idiot” could understand ??

Preferebly here or to my email: [email protected]

Thanks in advance.

Sincerely,
Per-Ola in Sweden

OK, you need FTP access to the site.

Open up your FTP client and connect to your web server (the one your site is hosted on).

In the root directory where WordPress is installed on that server, you should find the folder called “wp-content” and open it.

Inside it find the folder called “themes” and open it.

Inside it find the folder called “oblique” and open it.

Inside it find the folder called “js” and open it.

Inside it find the folder called “vendor” and open it.

Inside that folder find the file called “masonry-init.js” and download a copy of it to your local computer (the one running the FTP client).

Open that file in a text editor and do a find command for the line var colGroup = this._getColGroup( colSpan );

Replace that line with this one var colGroup = this._getTopColGroup( colSpan );

Save the text file and close it.

On the FTP client rename the existing file called “masonry-init.js” to “masonry-init.js.OLD”

Then upload the “masonry-init.js” file that you just modified from your computer to the server using your FTP client.

That will fix your problem, but we need to make WordPress read the new JS file instead of the old one.

To get WordPress to you read the new JS file you just uploaded (instead of working off the cached version of the old one), go into the WordPress backend and change your theme to anything other than Oblique, make sure WP has loaded the new theme, then switch back to Oblique.

That should have you back up and running on the updated JS file.

It’s important that you rename and don’t delete the old JS file that’s already on the server, that way you can go back and try again if you mess up the modification the first time around.

Hope that helps.

Thanks Logicindustries, good info!

As my skills petty limited I feel I got two options, change to another theme or give the info above a chance with the risk I could mess things up…. hmmmm.

Kind regards,
Per-Ola

That’s why you just re-name the old file instead of deleting it.

If you DO crap-up the modification the first time, you just delete the new file you put in there and un-rename the old one and you’re right back to where you started from.

Which would be with a broken home page, but that’s no worse off than you are now.

Thank You all for your effort, I just could re-enable my blog thanks to you.

Have a nice day! ??

Hi!
first of all thanks for the all the instructions!
I’m not expert at all but I’ve followed step by step all instructions, including switch to another theme and then back, and I was very happy but nothing happened…
reckeched everything.
I don’t think I’ve a child theme.
I’ve modify the file finding the path in the icon “File manager”.. is it ok?
I wonder if I need to do something else. I’m hosted on Register.it
Thanks in advance if someone can give me a further help.
In the mean time I pass to Neve. Nice to know if you Oblique lovers have a differebnt suggestion ??
Lisa

• This reply was modified 4 years, 3 months ago by lacascinadellanima.

Sorry man, I have no other suggestions for you.

I FTP into my server directly, but I see no reason why using the CPanel File Manager would not also work. Having said that though, I have not tried doing it that way.

Sorry, as I said at the start, I’m operating way out on the edge of my knowledge base here, so I’m not really equipped to do any troubleshooting for you.

I mean, I didn’t even come up with the fix I posted, that was from another kind soul here on these forums (named @rakaloah , who posted the original fix a few posts up in this very thread), I just typed up the steps I took to implement it on my setup.

Once we’re past that direct knowledge, I’m afraid I ain’t gonna be much help.

@lacascinadellanima
You can simply view that .js file using your browser, like ‘example.com/wp-content/themes/oblique/js/vendor/masonry-init.js’.
If it’s still an old version, try to Ctrl-F5 (force re-download everything) a few times.
If that doesn’t work either, check your wordpress plugins with cache functionality, especially PWA ones (which requires a service worker force update), clear those cache.
And if you have CDN (since it’s a hosted service, I’m not sure about that), you may need to clear that cache too.

My posts are not showing anymore on the Home page.
I tried your solution but it hasn’t changed anything.
Any other idea?