WordPress 6.9: assertEqualHTML for Resilient HTML Tests

PHPUnit HTML tests often fail over minor changes like attribute order or trailing semicolons. WordPress 6.9 adds WP_UnitTestCase::assertEqualHTML(), which compares HTML semantically so only real differences fail. I just published this post about it 👇 https://lnkd.in/e76E_DrZ

🚀 New in WordPress Testing: Smarter HTML Assertions! If you write PHPUnit tests for WordPress plugins or themes that produce HTML, you know how frustrating it can be when tests fail due to insignificant differences — like attribute order or whitespace — even though the browser renders everything the same. That’s changing now! 🎉 🔥 Introducing assertEqualHTML() – a new assertion method in WordPress 6.9 that compares HTML semantically, not literally. That means your tests are more reliable and less brittle. ✨ Why You’ll ❤️ assertEqualHTML() 🧠 Smarter comparisons — Ignores attribute order, class order, whitespace, and quoting style 💪 More resilient tests — Only fails when HTML is genuinely different 🧩 Great for blocks, shortcodes, and filters where markup can vary slightly yet still be correct 🛠️ Easy to adopt — Just replace fragile string assertions like assertSame() with assertEqualHTML() 📌 Quick Benefits No more test failures due to irrelevant formatting Cleaner expected HTML in your tests Better confidence across CI environments 🛎️ Ready to make your HTML tests stronger? Replace your string-based assertions with assertEqualHTML() and enjoy more stable test suites! 💬 Try it in your WordPress test suite and share what you discover!

14 ways to add Custom CSS in WordPress Block Editor With the new Custom CSS on a block and post/page level, I was wondering if I would know where to look if something needs to be changed that was modified by a Custom CSS setting. Turns out there are 14 different ways to skin WordPress. I am a fan of keeping one source of truth, but it might not always be possible to keep it in theme.json....

𝗧𝗵𝗲 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗼𝗿 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗔𝗿𝗲𝗮 𝗡𝗼𝘁 𝗙𝗼𝘂𝗻𝗱 𝗘𝗿𝗿𝗼𝗿 The Elementor Content Area Not Found error stops your development workflow. This error happens when the Elementor editor cannot find the required injection point. You might have a valid PHP file, but the plugin needs a specific WordPress hook to work. To fix this error, you need to: - Verify the Loop: Make sure while(have_posts()) and the_post() are in your PHP file. - Add the Hook: Place the_content() where you want the editor to appear. - Check Filters: Look for remove_filter calls in your functions.php file that target the content. - Header/Footer: Confirm wp_head() and wp_footer() exist in your theme wrappers. The the_content() function is required for Elementor to work. It triggers the the_content filter that Elementor uses to inject its custom DOM elements into your page. If you use custom variables to show text, Elementor will ignore them. You can fix this error by: - Adding the WordPress Loop to your template file - Restoring required hooks in your template files - Using the shortcode workaround for API-driven dashboards or rigid themes Use this structure in your custom templates: ```php if ( have_posts() ) : while ( have_posts() ) : the_post(); the_content(); endwhile; endif; ``` For complex themes, you can use manual injection by calling a specific Elementor template ID directly. Use this snippet: ```php echo do_shortcode('[elementor-template id="123"]'); ``` Building themes with extensibility in mind prevents this error. Follow WordPress developer standards to ensure your code remains compatible with modern ecosystem tools. Source: https://lnkd.in/ge_56jgJ

𝗧𝗵𝗲 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗼𝗿 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗔𝗿𝗲𝗮 𝗡𝗼𝘁 𝗙𝗼𝘂𝗻𝗱 𝗘𝗿𝗿𝗼𝗿 The Elementor Content Area Not Found error stops your development workflow. This error happens when the Elementor editor cannot find the required injection point. You might have a valid PHP file, but the plugin needs a specific WordPress hook to work. To fix this error, you need to: - Verify the Loop: Make sure while(have_posts()) and the_post() are in your PHP file. - Add the Hook: Place the_content() where you want the editor to appear. - Check Filters: Look for remove_filter calls in your functions.php file that target the content. - Header/Footer: Confirm wp_head() and wp_footer() exist in your theme wrappers. The the_content() function is required for Elementor to work. It triggers the the_content filter that Elementor uses to inject its custom DOM elements into your page. If you use custom variables to show text, Elementor will ignore them. You can fix this error by: - Adding the WordPress Loop to your template file - Restoring required hooks in your functions.php file - Using the Elementor Theme Builder to create an Archive Template - Using the shortcode workaround to inject content Building themes with extensibility in mind prevents this error. You must follow WordPress developer standards to ensure your code is compatible with modern ecosystem tools. A professional template provides a solid foundation of hooks and filters, rather than static HTML. Source: https://lnkd.in/ge_56jgJ

WordPress HTML Guide – How to Add & Modify Code Like a Pro 🔍 https://lnkd.in/ez3aDYmV #EditHTML #WordPressCustomization #AddHTML #WPDevelopment #CodeInWordPress #CustomWebDesign #WPBeginner

I managed to find some time and push my StarterKit for WordPress forward. I released version 0.7.0. https://lnkd.in/dVAHqVWi It actually seems counterintuitive. In the age of AI generation and new tools that generate thousands of lines of code per minute, I build something on WordPress, study the documentation, and release it. And this isn't just a learning project. In Celestial, I improved the project structure, dividing everything into four areas: - FSE theme - Core plugin - Editor plugin - Blocks plugin Each part covers everything needed for a WordPress site and does so as closely as possible to the official documentation. This separation also helps make the project more modular. For example, you can simply copy block files from another project, and it will work, since the blocks plugin is the official @wordpress/create-block plugin. There's no need to explain anything about the FSE theme, since everything is structured according to the Wordpress documentation. There's almost nothing custom, and I see that as an advantage. Also, when I was writing the documentation, I knew the AI could follow it. My recent experience with OpenCode shows that it doesn't do a bad job of following the principles in the documentation, as long as they're clearly described and the architecture is unambiguous. The next goal here is to improve the documentation, especially for the AI and developers, so they understand and are clear on how and what to do in this repository. So that the entire architecture is clear without me having to bother.

Tailwind CSS v4 deleted tailwind.config.js. No init command. No content paths. No three @tailwind directives. I rewrote a WordPress theme from v3 to v4 recently, and the entire setup took about 10 minutes. Here's what changed: 1. Configuration moved to CSS. You customize colors, fonts, and spacing with @theme directly in your stylesheet. No JavaScript config file. 2. One import replaces three directives. Instead of @tailwind base, @tailwind components, @tailwind utilities - you write a single @import "tailwindcss"; line. 3. Automatic content detection. Tailwind v4 scans your project files on its own. No more manually listing template paths. 4. New CLI package. The command moved from tailwindcss to @tailwindcss/cli. The full WordPress setup is now four steps: - npm install tailwindcss @tailwindcss/cli - Create one CSS file with one line - Run the build - Enqueue in functions.php That's it. No config file to generate, no content array to maintain. If you're building WordPress themes with Tailwind, this is a real workflow improvement. The guide covers every step with code examples. Link in comments. What's been your experience with Tailwind v4 so far? #TailwindCSS #WordPress #WebDev #CSS #FrontEnd

𝗨𝗻𝗱𝗲𝗿𝗦𝗧𝗮𝗻𝗱𝗶𝗻𝗴 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝗦𝗦 𝗘𝗫𝗲𝗰𝗨𝗧𝗶𝗼𝗻 𝗢𝗿𝗱𝗲𝗿 Many WordPress "bugs" are not bugs at all. They happen when your code runs at the wrong time. To avoid problems, you need to know when WordPress loads plugins, themes, and hooks. Here's what happens when a page loads: - WordPress core boots up - Must-use plugins load - Regular plugins load - The current theme loads - Important core hooks fire - The template is chosen and rendered You don't need to memorize every step, but remember: if your code depends on something, make sure it runs after that thing is loaded. Some key hooks to know: - plugins_loaded: use when your plugin depends on another plugin - init: use when registering Custom Post Types and taxonomies - wp_loaded: use when init is too early for what you're doing - after_setup_theme: use when adding theme support or registering nav menus - wp_enqueue_scripts: use when enqueuing CSS and JS files Sometimes you need to control who runs first. That's where priority comes in. Lower priority means earlier, higher priority means later. Common problems happen when: - You register a CPT at the wrong time - You call a function from another plugin too early - You enqueue scripts directly in functions.php To fix these problems, ask yourself: "At this point, does what I need already exist?" If not, you're probably on the wrong hook. Check your timing, not just your logic. Try moving your code to a different hook to see if it works. Understanding WordPress execution order helps you: - Prevent subtle bugs - Make debugging less painful - Work better with other plugins and themes Source: https://lnkd.in/g4JMkkdw

How to Build a Custom WordPress Dashboard (Step-by-StepGuide) Unused CSS and JavaScript (JS) files are a major cause of slow WordPress sites — they load unnecessary code on every page, increasing file sizes, delaying rendering, and hurting Core Web Vitals like Largest Contentful Paint (LCP). With Google's algorithms penalizing bloated sites and emphasizing mobile speed, removing unused CSS/JS is essential for competitive SEO rankings and low bounce rates. This can cut page size by 20–50% and improve load times significantly....