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

The Best WordPress Drag & Drop Visual Page Builders

WordPress Visual Page Builders

If you’ve spent any time with the WordPress trying to make your website look beautiful, you know how hard it can be!

The truth is, the old core of the WordPress content management system (the classic editor) was outdated.  It was really more like a word processor for the web.  That is precisely the reason why Automattic (the company behind WordPress) has been pouring their efforts into their next gen editor, Gutenberg, which is now the default editor in WordPress.

While Gutenberg can be done right, for the average WordPress site admin, it can still be very cumbersome to design an smooth, elegant website.

Fortunately, there are a plethora of visual page builder plugins available for WordPress. Continue reading The Best WordPress Drag & Drop Visual Page Builders

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

Best Practices for Safe WordPress Updates on Big Revenue-Critical Websites

WordPress Updates

In my WordPress developer career, I’ve been asked many times about the best practices for safely updating WordPress core, plugins, and themes, especially when it comes to a site that can’t afford to have any downtime.

There are several update strategies to consider.  I’ll go over them here.  It’s really all up to the client’s risk tolerance vs. their willingness to pay for extra maintenance work.

But, with my WordPress update strategies, you should be able to perform updates the safe way without too much extra effort.

Continue reading Best Practices for Safe WordPress Updates on Big Revenue-Critical Websites

Do Too Many WordPress Plugins Really Slow Down Your Website?

Class Object Oriented PHP

I’ve heard it over and over… “Too many plugins will slow down your website.”  I’ve heard it in conference presentations, networking events, podcasts, blogs, YouTube videos, and even my old boss.  But, is it really true?

I’m a professional WordPress developer and have written several of my own plugins, so I have something to add to the conversation.

Honestly, it really bugs me when people ignorantly demonize plugins as the culprit of all their WordPress website problems… as if the number of plugins is slowing down their website.

In this article, let’s look at the facts around the topic of WordPress plugins slowing down your website.

Continue reading Do Too Many WordPress Plugins Really Slow Down Your Website?

How to Install the Facebook Pixel on an AMP Website Using Google Tag Manager

Facebook Ads, Google Tag Manager, AMP

Are you working with a native AMP website or a website with AMP pages, but you need to integrate the Facebook Pixel?  To top it all off, you’re also using Google Tag Manager (because it’s awesome).  How to go about this?

Well, I’m here to help.  While this implementation is not documented very well, it’s actually very simple!

Continue reading How to Install the Facebook Pixel on an AMP Website Using Google Tag Manager