Rather than defining settings in each individual component, you can define what core features the theme supports in the theme's functions.php, using add\theme\supporthttps://developer.wordpress.org/reference/functions/addthemesupport/. addthemesupport takes one or two arguments. The first argument is the name of the feature you are adding support for and the second argument, if present, is a list of arguments for the feature you're adding support for. php custom-header takes an optional array of parameters. As with many functions in WordPress, you can assign the array of parameters to a variable and use that variable when you declare the addthemesupport function. php '', 'random-default' => false,...
Sharing content from your web application takes two different APIs: Web Share makes the content shareable and the Web Share Target API makes your app eligible to receive shared data. Getting Started We will first look at adding share capabilities to a web page. The basic shape of the API looks like this: js navigator.share{ title: title, url: url } .thenfunction { console.log"Share success!"; } .catchfunction { console.log"Share failure!"; }; And here's the code of my first attempt to add it to a webpage. This will make the links with a .share class use the operating system's share functionality. js...
One of the benefits of the :where pseudo selector is that it removes the specificity of the selector inside it. This becomes a powerful solution when we want to create base styles that we can override without having to worry about specificity. css :whereulclass { padding: 0; margin: 0; list-style-type: none; } .restaurant-list { list-style-type: disclosure-closed; } In this example, the first rule has no specificity 0, 0, 0 so the second rule will be applied regardless of its specificity. So, when build base styles, we can use :where to remove the specificity of a selector and make it easier...
If you use WordPress as your CMS and choose to keep the existing theme structure, then the news is relevant to you. Otherwise, you can skip this post. Among other new, WordPress 5.8 introduces a Block-Based Widget Editorhttps://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/, built using the same Gutenberg editor that you use to create posts. You can now use any block in your theme’s widget areas using the all-new Widgets screen and updated Customizer. For this post, I will concentrate on creating and adding widgets using the widget menu appearance -> widgets rather than the customizer. Creating Widget Blocks The Widget menu will now show...
WordPress doesn't really have a search engine built into the CMS. This may cause unexpected results and it may skew a user's search results. The first thing to look at is replacing WordPress's built-in search with something more robust and works as a real search engine. Elasticsearch I've been looking at Elasticsearchhttps://www.elastic.co/elastic-stack/ for a while and I think it's time to see what it would take to make it work in production. First, we'll test Elasticsearch locally with a local installation of WordPress using the elasticpresshttps://www.elasticpress.io/ plugin and an Installation of Elasticsearch using Docker. Then we'll explore the lowest cost...
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...
