Whether we like it or use it, the Gutenberg editor is here to stay. While I don't use it for my own content and have developed themes that rely on the classic editor plugins, I realize that any WordPress shop moving forward needs to at least be aware of how to build blocks. It's unlikely that the Classic Editor plugin or other means to disable Gutenberg will remain available past 2022 when the Classic Editor plugin is supposed to stop being fully supported. So this post will cover the creation of Gutenberg blocks and some basic setup in both PHP...
I've been working on a new WordPress theme for a few weeks. Now I'm at the point where I can start worrying about the last finishing touches before I can start dogfooding it. One of the things left in the to-do list is internationalizing the theme. Making sure that it's translated to Spanish and that it is ready for people who want to translate it to other languages to do so. In this post, we'll concentrate on theme i18n internationalization for a theme. Gutenberg and blocks will be discussed in a separate post. Translating Themes For the translations to work,...
Resource hints are a relationship used to indicates that a given origin or resource should be acted upon before they are loaded. Doing this in WordPress is more complicated. While we could add the resources directly to the templates it would require changing the templates whenever we change fonts or any detail of the type of resource hint. The code below is taken from the Twenty Seventeenhttps://wordpress.org/support/article/twenty-seventeen/ theme and with some modifications will work on any theme running on recent versions of WordPress. It requires enqueuing the fonts generated through twentyseventeenfontsurl, which is outside the scope of this post but...
There are times when our applications need to reference information such as languages, regions, scripts, and currencies. Some of these may be easier and some may be hard but either way, we shouldn't hardcode them into the apps themselves, this makes them brittle and harder to localize. Rather than download a fresh copy of the locale data every time there is a change, we can leverage the versions available in JavaScript runtimes. The Intl.DisplayNames API gives JavaScript developers direct access to those translations, allowing applications to more easily display localized names. The following example creates four constants reflecting the languages,...
This is my first attempt in a while to create a fully customized WordPress theme without using Genesis or other theme frameworks. The idea is to use modern web technologies like CSS Grid, Variable Fonts and others to experiment with what it takes to add these technologies to a WordPress theme using Underscoreshttps://underscores.me/ as the starter theme. It is also a playground for working with progressive enhancement, responsive design and how to accommodate multiple screen sizes in the same WordPress theme. Some aspects that I think are important to highlight and also some areas where further work is needed. Variable...
One of the things I like the most about working with WordPress, although it can be frustrating at times, is the number of conditional tags available. This post will explore what they are, and some examples of how we use them. What they are Conditional tags are pre-packaged PHP functions that allow you to customize your WordPress theme based on whether the current item matches a condition or not Conditional Tags usually work with PHP if /else Conditional Statements. The if/else code checks if a statement is true or false. The example uses the issingle conditional tag. If the statement...
One of the things I find the most interesting about variable fonts is that you can animate them between different values. This post will explore how to create animations using Variable font axes, both default axes like weight and custom axes like casual available in Recursivehttps://recursive.design I will be using the following HTML: html Hello World Hello World The CSS is broken in multiple blocks for readability and ease of explanations. The first block performs the following tasks 1. Load the variable font using a modified @font-facehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face syntax - The format for the font changes to reflect that it's a...
Variable Fonts give you a lot of flexibility while losing support for older browsers and operating systems. They reduce the number of font files required to render content and they give you options that are difficult or not possible with traditional web fonts. Quoting Jason Pamental's The evolution of typography with variable fonts: an introductionhttps://rwt.io/blog/2018/07/evolution-typography-variable-fonts-introduction: > As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. What’s more: the format which...
Fontface observerhttps://fontfaceobserver.com FFO is a font loader library that allows you to control the behavior of our downloadable fonts. This post will work through how to use the script in a WordPress installation. Using FontFace Observer is a two-step process. We first need to load the script and then we need to add an inline script to tell FFO what to do. Loading the script We load the script using wp-enqueue-scripts; the same way that we'd load all our scripts and stylesheets. The following code snippet enqueues the Fontface Observer into a standalone function. However, if you're already enqueueing scripts...
Hooks are a way for one piece of code to interact/modify another piece of code. In the context of WordPress, they provide means for plugins, themes, and even WordPress itself to interact with WordPress core functionality. If you've worked with Javascript and callbacks you may be familiar with the concept of callbacks. There are two types of hooks: Actions and Filters. We'll discuss them in more detail below. WordPress provides many hooks that you can use, but you can also create your own so that other developers can extend and modify your plugin or theme. Filters Filters allow you to...
