Since 2008, we’ve been building websites that not only meet but exceed our clients’ expectations. Our team stays ahead of the curve by adopting the latest WordPress innovations. This ensures our clients benefit from cutting-edge features and a platform built to last.

Our mission is your success. We accomplish this by creating custom solutions that truly fit each client’s unique needs. This includes developing new (or custom-built) plugins, enhancing themes, and tailoring designs.

Embracing Change: Block and Site Editor as the Foundation

We are always looking for ways to push the boundaries of what WordPress can do. That’s why we’ve fully embraced WordPress Block Themes that bring the Block Editor and Site Editor’s visual editing capabilities to the forefront.

The introduction of the Block Editor was a game-changer! It shifted away from the classic, text-based editor to a more intuitive, modular approach. Now, creating complex layouts with text, images, videos, and other media is as simple as stacking blocks together.

This shift has made WordPress more accessible, empowering everyone—from beginners to seasoned pros. Anyone can craft rich, dynamic content without writing a single line of code. The Block Editor isn’t just an upgrade; it’s become the new standard for building and maintaining websites.

WordPress didn’t stop there.

Building on the Block Editor’s success, the Site Editor takes things a step further. It extends visual editing capabilities to the entire website design. With the Site Editor, users can design and customize every aspect of their website. That includes headers, footers, templates, and individual page elements. All of this is done directly within WordPress through a cohesive visual interface.

This evolution has turned WordPress into a powerhouse of flexibility. Users can achieve professional-grade designs without third-party page builders or heavy custom coding. By embracing WordPress Block Themes that are fully compatible with both the Block and Site Editors, we’re unlocking the full potential of WordPress. This means we can continue to deliver visually stunning and highly functional websites that meet the modern demands of our clients.

WebDevStudios Block Theme

We have always maintained our own theme framework for our client work. The framework we’ve been using for years is called wd_s, which is a starter theme that we forked from Automattic’s _s.

It served us well for several years, building themes the PHP way. We watched as the WordPress Block Editor evolved and the Site Editor became a reality.

In late 2023, we realized that our ol’ standard theme framework wasn’t going to cut it anymore. We faced three choices: updating wd_s to support modern WordPress capabilities, creating our own WordPress Block Theme, or selecting an existing theme currently on the market.

Ultimately, we created our own WordPress Block Theme. At first, we drew inspiration from Brian Gardner’s Powder theme. But we quickly realized that, while a very solid theme in its own right, it wasn’t set up for what we needed in our developer toolkit to keep in line with how we work.

WDS BT stands for WebDevStudios Block Theme.

WDS BT can be found in our WDS BT GitHub repo. We also set the theme up on a demo site, which allows us to showcase it when we talk to our clients about WordPress, Block Themes, Block Patterns, and more.

WDS BT is a product of the hard work of our engineering team, spearheaded by JC Palmes, Engineering Manager. A big thanks goes to JC for all her hard work and dedication in making our new Block Theme come to life!

Stylish and Tailored for WordPress

WDS BT is a stylish block theme tailored for WordPress that features native blocks and compatibility with the Site Editor. With a contemporary aesthetic, an intuitive interface, and seamless integration with the WordPress Block Editor, WDS BT ensures a polished and adaptable framework across all devices.

It’s crucial to understand that WDS BT is crafted as a foundational theme rather than a parent theme. This difference affords users a flexible starting point for customization.

Standard Development Tools Included

We equipped it with essential tools like NPM, Node, Composer, and Sass. These tools enable us to:

• Register block styles.
• Override or customize core block styles.
• Create block variations.
• Use mixins for responsive media queries.
• Implement Stylelint for consistent SCSS styles.
• Automated Versioning process designed to increment the BUILD number automatically upon merges to the main branch.
• Built-in WDS Block Template Creation Script

Full Design System Baked In

We created a full design system integrated into the theme, a departure from what we did with wd_s. This ensures that all core blocks and default templates have consistent styles. Normally, theme frameworks are plain and without much styling built into them.

However, for WDS BT, we wanted a starter theme with standard, consistent, and default styling for all core blocks out of the box. These default styles will provide a foundation for customizing client projects moving forward.

Manage Design at Scale

A design system is like the blueprint for your digital product’s look and feel, providing a set of guidelines, standards, and specifications that help you manage design at scale. It’s a framework that brings together design principles, patterns, and best practices, enabling designers and developers to create a consistent user experience across your entire website or product. Organizations use design systems to keep their digital products consistent, efficient, and scalable—whether it’s a website, app, or software interface.

What Makes Up a Design System

1. Design Tokens: These are the basic building blocks—like color palettes, typography, and spacing—that define your product’s visual style.

2. UI Components: Consider these as reusable puzzle pieces, like buttons, input fields, modals, and navigation bars. They’re designed to work together, allowing you to build complex user interfaces efficiently.

3. Patterns and Templates: Design patterns are tried-and-true solutions for common usability challenges, while templates are pre-built layouts for specific pages or screens.

4. Guidelines and Documentation: This is the instruction manual that includes design principles, usage guidelines, coding standards, and examples. It ensures everyone involved in the project is on the same page and knows how to use the design system effectively.

5. Tools and Resources: These are the libraries, design files, code snippets, and other resources that make it easy to implement the design system in your projects.

Why a Design System Matters

• Consistency: It standardizes visual elements and interaction patterns, ensuring your product feels cohesive no matter where the user goes.

• Efficiency: A library of reusable components and patterns speeds up your design and development process, cutting down on repetitive work.

• Scalability: As your product grows, a design system makes it easier to add new features and content without losing that consistent look and feel.

• Collaboration: A design system creates a common language for designers, developers, and stakeholders, making collaboration smoother and more effective.

Design systems aren’t static. They’re living, breathing tools that evolve as your product, technology, and user needs change. Keeping a design system relevant requires ongoing maintenance and governance. This ensures it continues to serve its purpose as your product grows and adapts.

Block Themes and Modern WordPress Development

Block Themes are changing the game, bringing a more unified and visual approach to site-building in WordPress. They make it easier for everyone—from users to developers—to create and customize websites without the hassle.

A Block Theme uses Blocks for every part of your site, from navigation menus to headers, content, and footers. These themes are designed to take full advantage of the latest WordPress features, letting you tweak and customize your site’s key elements without ever needing to switch themes.

Unlike old-school themes that leaned heavily on PHP templates and custom theme options, Block Themes are built almost entirely with blocks. This means you can edit nearly every aspect of your site’s design and content right through the Block Editor, giving you a more intuitive and visual design experience.

Some Key Features of Block Themes

1. Site Editor: Block Themes are designed to support the Site Editor in WordPress, allowing users to customize all parts of their site directly in the editor. This includes headers, footers, post templates, and more without editing theme files or using custom code.
2. Block-Based Templates: Instead of PHP templates, Block Themes use block-based templates. These templates are made up of Blocks and can be edited visually through the site editor.
3. Theme.json Support: Block Themes utilize a theme.json file. This configuration file allows theme developers to define custom settings and style options that can be used throughout the theme, including colors, typography, layout controls, and Block settings.
4. Global Styles and Settings: Users can globally customize styles and settings across their entire site, including fonts, colors, and layout configurations, directly within the WordPress admin interface.
5. Accessibility and Responsiveness: Many Block Themes are designed with accessibility and responsiveness in mind, ensuring that sites are accessible to all users and work well on various devices and screen sizes.
6. Simplified Theme Development: For developers, creating a Block Theme can be more straightforward than creating traditional themes. It relies on Blocks and a theme.json configuration, reducing the need for complex PHP coding and allowing for more direct manipulation of the site’s appearance.

Block Editor

Here’s a breakdown of what makes the Block Editor so powerful:

1. Block-Based Editing: The Block Editor is all about Blocks. Every piece of content—text, images, or videos—is a block you can easily add, arrange, and style. This gives you total control over how your posts and pages look and feel.

2. Wide Range of Blocks: Out of the box, the Block Editor comes loaded with various Blocks, from basic text and images to more complex elements like tables, columns, and embeds. This means you can build rich, dynamic layouts without touching a line of code.

3. Custom Blocks: For those who want to go a step further, developers can create custom Blocks that extend the editor’s capabilities even more. These Blocks can be tailored to fit specific site needs, bringing in custom functionality and designs that align perfectly with your vision.

4. Live Editing Experience: The Block Editor provides a true WYSIWYG (What You See Is What You Get) experience. As you build your content, you see exactly how it will appear to your visitors, making real-time adjustments and tweaks. This live preview helps you ensure everything looks just right before hitting publish.

5. Block Patterns and Templates: The Block Editor also supports Block Patterns and templates, as well as predesigned Block layouts you can drop into your content and customize. This is perfect for quickly building complex layouts without starting from scratch.

6. Accessibility and Usability: The Block Editor is designed with accessibility in mind, making it easy for users of all skill levels to jump in and start creating. It adheres to web accessibility standards, ensuring a smooth, user-friendly experience for everyone.

7. Site Editor: With the evolution of the Block Editor, the Site Editor now lets you use Blocks to edit not just posts and pages but also site-wide elements like headers, footers, and sidebars. This brings everything together, offering a more holistic, intuitive site-building experience.

The Block Editor represents a major leap forward in creating and managing content in WordPress. Furthermore, it’s designed to be visual, intuitive, and flexible, empowering both beginners and experienced developers to craft engaging web content and layouts with ease.

Patterns

In WordPress and the Block Editor (Gutenberg), “patterns” are like ready-made block layouts that you can drop into your posts and pages. These Patterns are essentially collections of Blocks that are already arranged in specific ways to create a certain design or functionality.

The beauty of Patterns is that they simplify the content creation process. Instead of building complex layouts from scratch, you can just insert a Pattern and customize it to fit your needs. It’s a fast, efficient way to get your desired design without all the heavy lifting.

The Lowdown on Patterns in WordPress

1. Predefined Layouts: Patterns offer ready-made designs that combine different Blocks into a cohesive layout. These can be as simple as a row of buttons or as complex as a full-featured contact section with text, images, and a form—all setup and ready to go.

2. Time-Saving: Patterns are a huge time-saver. Instead of adding and configuring each Block individually, you can drop in a complete Pattern and tweak it to fit your needs. It’s a fast track to creating visually appealing and functional layouts without the hassle.

3. Customization: While Patterns come with predefined layouts, they’re fully customizable. You can add, remove, or adjust any Block within a pattern to match your content and design preferences, giving you the flexibility to make it your own.

4. Consistency: Patterns help keep your design consistent across your site. Using the same Pattern for similar sections on different pages ensures a uniform look and feel, making your site feel cohesive and polished.

5. Theme and Plugin Integration: Patterns can come from your WordPress theme, plugins, or even the WordPress core itself. This means when you switch themes or install certain plugins, you might get access to new patterns specifically designed to enhance the theme’s or plugin’s functionality.

6. Community Contributions: WordPress developers and designers can, and have, create and share their own WordPress Patterns with the community. The WordPress Pattern Directory is a treasure trove where you can find and import patterns created by others, opening up even more design possibilities for your site.

7. Ease of Use: Inserting a Pattern into your post or page is a breeze. Just browse through the available patterns in the Block Editor’s Pattern Library. Preview what you like, and insert it with a click. It’s that simple.

Patterns in WordPress are all about making content creation more flexible and user-friendly. They give everyone—from beginners to pros—the tools to create professional-looking layouts without needing to be a tech wizard or a design guru. It’s all about democratizing web design, making it easier and more accessible for everyone to build beautiful, functional websites.

Full-Page Patterns (Layouts)

Full-page Patterns are like having a complete, ready-to-go page layout at your fingertips. Unlike smaller Patterns that might only cover a specific section (like a header, gallery, or testimonial), these are full-blown page templates. They come with everything you need—think hero sections, About sections, services, contact forms, and footers—all laid out for you in one cohesive design.

Full-Page Patterns Are a Game-Changer

1. Comprehensive Layouts: They offer a full layout solution for an entire page, combining multiple sections and content Blocks. This means you can skip the grunt work and quickly have a fully structured page up and running.

2. Variety of Uses: Whether you need a landing page, an About page, a contact page, or a portfolio, full-page Patterns have you covered. They give you a quick way to add and customize content for any purpose, so you’re not starting from scratch.

3. Customization: Although full-page Patterns have a predefined layout, they are fully customizable. You can tweak, add, or remove Blocks to fit your content and style. Make it your own while still saving time.

4. Theme Integration: Many WordPress themes include a selection of full-page Patterns, ensuring they blend seamlessly with your site’s design. This keeps your website looking consistent and polished without extra effort.

5. Time-Saving: Full-page Patterns give you a head start, providing a structured foundation that speeds up the page-building process. You can roll out complex layouts quickly without compromising on quality.

6. Inspiring: If you’re stuck on page design ideas, check out full-page Patterns for inspiration. They show practical examples of how to combine Blocks effectively, helping you create effective layouts.

Full-page Patterns make the WordPress Block Editor even more powerful. It is easier than ever to create professional, well-designed pages without needing a ton of design or development know-how. It’s all part of WordPress’ mission to make web design more accessible and efficient for everyone.

Global Settings & Styles (theme.json)

The theme.json file has also changed the game for WordPress themes. It offers a streamlined way to manage a theme’s appearance and behavior, especially in the Block Editor (Gutenberg).

Introduced in WordPress 5.8, this configuration file lets theme developers set up default styles, settings, and configurations. This provides more control over the design and functionality of a WordPress site without needing a ton of custom code.

Here’s what theme.json can do:

1. Define Global Styles: With theme.json, you can set global styles that apply across your entire site, from colors and typography (fonts, sizes, weights) to layout settings. This ensures your site maintains a consistent look, regardless of the content you add.

2. Configure Block Settings: Developers can define default settings and styles for specific Blocks. You can control how they look and behave right out of the box. You can even decide which Block options users see in the editor or hide certain settings altogether.

3. Control Color Palettes and Gradients: Want custom color palettes or gradients available in the Block Editor? theme.json lets you set these up, making it easy for users to apply your brand’s colors throughout the site.

4. Manage Typography Options: theme.json allows you to specify custom typography options, like font sizes, families, and line heights, which users can easily apply through the Block Editor.

5. Customize Layout and Spacing: From one file, you can control the site’s overall layout. Control content sizing, spacing, and Block supports, like padding and margin.

6. Enable or Disable Block Features: theme.json allows you to globally enable or disable Block features like custom backgrounds, color settings, or link colors.

7. Simplify Theme Development: theme.json simplifies the development process by centralizing much of the theme’s design and functionality settings. It reduces the need for extra CSS and PHP, making it easier to implement and maintain design standards.

8. Enhance Theme Consistency: The theme.json file ensures that your site’s look and feel remain consistent. It maintains this consistency even as users customize and add content with the Block Editor.

The introduction of theme.json is a big step forward in making theme development more efficient and user-friendly. It empowers theme developers to create flexible, consistent designs. At the same time, it gives users the tools to customize their sites without disrupting the design system.

Conclusion

At WebDevStudios, WordPress is more than just a platform—it’s the heartbeat of everything we do. We’re all about pushing boundaries. WebDevStudios believes in embracing innovations like Block Themes, Block and Site Editors, and robust design systems. We aim to build beautiful, functional, consistent, and scalable websites.

Our WDS BT WordPress Block Theme proves our dedication to crafting tailored solutions that meet each client’s unique needs. We maximize WordPress’ potential in every project. As WordPress evolves, we’re right there with it, ensuring that every site we build is ready for the future. By partnering together, let’s create a digital experience that lasts and impresses.

The post Embracing the Future: How WebDevStudios Is Leading with WordPress Block Themes appeared first on WebDevStudios.

Should Developers Be Using WP_HTML_Tag_Processor?

Let’s all be clear that even experienced developers are not quite fond of using regular expressions. They are not readable and friendly, and it takes a while to get used to them if you haven’t used them in a while.

For example, what if you wanted to create a function that adds an extra-strong class to the existing <b> and <strong> tags in post content? Below, we’ll compare doing so using Regex vs using WP_HTML_Tag_Processor.

WP_HTML_Tag_Processor vs Regex

Here’s the example content:

This is how the function looks using Regex:

View the code on Gist.

That’s a lot of code for something that we might consider very simple. How hard does it need to be to add a class to a couple of tags, right?

Now, let’s look at what happens when using the WP_HTML_Tag_Processor approach:

View the code on Gist.

This is way more readable. You can see there’s a while, then you loop through the elements, and if you find what you’re looking for ( a <b> or a <strong> tag ), then you just go for it and add the class.

Here’s the result:

As we can see, the extra-strong class was properly added, and even the existing class was considered.

This is just one quick example of how using WP_HTML_Tag_Processor can make our lives easier. There are other things that we can do with it, such as:

• Updating properties before sending the content to the DOM. For example, adding properties like lazy-loading or removing inline CSS elements.
• Operations are safe by default. There’s no need to escape the content before or after.
• You can set an attribute value without checking if it exists; it won’t be duplicated.
• You can find tags by name and/or class name. See the example below.

View the code on Gist.

Everything looks great, but what about performance?

Performance matters. I took the liberty of testing the performance against our previous Regex function and through the XQuery function as well.

Remember the Regex function:

View the code on Gist.

Now, here’s the XQuery function:

View the code on Gist.

I ran this through a WP installation with more than 8,000 posts, and these are the results:

That makes you think. Is its readability enough to compensate for the lack of performance? Again, this is an isolated case, and maybe this might be fit for smaller use cases and not to be used to perform large operations.

What’s Missing from WP_HTML_Tag_Processor?

Since this is a new tool, there are a couple of features that we wish we had but are not still available in the API, such as:

• You can’t find nested tags or updated tag’s innerHTML or text.
• You can’t delete or add new tags
• You can’t read the content between two tags.
• Even though you can confirm if a tag is self-closing, you can’t match an opening tag with a closing tag.

Some of these features might never be available due to the nature of this API, and some of them can decrease its performance substantially, so those constraints help the API remain efficient.

Are you planning to use the WP_HTML_Tag_Processor in the future? Let us know down below in the comment section.

The post Using WP_HTML_Tag_Processor: What You Need to Know appeared first on WebDevStudios.

PHP’s versatility lies in its ability to handle a wide range of tasks, from creating simple static websites to developing complex web applications and APIs. PHP’s popularity stems from its ease of use, extensive documentation, and a large community of developers.

It powers over 75% of all websites that use a server-side programming language, including some of the most well-known platforms like WordPress, Drupal, and Joomla. This widespread adoption showcases PHP’s relevance in the modern web development landscape.

The widely-used scripting language for web development has evolved significantly over the years, and its latest version, PHP 8, brings forth a range of exciting features and improvements that can enhance your coding experience and boost your application’s performance. If you’re still using older versions of PHP, it’s high time to update to PHP 8.

In the dynamic world of web development, staying up-to-date with the latest technologies and software versions is paramount. One such crucial update you should consider is migrating your website to PHP 8. If you’re running a WordPress website, this update is even more significant. In this article, we’ll delve into the reasons why updating to PHP 8 is essential for the health, security, and performance of your WordPress website and also the reasons why this upgrade is a game-changer for developers and businesses alike.

Why You Should Update to PHP 8

PHP 8, released in November 2020, introduced a plethora of improvements and new features that enhance the overall efficiency of your web applications. Let’s explore some of the key advantages.

Performance Boost

One of the standout features of PHP 8 is its substantial performance improvements. Thanks to the new Just-In-Time (JIT) compiler, your PHP applications can run significantly faster. This means your WordPress website will load quicker, providing a smoother and more engaging user experience.

Typed Properties and Arguments

PHP 8 introduces the ability to specify types for class properties and function arguments. This enhanced type safety can help prevent bugs and errors in your codebase, leading to more reliable and stable WordPress plugins and themes.

Union Types

With PHP 8, you can use union types to indicate that a parameter or return value can be of multiple types. This flexibility streamlines your code and improves its readability, making it easier to understand and maintain.

Attributes

Attributes allow you to add metadata to your code, enabling cleaner and more organized documentation and information. This is particularly useful when developing or using WordPress plugins, as it simplifies the process of understanding their functionalities.

Recommendations for Upgrading PHP 8

Check Compatibility First

Before upgrading, ensure that your website’s codebase and all the plugins, themes, and libraries you use are compatible with PHP 8. You can use tools like the PHP Compatibility Checker or run PHPUnit tests to identify any potential issues.

Work with a Host Provider That Supports PHP 8

Make sure your hosting provider supports PHP 8. Many reputable hosting providers offer multiple PHP versions. Contact your hosting support to inquire about PHP 8 availability and any specific steps they recommend for upgrading.

Reach Out to Experts (e.g., WebDevStudios)

If you’re unsure about the upgrade process, consider reaching out to experts like WebDevStudios. We can provide guidance on best practices, potential challenges, and even assist you with the upgrade process with a monthly retainer for ongoing web development and support.

Troubleshooting Tips for Common Problems

During the upgrade process, you might encounter some common problems. Here are some troubleshooting tips:

• White Screen or Errors: If you encounter a white screen or error message, enable PHP error reporting. Check the error logs to identify the root cause of the issue.
• Deprecated Functions: PHP 8 introduces a lot of deprecated functions and changes. Update your codebase to use the new recommended functions and syntax.
• Incompatible Plugins/Themes: Some plugins or themes might not be updated to work with PHP 8. If you experience issues after the upgrade, disable plugins/themes one by one to identify the culprit.
• Memory Limit Exhaustion: PHP 8 might require more memory than older versions. Adjust the memory_limit in your PHP configuration if you encounter memory exhaustion errors.
• Namespaces and Classes: PHP 8 might be stricter with namespaces and classes. Ensure your code follows proper namespace and class naming conventions.
• Compatibility Mode: PHP 8 introduces stricter type-checking. You might need to update your code to adhere to stricter type requirements.
• Opcode Caches: If you’re using opcode caches like OPCache, clear the cache after the PHP upgrade to prevent conflicts.

Backup Everything

Before you begin the upgrade process, create a full backup of your website, including the database and all files. This ensures that you can revert to the previous state if anything goes wrong during the upgrade.

Test in a Staging Environment

Set up a staging environment to test the upgrade before applying it to your live site. This helps you identify and fix any issues without affecting your live website.

Gradual Upgrade

If possible, consider a gradual upgrade approach. You can start by upgrading to a slightly newer version of PHP (e.g., PHP 7.4) to address any immediate compatibility issues, then proceed to PHP 8 once your codebase is ready.

Remember that upgrading PHP can be a complex process, and thorough testing is crucial. Following these steps and tips should help you have a smoother transition to PHP 8 while minimizing potential issues.

You Won’t Regret It

Upgrading to PHP 8 might sound like a daunting task, but the benefits it brings are well worth the effort. Let’s revisit the advantages of making the leap to PHP 8, including its impact on speed, security, and even search engine optimization (SEO).

• Speed: PHP 8 is faster and more efficient than its predecessors. With performance improvements and optimizations under the hood, your website will load quicker, enhancing user experience and keeping visitors engaged. Faster load times can significantly reduce bounce rates and improve overall user satisfaction.
• Security: Security is a top concern for any website owner. PHP 8 comes with enhanced security features and fixes vulnerabilities present in older PHP versions. By upgrading, you’re adopting the latest security measures, safeguarding your website and user data against potential threats.
• SEO Impact: Website speed is a crucial factor affecting SEO. Search engines like Google consider page load times when ranking websites. Upgrading to PHP 8’s improved speed can contribute positively to your site’s SEO, potentially boosting its visibility and ranking in search results.

Why Wait? Take the Plunge!

Embracing PHP 8 is not just a technical upgrade; it’s an investment in your website’s future. The benefits of improved speed, heightened security, and better SEO are undeniable. By upgrading, you’re ensuring your website remains competitive in a fast-paced digital landscape.

Need Help Updating to PHP 8?

If you’re unsure about how to initiate the upgrade process or need expert assistance, don’t hesitate to reach out to WebDevStudios. As a renowned authority in web development, we offer ongoing support to seamlessly transition your projects to PHP 8. Our team of experts can guide you through the upgrade, address compatibility concerns, and ensure your website maintains its performance and security.

Don’t let the fear of the unknown hold you back. Embrace the future of web development when you update to PHP 8. You will reap the rewards of a faster, more secure, and SEO-friendly website. Upgrade today and let WebDevStudios be your partner in this transformative journey. Your website and your users will thank you.

The post You Need to Update to PHP 8. Here’s Why. appeared first on WebDevStudios.

This makes it easy for plugin and theme authors to apply various filters and alter the output. However, it gets complicated when there are multiple filters applied for the same output.

It was not possible to check if your filter had been run or not in older versions of WordPress. With WordPress 6.1, the new function did_filter solves this problem. This function returns the number of times the filter has been applied in the current request.

How to Use the did_filter Function

If you are familiar with did_action, then this is easy to guess. The did_action function allows you to check if an action has been fired in the current request.

if( did_action( 'hook_name' ) ){
 // do something
}

The did_filter function works the same way, but it checks for the filter. Let’s take a look at this simple implementation

View the code on Gist.

For this example, let’s imagine a scenario where we want to append the category name to the post title using a filter. And if the category name is already appended, the callback should stop the execution.

• plugin_title_change prepends the category name to the post’s title by using the filter ‘lax_plugin’
• theme_title_change plugin checks if the lax_plugin filter is already executed, then prepends the category name

This prevents the duplicate execution of the filter.

How Does It Work?

Every time when we use apply_filters, the global variable $wp_filters gets incremented. See this snippet from the core apply_filters function.

if ( ! isset( $wp_filters[ $hook_name ] ) ) {
$wp_filters[ $hook_name ] = 1;
} else {
++$wp_filters[ $hook_name ];
}

did_filter just returns the count of the hook from the global $wp_filters array.

function did_filter( $hook_name ) {
global $wp_filters;

if ( ! isset( $wp_filters[ $hook_name ] ) ) {
return 0;
}

return $wp_filters[ $hook_name ];
}

When to Use the did_filter Function

The most common use case is to check whether a filter has been applied. You can also use this function to check the number of times a filter has been applied during the current request.

Side note: At the time of this writing, VS code extension PHP Intelephense v1.9.4, throws a warning “Undefined function ‘did_filter’.intelephense(1010).” You can safely ignore it, and the function should work as expected.

Further Reading

did_filter WordPress official documentation

The post Quick Tip: Using the did_filter Function appeared first on WebDevStudios.

However, with this convenience comes a paradox of choice. There is often too much information to choose from.

When you want to learn about a particular web development topic, you may wonder which path to take. Should you read a blog post about it or dive into the developer documentation? In this blog post, we’ll explore the differences between the two and help you decide which one to choose.

Web Development Blog Post vs. Developer Documentation

First, let’s define what we mean by a blog post and developer documentation. A blog post is an informal article written in a conversational tone that aims to educate, entertain or inform readers about a particular topic. It is usually written by an individual or a group of individuals and may offer a unique perspective or point of view on a topic.

Web developer documentation, on the other hand, is a technical document that provides detailed information about a product or service. It’s usually written by the product creators or developers and is intended to help users understand how to use the product or service effectively.

So, when should you read a blog post versus the developer documentation? Well, it depends on your goal and the information you need.

When to Read a Blog Post

If you are looking for insights or best practices from WordPress development experts who have used the product or service, blog posts can be a valuable resource. Blog posts are usually written by professionals who have hands-on experience with the technology and can provide real-world examples and advice on how to use it effectively.

Also, blog posts are ideal when you’re looking for a general understanding of a web development topic or want to learn from someone’s personal experience. For example, if you’re interested in learning about the benefits of Headless WordPress, a blog post could offer you some personal insights into how Headless WordPress has helped the author’s clients. Or, if you’re interested in learning about an alternative way to debug React, a blog post written by a senior backend engineer could give you some valuable insights and tips.

Benefits of Reading a Blog Post

Blog posts can be an excellent way to get started on a web development topic, and they’re often written in a more conversational tone, making them easier to understand. They can also be a great way to learn about a topic from someone who has experienced it first-hand, which can make the learning experience more relatable and engaging.

In our software world, blog posts can also be an excellent source of information for staying up-to-date with the latest trends and developments in the software industry. For example, if you are interested in learning about a new programming language or framework, reading blog posts from experts in the field can help you stay informed and ahead of the curve.

I want to give you an example of some blog posts about one of our flagship products, the Custom Post Type UI Plugin, this type of article allows you to stay up to date on the latest news about this product from another’s point of view person or expert:

• The History of Custom Post Type UI
• Custom Post Type UI Supports WPGraphQL
• How to Create WordPress Custom Post Types With Plugin

When to Read Developer Documentation

Documentation, on the other hand, is ideal when you need specific information about a product or service. If you’re figuring out how to use a new technology or software, documentation is the best place to start.

Designed to be technical and comprehensive, developer documentation provides everything you need to know in one place. This includes the features, functions, and capabilities of that product or service.

Documentation can be particularly useful when you’re trying to troubleshoot or need to understand a specific feature or functionality. It’s also helpful when you’re looking for step-by-step instructions.

Developer documentation is typically written by the software vendor or publisher, so it is generally reliable and updated. It also covers all the essential topics and features of the product or service. This ensures you have a good foundation to build upon.

Based on the blog post example above, here is the documentation of the same product.

Conclusion

When choosing between a web development blog post and developer documentation, it’s important to consider your goal. A blog post is the way to go if you are looking for:

• General Information
• Expert or Personal Insights
• Real-World Examples
• The Latest Industry Trends

If you need specific information or step-by-step instructions, developer documentation is the way to go.

It’s worth noting that both blog posts and documentation can be valuable learning tools, depending on your needs. Ultimately, it’s up to you to decide which one is the best fit for your learning style and goals.

The post Understanding Web Development: When to Read a Blog Post or the Developer Documentation appeared first on WebDevStudios.

Improve Your User Experience (UX)

User experience is critical to the success of your website. A good UX will help visitors navigate your website, find the most important content, and understand the actions they need to take. A poor user experience will frustrate your visitors by preventing them from seeing what they want and tripping them up when they submit a form or purchase. You can solve this problem by redesigning your website every five years.

Visitors who encounter an optimized user experience are more likely to engage with your content. Meanwhile, visitors who have a terrible experience will become frustrated and leave, never to return.

When redesigning your website, you can improve UX using modern, well-researched design principles. A well-designed website that is easy to navigate can increase engagement and conversions.

Achieve Better SEO Results

Search engine optimization (SEO) is essential to driving traffic to your website. Websites that aren’t optimized for search engines are unlikely to appear in the top results for relevant search queries.

SEO is a field that’s constantly changing. If your website was optimized for search engines years ago, it might not achieve the same results today that it did in the past. Search engines like Google and Bing constantly tweak their algorithms, and website owners must keep up with those changes to stay relevant.

When you redesign your website every five years and keep SEO in mind, you help to improve your search rankings, increase traffic, and generate more leads and conversions.

Mitigate Costs

Are website redesigns cheap? No.

But it’s much costlier to redesign a 15-year-old website than a 5-year-old website.

Processes, such as a website redesign, require more labor and time on old interfaces. As software evolves, your old website gets further and further behind.

When a redevelopment project is underway, more of the website must be rebuilt from scratch. Here are some examples.

• Data Migrations: More work will need to be done to migrate old content into a new system because the old and new databases don’t match up.
• Old Code: Old technologies, plugins, and code libraries will no longer be applicable and must be replaced.
• Information Architecture: The website’s structure, such as its information architecture, URLs, and navigation, might need to be reworked entirely.
• More significant Design Project: A complete website redesign, rather than a facelift, will be necessary to refresh the look and feel.
• Editorial Experience: New systems must be implemented to meet your editorial needs, which will have evolved in the years since your last website development project.

You’re better off having a website redesign performed every few years rather than every 10-15 years. But suppose you get to the point where you haven’t redesigned your website in a long time. In that case, it’s an excellent opportunity to do a significant overhaul and rethink all aspects of its design and functionality.

Take Advantage of New Features and Technologies

If you haven’t redesigned your website in 10 or 15 years, you’re missing out on the latest developments in web technologies. Here are some examples of technologies you can take advantage of now that your old website isn’t capable of.

• Headless WordPress: You can use WordPress as backend software to manage your data and content while using other technologies for the frontend display of the website.
• React and other JavaScript Libraries/Frameworks: JavaScript has evolved at a breakneck pace over the past 10 years, and libraries like React are used to build interactive user interfaces and web applications quickly and efficiently.
• Blocks and Site Editing: WordPress is undergoing a significant shift and now includes a block editor that allows content to be easily arranged and edited in a whole new user experience.
• CSS3: The latest innovations in CSS give developers access to tools like media queries, CSS Grid, and Flexbox that significantly improve responsive layout and design. CSS is now capable of animations, which could previously only be done with JavaScript. Designers and developers can create interactive and visually appealing websites with less work.
• WordPress Plugins: You can accomplish much more with your WordPress plugins. In the last 10-15 years since you overhauled your website, new plugins will have been developed that solve your business needs, and existing plugins will have been updated with new features.

Updating your website more often will allow you to keep up with emerging technologies and trends in web development. You don’t have to keep up with everything, but you also don’t want to miss out on technologies that would benefit your business.

Move Away From Old Tech

As new technologies are developed, old technologies are discontinued, fall out of favor, and become security risks.

• Discontinued Code: Flash is an excellent example of a web technology no longer used. Flash was popular before JavaScript evolved enough to replace everything it offered, and it eventually reached an official End Of Life and is no longer supported.
• Discontinued Browsers: Internet Explorer was once frustrating for web designers and developers because it was so difficult to support. Microsoft has permanently disabled it and discontinued all support, so it’s no longer necessary for your website to keep it.
• Security Patches: Whether or not you completely redesign your website, keeping up with security updates is essential. WordPress themes, plugins, and WordPress itself regularly release security patches. You’re opening yourself up to many well-known security holes if your website is significantly outdated.

Security is critically important to keep on top of, and developing your website using new features can also eliminate old headaches and streamline your development processes.

Stay Ahead of the Competition

Finally, redesigning your website every five years can help you stay ahead of the competition. If your competitors have recently redesigned their websites and you haven’t, you could be falling behind.

A website developed recently with a modern design and updated technologies will look and operate noticeably differently than a website from 15 years ago. You can either be the business with the current website or the business left in the dust.

A redesign can help you stay on top of the latest trends and technologies and ensure that your website meets your customers’ needs. Now that you know contact WebDevStudios. Let’s chat about your new website redesign.

The post Why You Should Redesign Your Website Every Five Years appeared first on WebDevStudios.

In recent years, artificial intelligence (AI) has become increasingly accessible to developers, with a range of tools and frameworks available that make it easier than ever to integrate AI into your WordPress website. In this blog post, we’ll explore some of the benefits of using AI in WordPress and provide a guide for integrating it into your website.

What Is AI?

Artificial intelligence refers to the ability of machines to learn from data and perform tasks that would typically require human intelligence. AI systems can analyze large amounts of data, recognize patterns, and make predictions based on that data. Some examples of AI include speech recognition, natural language processing, and image recognition.

Benefits of Using Artificial Intelligence with WordPress

There are several benefits to using AI in WordPress, including personalization, automation, and improved website performance.

Personalized UX

Perhaps the most significant benefit of integrating artificial intelligence into WordPress is the ability to personalize the user experience. With AI, you can gather data on your visitors and tailor your website to meet their needs and preferences.

For example, you could use AI to recommend content or products based on the visitor’s browsing history or to generate custom landing pages based on their search queries.

Automation

Another benefit of using AI in WordPress is the ability to automate tasks. AI can be used to automate repetitive tasks such as image tagging, content moderation, and customer support. This can save you time and resources, allowing you to focus on more important tasks.

Improved Website Performance

Finally, using AI in WordPress can help improve website performance. AI can be used to optimize website speed and performance by predicting visitor behavior and preloading content accordingly.

Integrating AI into WordPress

Now that we’ve discussed the benefits of integrating AI into WordPress, let’s look at how to do that by exploring some plugins available for WordPress that involve artificial intelligence (AI) in various ways. Here are a few examples:

Conclusion

Integrating AI into your WordPress website can provide various benefits, including personalization, automation, and improved website performance. By following the steps outlined in this blog post, you can get started with AI in WordPress and take advantage of its many benefits.

The post How to Integrate Artificial Intelligence into WordPress appeared first on WebDevStudios.

The truth is that a customized WordPress plugin built to represent your brand requires a team that is dedicated to:

• Ongoing support via the WordPress Support Forum
• Updates and maintenance
• Performance
• Security
• Quality assurance and testing for compliance

WDS receives many inquiries requesting plugin development, some of which come from folks who don’t understand the complexities of WordPress plugin development. Here’s what you need to know.

A Brief Background on Plugin Development

WordPress plugins are a vital part of the overall WordPress ecosystem. The official WordPress Plugin Directory features over 60,000 freely available plugins that can be installed and used on any WordPress website.

A plugin could be as simple as a few lines of code, or as complex as an entire eCommerce system, there really is no limit! WordPress is also used on more than 43% of all websites on the internet. So, if your company or services can interact with a website, you absolutely need an official WordPress plugin, to expose your business to almost half of the internet!

Plugin development requires understanding the “WordPress way.”

For many, the idea of building a simple plugin may not seem like a tough task. The reality is that so much more goes into plugin development than most realize.

Genuinely understanding the core WordPress software, and the proper ways to integrate your plugin is critical in building a solid plugin foundation that can grow as your users and services grow. If you aren’t building your plugin the “WordPress way,” it will likely be rejected by the Plugin Directory review team.

Working with a company that understands the correct way to build a WordPress plugin is essential. We even wrote the book!

Do you know how to get your plugin listed?

Listing your plugin on the official WordPress Plugin Directory also takes some experience. All plugins are reviewed by the plugin review team, and if they aren’t up to spec will be rejected.

That’s why it’s imperative you work with experts who specialize in not only building powerful WordPress plugins but also someone who understands the process for review and acceptance to the directory.

Compliance is key.

WordPress continues to grow as a platform, and as such new major versions are released approx four times a year. Point releases, or minor updates, occur, on average, about once a month. As new versions are released it’s crucial your plugin is tested and confirmed to work as expected.

There are also notices within the Plugin Directory that indicate your plugin is fully compatible with the current version of WordPress, giving new and existing users confidence that your plugin will continue working as expected when they upgrade WordPress.

Every brand must keep their WordPress plugin compliant with the most current version of WordPress. If it’s not, WordPress lets users know. Such a warning can be embarrassing and looks terrible for your company.

While compliance is key, the keys to achieving compliance are testing and quality assurance. Besides having a dedicated developer ready to respond to WordPress Support Form requests, do you also have one responsible for consistently and constantly testing your brand’s WordPress plugin? It’s vital that you do.

Safe, Secure, and Performant

Security and performance should be at the forefront of everything when developing a WordPress plugin. Our team is trained on and follows WordPress security standards.

We verify all codes are as secure as possible using the proper WordPress hardening methods within the code. Your team should do the same, and if you don’t have one, find professionals who can do that for you.

Performance is another critical area of focus for all plugins we create. How will your plugin handle five users vs five million? You better have a plan for that.

Your plugin users expect access to support.

No matter how much documentation you provide for your brand’s WordPress plugin, your users are bound to encounter errors or simply misunderstand instructions. That’s normal.

However, they expect help. They want to be able to interact directly with the plugin developer and have their issues resolved in a timely manner.

Once you have launched your plugin, have a developer assigned to respond to tickets in the WordPress Support Forum. Be ready to deliver the same kind of customer service for your plugin that your brand normally offers for your other products and services.

Your brand’s WordPress plugin should continually be updated and maintained to perform well.

A plugin that is not continuously updated and maintained is a plugin with poor performance. Your users will hate that and stop using it. What’s even worse, your users could very well leave negative reviews of your plugin. Let’s avoid that.

After launch, continue to update and maintain the health of your plugin. This commitment will show in the performance of your plugin, which will impress your users. The performance of your brand’s WordPress plugin must complement the quality of your brand’s reputation.

WebDevStudios Plugin Development for Brands

It’s essential that your plugin scales as your success does. Our team can help advise and recommend performance techniques, including advanced caching methods, transients, performant SQL database queries, and more. Your plugin will be capable of handling any amount of traffic and growth!

WebDevStudios literally wrote the book on WordPress plugin development. As a co-author of “Professional WordPress Plugin Development, 2nd Edition,” the WDS team and I have valuable experience and expertise in the subject matter.

Your success is our mission. That means that when we develop the official WordPress plugin for a client, we don’t abandon them after launch.

Our dedication to their plugin continues after. We provide ongoing support, including interacting with users at the WordPress Support Forum, maintenance, security, updates, quality assurance, and testing. Every plugin we customize for our clients complies with each WordPress release.

Are you ready to have a customized WordPress plugin built for your brand? Then contact us. Let’s talk about launching your brand’s WordPress plugin.

The post Your Brand’s WordPress Plugin Requires More Than Development appeared first on WebDevStudios.

Outside of the computer running the software, user acceptance testing can be very low tech, only requiring a spreadsheet and a stopwatch. The stopwatch is kind of an exaggeration, but if the user journey takes too long, you lose the user.

So you do want to keep performance in mind incase it becomes a barrier for the user in completing the steps. The spreadsheet is the checklist where each test sequence is laid out. A collection of test scenarios is called a test suite.

Example of User Acceptance Testing (UAT)

An example of a test scenario might be as follows:

• Navigate to the homepage.
• Click “contact us” link.
• Observe contact page loads.
• Fill out contact form completely.
• Submit form.
• Verify no errors are present and thank you message displays.

Each point starts with a verb followed by some element of the website. You’ll notice that these steps are pretty simple and a lot of this can be automated for extra testing coverage.

However, you don’t want to skip the human powered UAT because it will be an avenue for reporting unexpected issues and behaviors in the software.

Who can conduct UAT?

Anyone.

User acceptance testing can be done by anyone on the team. It can also be a great task for anyone working adjacent to the project team looking to get involved.

There are arguments to be made that the tester probably should not be the developer, mainly due to blind spots. You can always have more than one person conducting UAT. The more eyes on a project, the more bugs that can be surfaced.

When should UAT be conducted?

After an update has been pushed to an environment.

UAT is a safety check to make sure the expected high level functionality of the site is still intact. A safety check to ensure the site is still useable to the user.

The Importance of UAT

User acceptance testing is the most important testing because it ensures your website and its purpose for existing is still intact. If you spend hundreds or thousands of hours developing software that is unusable to the end user, its basically worthless.

The downside to UAT is that it doesn’t provide the developer with a lot of details about where the issue is occurring. In our example test scenario above, there can be many reasons why the user could be unable to submit a contact form.

It could be a backend issue keeping the whole page from displaying or a frontend bug that is displaying the form incorrectly. This is why it’s important to make informative bug ticket once you do find a bug.

Bug Reporting

Here are some best practices for creating a bug ticket. Ultimately you want a ticket to be useful to the developer and the person who will be testing once the fix is complete.

The first thing the developer is going to do is try and reproduce the issue. Your ticket needs to provide all the necessary information for them to do that. For website testing it makes sense to include the following:

• Consistent title formats
  • An example could look like, “Homepage – Image carousel not rotating”
• A description of the issue
  • It can help to include which step you were on when the failure occurred.
• A link to the page where the issue is occurring
• A screenshot of the issue
• Mention the device/OS/browser being used when issues seen.
  • Macbook/MacOS/Safari

Things to avoid:

• Nesting multiple issues in one ticket
• Creating multiple tickets for the same issue

Conclusion

By implementing user acceptance testing, you can save yourself from a lot of headaches later. Hopefully now, you understand the importance of it. Contact WebDevStudios when you want a team to test the performance of your website.

The post User Acceptance Testing appeared first on WebDevStudios.

What is a website audit?

A website audit is an examination of the performance of your website. An audit can help you determine whether or not your website is optimized for the amount of traffic you are expecting to have in the new year.

In layman’s terms, a website audit is like going to a doctor to prepare yourself for a marathon. You check to see if your body is prepared for it. Or you receive suggestions on what you need to get in shape and make a plan.

What should a website audit include?

A full website audit should include marketing and sales goals, data analytics, UI/UX design, and evaluation of the CMS to see if it’s currently working with your needs and goals, usability, consistency, accessibility, content, security, and other technical aspects.

For the purpose of this article, we will concentrate on the importance of evaluating the technical aspects of a WordPress website audit, such as security, performance, coding standards, vulnerabilities, speed, and checking the most updated versions of plugins, themes, and WordPress.

Technical Evaluation

Why is a technical evaluation important? What’s in it for the business?

A technical evaluation is important because if the website has aspects that do not function properly, your users (audience/clients) may not be able to achieve their main objective of visiting your website. They will leave, and you want your company to stand out among your competitors.

How long does a technical evaluation take?

We know that time is money, so it is essential to highlight that a technical website audit usually takes between 2-4 weeks, depending on the size and complexity of your website. It will usually start with diagnosing your site, which includes scanning your URL to detect any viruses and malware, which is any malicious code that allows unauthorized access to your site, that hackers might have installed.

What does a website audit entail?

A website audit from WebDevStudios means we examine or look within all your posts, pages, and comments for malicious codes or URLs and create a report. This gives us more insight into your website’s performance, including technical SEO, page speed, user experience scored, and security.

Other items we look for during a website audit are:

• A diagnosis of your site’s health to analyze any critical information about your core configuration and even get more granular to the level of reviewing other technical aspects of your website, such as the theme you are currently using.
• An evaluation of the installed plugins and the media and determine if these are up to date and hurting your website’s speed.
• Reviewing the code to determine any errors within it.

Besides checking the items previously mentioned, it is vital to check the integrity of your files. The main objective of this is to detect any file changes in the operating system and web servers.

During this process, “fingerprints” of your site’s files are evaluated and then compared the files against WordPress original files to determine if any files have been changed.

Accessibility Matters

Accessibility is another important component of your website audit, an often overlooked element. Auditing accessibility matters because you want your website to be accessible to people with disabilities, like website visitors who are blind, have hearing problems, have cognitive impairments, and such. Make sure that people with different abilities can access your website.

When should you have a website audit?

Performing an audit is recommended when:

• Changing the website company that helps you maintain and support your website
• You are not obtaining leads from your website
• You are an eCommerce site and want to make sure that your client’s information is secured
• Your website is not ranking in search engines

Sometimes malicious code or files are encrypted or hidden, making it hard to be caught at first glance. Therefore you require professionals to ensure that any encrypted code is malicious or not without breaking your site.

Detecting issues at an early stage is very important. Doing so allows you to mitigate and limit any attack or damage. With a new year approaching, we suggest starting your 2023 off right with a website audit.

Take a moment to spot issues before they become a real threat to the security or functionality of your website. Contact WebDevStudios to schedule your next website audit.

The post Start Your New Year Right With an Audit of Your Website appeared first on WebDevStudios.