Category: Tweaks

CSS to Force Element Full-Width When Inside a Max-Width Container

container element with full width element inside

If an element like a image is wrapped by a container that has a limited width, how do you make the inner element expand outside the bounds of its container to stretch full-width of the browser window?

I used to think it could only be done with Javascript.  The reason is because there was a WordPress page builder that I used years ago that had a stretch full-width feature which used Javascript to accomplish it.

Well, thanks to the power of modern CSS, we can use calc() and vw solve this problem wonderfully!  Here’s how to do it. Continue reading CSS to Force Element Full-Width When Inside a Max-Width Container

How to Change VS Code’s Integrated Terminal to Git Bash

VS Code

When you first started using VS Code you may have dismissed that little notification in the corner that asked if you wanted to switch your integrated terminal.

In my case, running on Windows, the default terminal was set to Command Prompt (cmd.exe) which is just plain inferior to Git Bash which you probably already have installed if you have installed Git (which you should).

So, if you missed that notification that let you change it, how do you change it later?

Continue reading How to Change VS Code’s Integrated Terminal to Git Bash

How to Remove Unrelated Videos From All WP Gutenberg Video Embed Blocks

Remove YouTube Related Videos WP Block

Looking to get rid of the annoying and horribly unprofessional “related videos” end screen on your professional YouTube video embeds on your WordPress website?

I’ve put together the perfect simple solution in the form of a small code snippet that you can drop into your theme’s functions.php file.

Continue reading How to Remove Unrelated Videos From All WP Gutenberg Video Embed Blocks

How to Update an ACF Field Name Without Losing the Data

Advanced Custom Fields (ACF)

Are you using ACF (Advanced Custom Fields) and have the need to change the field name, but then you discover that it makes all the data disappear?

Since ACF uses the field name as the meta key to save and retrieve data, it makes it seem impossible to change.  You may consider changing only the label and leaving the field name alone.

However, in some cases, changing the name is needed.  If you’re in that boat, I’ve got good news.  It is possible to migrate all your post meta data to the new meta key.

In this post, I’ll show you exactly how to run a couple SQL statements on your database to migrate all the post meta data from the old key to the new key. Continue reading How to Update an ACF Field Name Without Losing the Data

Automatic Table of Contents Sticky Magellan Menu for WordPress Posts

Magellan Menu

See that sweet Magellan menu over on the right sidebar (if you’re not viewing the AMP version of this page)? →

Pretty cool right?

  • It acts as a nice table of contents for the post (and it’s 100% automatic!).
  • You can click the links to smooth scroll down to that section.
  • As you scroll, the visible section is highlighted.
  • It’s also inside of an awesome Theia Sticky Sidebar.

Continue reading Automatic Table of Contents Sticky Magellan Menu for WordPress Posts

How to Add a Scrolling Sticky Sidebar to WordPress

Sticky Sidebar

A sticky sidebar is a great way to improve the user experience of just about any website.  When a website has a sidebar that is not sticky, then when you scroll down below the bottom of the sidebar, then you just have this awkward white space on that edge of the site.  What’s the point of that white space, when the sidebar could stay there? Continue reading How to Add a Scrolling Sticky Sidebar to WordPress

WooCommerce: How to Fix Can’t Pay for Order Because “Out of Stock” Error

WooCommerce Ninja

In some WooCommerce setups, customers who select an offline payment (like Cash on Deliver or Check/Cheque) and then change their mind and go into the order to pay for it using an online method find that they are unable to pay for their pending order because it says the item is out-of-stock. Continue reading WooCommerce: How to Fix Can’t Pay for Order Because “Out of Stock” Error

Dynamic Copyright Year Using PHP or Javascript

Dynamic Copyright Year

Wish you never had to update a footer widget to change the copyright year ever again?  You need to implement a dynamic copyright year into your site.

Here are a couple ways to automate this needless yearly task. Continue reading Dynamic Copyright Year Using PHP or Javascript