In this episode, you’ll build an automatic way to set the theme’s version number. These strategies eliminate the need to hard code the theme’s version number. Let’s start with the Twenty Seventeen theme. I want to show you that these techniques work on any theme. Then in the next episode, we’ll move it over to a Genesis-powered child theme. For strategy 1, when you are in development/debug mode, we want to use the file’s modification time instead of having to change the asset’s released version number.
Assets are the stylesheets, scripts, images, fonts, etc. that are on the website’s hard drive (i.e. web host’s hard drive) that are downloaded to the browser. Versioning gives us the ability to change each asset’s static URL to ensure our changes go out to the browser (bust through cache). In this hands-on coding lab, you will be learning better techniques and strategies for automating your asset versioning in WordPress. No more hard coding the version number when you enqueue. This is a lab that everyone needs regardless of skill level. Whether you are an implementer or advanced developer, this one […]
In Part 1 of the Better Asset Versioning, we are looking at the version number that is applied to each asset resource, i.e. our scripts, fonts, and stylesheets. We are highly inefficient with this process. Let’s eliminate the hard coding of version numbers when we enqueue. Let’s build a better strategy for version numbers when in development mode. Let’s automate versioning and improve our build process.
Let’s get out of the browser’s console and write your first script. In this episode, you will simply create a script file and then learn how to load that file into the DOM through WordPress. Yes, you will learn about enqueuing script files using the WordPress event wp_enqueue_scripts and its function wp_enqueue_script. Psst…if you need to learn about WordPress’ event-driven engine (you know that thing in Core that handles hooks/filters), go take this hands-on lab. Get the Sandbox Plugin
Now, you need to migrate over the scripts and style (assets). In this video episode, you will create a new asset loader file, which will handle the WordPress enqueuing process for the assets.
Before we get to styling, let’s add a menu and then some social links into the new Utility Bar widget area. Then you’ll start styling the Utility Bar and its components. Some of the CSS properties that you are using are: display float ::after You will also add in (enqueue it) the Font Awesome library.
Step 2 is to enqueue the stylesheet resource. Google Fonts gives you what to enqueue. Where do you put this into your WordPress website? You will use the WordPress function wp_enqueue_style. Let’s talk about what this function does. What if you need to load up more than one Google Fonts? What is the syntax? You use the pipe | to separate out each of the font families. Let’s dig into the enqueuing and write the code for it. Don’t worry, as it’s very easy. You are actually writing PHP code here, even though it’s very little. It’s still PHP. Psst….here […]
In this episode you will learn about how to work with the Google Fonts’ site, how to select the styles, and then what are the options they supply. Then you will work in Google Chrome Developer Tools to find where the insert the CSS. You will also see the result of when you forget to enqueue the resource, as the font is not loaded. Let’s get into the code as well as exploring the HTML and CSS tools available to you.