CSS Color Module Level 4https://drafts.csswg.org/css-color-4/ and level 5https://drafts.csswg.org/css-color-5/ introduce a lot of new color features but unless you're really into the guts of working with colors on computers you probably wouldn't know how to use them. There is also an issue of browser uneven support for colors on the web, which is a large problem for developers. When the graphical web first came online it was in low-resolution monitors, 640 x 480 was the norm and RGB was the only color space that we had to worry about. As technology improved, displays got bigger and grew beyond RGB and what...
Privacy in the context of a web application like WordPress goes beyond legal requirements. It's also answering the following questions: What information we collect Why we collect it How we use it How we protect it Taken from ISO 29100/Privacy Framework standardhttps://www.iso.org/standard/45123.html, the following checklist provides a good starting point for thinking about privacy in general but more applicable in the context of a WordPress plugin that collects data from users and uses that data to create a service or site: Consent and choice: giving users and site visitors choices and options over the uses of their data, and requiring...
If we want to allow users to configure our plugin, we can add menus to the admin pages either as a top-level menu or a submenu of an existing menu. When used with the settings and options APIs we get control of how users configure the plugin from the admin area, assuming that they have permission to do so. Top Level Menus Top-Level Menushttps://developer.wordpress.org/plugins/administration-menus/top-level-menus/ are what people see when they first view the admin area. This means that our admin page has more visibility but, depending on the plugin, it may be better to use a submenu The first step...
The next few items Meta Boxes, and Cron are nice to have, require a lot more work, and are not necessary for the majority of plugin projects. I include them here because I'm interested in what they do and can think of a few projects that would benefit from one or more of them. Custom Meta Boxes Custom Meta Boxeshttps://developer.wordpress.org/plugins/metadata/custom-meta-boxes/ allows you to create custom sections of the editor screen where users can enter custom data and you can then sanitize it and save it to the database. Because they allow custom data we need to follow all the security...
Rather than writing plugins or any PHP code procedurally, we can leverage Object-Oriented Programming OOP to write our plugins. OOP is easier to maintain and extend as the needs of the plugin increase. The code below is a good starting point for class-based plugins. It doesn't have the full plugin comment but the code should still work even if it does nothing yet. php setupactions; } / Setting up Hooks / public function setupactions { //Main plugin hooks registeractivationhook FILE, array 'AwesomePlugin', 'activate' ; registerdeactivationhook FILE, array 'AwesomePlugin', 'deactivate' ; } / Activate callback / public static function activate {...
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...
