Anyone can build a plugin but it takes a lot of work to get the plugin done right and ready for sharing or WordPress review and approval. I realized the extra work involved when I was looking at the result of creating a plugin scaffold using the WordPress Plugin Boilerplate Generatorhttps://wppb.me/. The idea of the generator, just like its downloadble siblinghttps://wppb.io/, is to provide a good starting point for creating a plugin. There are other generators available, some of which may be better suited to smaller, single-purpose tasks like what I have in mind: WordPress Plugin Boilerplatehttps://github.com/DevinVinson/WordPress-Plugin-Boilerplate : A foundation...
When working with WordPress, you may need to insert an inline script into a page or a template. This post will discuss two ways to do it Method 1: wp\add\inline\script The first method, wpaddinlinescript works with enqueued scripts and uses the same handle that we enqueued the script with to add the inline script to the page. With this method, we can ensure that the enqueued script will be added to the page before the inline script. php tag. You have to write the full script, including opening and closing tags but it gives you more flexibility in how you...
Building the Core Web Vitals measurement into WordPress is a bit more involved as it depends on whether you've analytics into your site and how you've done it. This function depends on Google's Sitekit pluginhttps://sitekit.withgoogle.com/ and relies on values set there. We can run a function that checks if the gtag script has already been enqueued on your site: If it's hasn't been enqueued, then you add it and configure it If it's already been enqueued, then do nothing, as it's ready to use If you use a different tool to set up your Google Analytics or use a different...
Core Web Vitalshttps://web.dev/vitals/ give developers and performance specialists insights into different facets of user experience. These core web vitals metrics can be measured in the wild and reflect real-world users' experience with your content. The current metrics in the Core Web Vitals palette are: - Largest Contentful Paint LCPhttps://web.dev/lcp/: measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. - First Input Delay FIDhttps://web.dev/fid/: measures interactivity. To provide a good user experience, pages should have an FID of 100 milliseconds or less. - Cumulative Layout Shift CLShttps://web.dev/cls/: measures...
Ready-made Counter Styleshttps://www.w3.org/TR/predefined-counter-styles/ provides a collection of predefined counter styles you can just drop into a stylesheet. These pre-defined custom counters are great to work in international documents since many non-Latin languages define their own numbering systems and the characters they use on their systems. They also provide several Arabic and Roman predefined number styles. The following example creates fifty Arabic numbers with a circle around them it uses Unicode codepoints to make the numbers. css @counter-style circled-decimal { system: fixed 0; symbols: "\24EA""\2460""\2461""\2462""\2463""\2464""\2465""\2466""\2467""\2468""\2469""\246A""\246B""\246C""\246D""\246E""\246F""\2470""\2471""\2472""\2473""\3251""\3252""\3253""\3254""\3255""\3256""\3257""\3258""\3259""\325a""\325b""\325c""\325d""\325e""\325f""\32b1""\32b2""\32b3""\32b4""\32b5""\32b6""\32b7""\32b8""\32b9""\32ba""\32bb""\32bc""\32bd""\32be""\32bf"; suffix: " "; } Once we have the style, we can reference it in our definition...
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...
