While researching Custom Post Types I found a little-known technique to ensure plugins are installed and run regardless of user interaction. The idea is that the Must Use Pluginshttps://wordpress.org/support/article/must-use-plugins/ will be active by default and administrators will not be able to remove them from the admin Plugins GUI, making the must-use directory the perfect place to put code that must run to make the installation work, possibly like CPT and other customization plugins that we want/need to run independently of the theme we use. Must-use plugins are not perfect. For all the advantages that they offer, they also have several...
In the last post, we covered the technical part of creating Custom Post Types CPTs and Taxonomies. This post will cover integrating the CPT into a theme. We will also discuss issues regarding using CPTs as a plugin and modifying an existing theme or child theme versus incorporating the code for the CPT into a theme. Choosing deployment strategies The most common way to deploy CPTs is to bundle the code in a plugin and deploy them independent of the theme you're using. This means that you will have to customize whatever theme you choose by creating a child theme...
I've been playing with the idea of creating a technical glossary for referring to technical terms on my posts. After a lot of research I came back to a simple tool: WordPress custom post types CPT. The idea is as follows: 1. Create a custom post type plugin for glossary entries Create the post type Change the labels as appropriate Ensure that it will appear in the REST API and use Gutenberg if desired 2. Create a corresponding taxonomy Change the labels as appropriate Ensure that it will appear in the REST API 3. Explore how to incorporate the CPT...
Using querySelectorAllhttps://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll to get one or more items and then process them as an array of items is not as straightforward as I initially thought it would be, at least in the browsers I use for testing Part of the problem is that querySelectorAll returns a node listhttps://developer.mozilla.org/en-US/docs/Web/API/NodeList and some of them will not work with node lists and will require the conversion to an array before we do anything. We'll look at three ways to work with node lists as arrays. The last one works with node lists directly. The examples will each take all the paragraphs on a...
One thing that has always puzzled me is how to insert content into an existing document. In researching this I found two traditional alternatives and a newer API that may make things easier. Recently I was playing with JSON-LD and trying to append content that used the JSON data into the page. The code looked like this: js const data = document.getElementById"data".text; const json = JSON.parsedata; const displayData = ${json.name} by ${json.author.name} ${json.description} ; The first idea was to use appendChildhttps://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild to append displayData to the document but it didn't work. displayData expects a node as its parameter and displayData...
JSON-LDhttps://json-ld.org/ is a set of extensions to JSONhttps://www.json.org/json-en.html that allows for creating and exchanging linked data on the web. Perhaps the best-known use of JSON-LD outside semantic web users is using schema.org's JSON-LD structured data for Google's search engine. The following example gives the structured data snippet to accompany a recipe web page. The example is taken from Understand how structured data workshttps://developers.google.com/search/docs/guides/intro-structured-data. html Party Coffee Cake { "@context": "https://schema.org/", "@type": "Recipe", "name": "Party Coffee Cake", "author": { "@type": "Person", "name": "Mary Stone" }, "datePublished": "2018-03-10", "description": "This coffee cake is awesome and perfect for parties.", "prepTime": "PT20M" } Party...
CSS has had to deal with vendor prefixes from very early on and some of those prefixes are still in use today. This post will look at how to use prefixes and how to automate the process, and how to use @supports to test if a feature is supported. Adding CSS prefixes That we're still dealing with vendor prefixes shows how long some of them have lasted and provides an object lesson on how to handle features in development Developers didn't think of vendor prefixes as a way to preview features, they shipped them in production, something the CSS Working...
One thing that makes the web difficult to work with is that a given feature may or may not be available in all your target browsers either because of the version of EcmaScript the Javascript standard it was introduced in or because browsers haven't gotten around to implement them and may not do so at all or worse, they may have poor implementations of a given API the initial implementation of Indexed DB in Safari comes to mind. In the old days, we would do browser detection and assume that if the browser was Netscape they would support a given...
Homebrew is good but it introduces some complexity to your development, particularly if you've installed tools manually before they were available via Homebrew. One of the really problematic tools to move to Homebrew was Go. Because it is installed as a package, removing it is not trivial and may require a lot of manual work after the removal is complete. Run the following command in a terminal to see if Go was installed using the macOS package bash pkgutil --pkgs Go macOS package is presented as com.googlecode.go in the result list. macOS package stores files in the predefined location. For...
A pair of new pseudo-class selectors have made it easier to write CSS in a way that is easier to read and to reason through. :is and :where allow you to combine selectors that have the same styles. For example, to identify the headers inside an article you'd normally do this: css article, h1, article, h2, article, h3, article, h4, article, h5, article, h6 { background: black; color: white; } Instead, you could use :is and improve legibility while avoiding a long selector and potential typos associated with it: css article :ish1, h2, h3, h4, h5, h6 { background: black;...
