Frontend Hero creates tutorials and screencasts for web developers.

Learn How To Create a Corporate WordPress Website From Scratch

I am in the process of creating a video series on creating a WordPress website from scratch. I am focusing on using Gutenberg with Advanced…

Create an A-Z Filter For WordPress Posts

You’ve most likely seen these A-Z filter areas on your travels. They’re pretty useful if have a site that contains a lot of index type…

Exclude Specific Posts From WordPress Website

When you create your hide_from_loop custom field, You will have to re-save your posts to update the custom field value in the database for this…

Create a Blurred Paywall Area

You’ve most likely seen one of these paywall sections on your travels to some media websites that give you a few free articles to read,…

WooCommerce Template Overrides Not Working

This is a quick one that I recently spent a few minutes scratching my head over. I am working on a WooCommerce store and copied…

How To Create Your Own Strava Stats Widget

Strava is one of the world’s most loved social networks for tracking all things fitness. You can track your runs, rides, swims and many other…

Change Email Recipient Based On Subject in Contact Form 7

I have been using Contact Form 7 on a lot of my personal sites, as well as client sites for over a decade now and…

Create a Variable Item Navigation Menu With Flexbox

This is a handy one for making a navigation menu with equal nav item widths regardless of how many items you have. The old methods…

Create multicolored borders with CSS

A nice easy one today. We are going to create a little non standard border that includes a few different colors to spruce things up….

Pixels to REM Conversion Tool

No tutorial today, but decided to scratch an itch and create my own Pixel to REM conversion tool. In truth, it’s basic Javascript (jQuery) but…

Detect if user is using dark mode

As I use dark mode on all of my devices, all of the time, I wanted to find out how easily I can detect if…

Create a Slick Rollover Effect For Text Links

I stumbled upon this neat little text effect browsing – nay drooling over the Blue Stag website on my internet travels. It’s subtle, adds to…

Create a staggered animated menu with CSS

A nice and simple web development tutorial for you today. We are going to create a vertical navigation block, that could be used for such…

Mask text with an image in CSS

Sometimes default text just won’t cut it. If you are designing a site or landing page that needs high impact imagery inside of your text…

Adding an Animated SVG Border To Links

I tried something a bit different today and outside of my comfort zone and experimented with animating SVGs. The idea I had was to animate…

Adding Dropdown Arrow Indicators With Font Awesome

I am using the 4.7 version for this tutorial, not the latest 5.0+ version as it works fine for my needs. If you want to…

Remove the editor on specific pages in WordPress

This tutorial is aimed people, using WordPress classic. I.e. Users using non Gutenberg sites. Using WordPress, on occasion you might want to add content to…