The design, typography, components, audience, location, language, and many other factors make every website unique. Based on the use case, WordPress’ flavor varies. Let’s talk about it in detail.

The Different Flavors of WordPress

Building a WordPress site is unique to each project besides the use cases. You can stick with WordPress core features and extend them by using Gutenberg blocks and patterns to build dynamic layouts.

With WordPress, the possibilities are endless. There are, however, some typical use-case scenarios for building a website powered by the most popular CMS. Below are the most common examples.

Blog

WordPress was a blogging platform. Over the years, it has grown into a content management system (CMS) with powerful features.

CMS

Today, large-scale business organizations use WordPress as a content management system to easily maintain their online presence.

Multisite Network

Universities use WordPress as a multisite network to manage multiple websites for different departments under their institutional organization.

Communication

Some organizations use WordPress for internal communication. For example, P2 is a communication tool for teams, based on private WordPress.com blogs. It acts as a shared inbox, a communication solution anyone can build on WordPress.

Commerce

You can build online stores with WooCommerce, sell memberships and subscriptions, and do many commerce-related things.

LMS

A learning management system (LMS) is another good use of WordPress. Creating online courses is easy with a WordPress LMS.

Things to Consider When Building a WordPress Website

Tech Stack

A website is like an online business card for your organization where people can find you and make a first impression. So it is crucial to discuss the features required on the website and choose the technologies based on them.

A seasoned web development agency can help you compare and decide on the technologies. At WebDevStudios, we start with the discovery call then the project passes through a strategy phase where technologies and tools get finalized.

Maintenance

Make sure the website redesign or new build is maintainable. Of course, you can enlist help from a vendor for ongoing development and support to fix bugs, add new features, and maintain your website. However, the tools you choose, say a page builder, should be stable and easy to maintain.

Ease of Use

Every software has to solve a problem and simplify our life. Are the tools you use solving your problems and making your workflow easier or causing more issues? Make a determination and improve as necessary.

Cost

The cost of your website development and maintenance depends on the page builder and features that you want to have. Think about the cost of paying for software licenses and maintaining them. By relying on WordPress’ core features, you can probably eliminate many unwanted fees.

For example, WordPress core comes with page builder-like features that let you drag and drop content wherever you want it. Even better, this editing experience is what-you-see-is-what-you-get, aka WYSIWYG. In other words, you know exactly what your layout will look like.

The Issues with WordPress Page Builders That No One Wants to Talk About

Unwanted Bloat

Bloat is the excess JavaScript, CSS, or DOM elements not used or needed for the web page. Historically, Elementor added several div tags to every widget, column, and section, which causes bloat.

Other page builders like Divi also have bloat. Both are now addressing the problem by reducing DOM size and asset loading to improve performance.

Vendor Lock-In

WordPress page builders are an ecosystem of their own. You have to use extra addons or modules for additional customization, which means additional licensing fees per addon.

Some page builders even have a vendor lock-in. You may be restricted to that page builder and will later need help quickly switching to another one.

Challenging to Migrate

In some cases, migrating content from a page builder is a project on its own. Page builders like WPBakery, also known as Visual Composer, add a bunch of shortcodes to content. Once you deactivate the plugin, you must convert all those shortcodes into HTML; otherwise, you can’t read the existing content.

The Learning Curve Is Different

Every page builder has its approach to building and rendering the content. For example, you can use any theme with Beaver Builder. However, Elementor allows you to create and render templates conditionally.

Divi is a theme that also comes with page builder features. On the contrary, the Oxygen page builder doesn’t require any theme to render content and uses shortcodes.

With all these differences, the learning curve for each one is steep, which could make it difficult to build your website how you want.

Limitations of Page Builders

WordPress is moving towards Full Site Editing, collaborative editing, and translation in the core software. In contrast, the page builders are going in a different direction.

Let’s say that WordPress core comes up with collaborative editing, and that feature is something you would like to have, you may not get to enjoy it because your website is using a page builder.

Open-Source vs. Proprietary Software

Open-source contributions make Gutenberg evolve faster and better than other third-party page builders. Gutenberg’s code is open to the public; anyone can test it, use it, report a bug, and contribute to it.

When a new version is released, the number of people who test it and report bugs is significantly higher than the third-party page builders.

Why Is Gutenberg Recommended?

Gutenberg is the future, allowing your website to be ready for the present and future tools and technologies. Here’s how.

Page Builder

You can build headers, footers, sidebars, landing pages, blogs, and anything you need for your website with Gutenberg. With block patterns, you can predefine the designs and make them so that your contributors, users, and editors can easily add content.

Gutenberg editor is a WYSIWYG editor. This means that what you see on the editing screen will be rendered on the frontend as you see it. No surprises.

API-First Approach

Unlike the classic editor, Gutenberg brings an API-first approach. The built-in REST API, or third-party GraphQL APIs, made managing content and taxonomies easier.

With Gutenberg, you can use WordPress as an omnichannel content hub. You can manage the content via Gutenberg and distribute it to various channels with the decoupled or headless approach.

Out-of-the-Box Performance Gains

You don’t have to worry about performance issues. Gutenberg makes it easier to build critical CSS and avoid unnecessary styles.

There are core APIs available to customize the workflow to your needs. With proper hosting setup and caching, you can stay on top of the performance game.

Scalability

Gutenberg is an open-source software. You don’t have to purchase any commercial license. If you want to add more features to your site, Gutenberg makes it easier.

With the power of core features and proper customization, and setup, your website can handle any traffic surges. You can also decouple WordPress and use microservices for the frontend.

Extensibility

Customization is another important feature when it comes to enterprise-level applications. Gutenberg comes with many core blocks that you will find useful. You can build new blocks or customize existing ones. Custom post types, custom taxonomies, custom meta fields—all of these features can work with Gutenberg.

Migration

Migrating old content from the WordPress classic editor to Gutenberg is easier. At the time of this writing, Gutenberg is mature, stable, and widely adopted. Your WordPress site should be using Gutenberg by now.

Being stuck with a classic editor or on any other page builder can cost you more in the future. Consider migrating content to the latest version and staying updated. Here is a comparison of the WordPress features versus the page builders.

If you are still using the WordPress classic editor or other page builders, it is high time for you to migrate to Gutenberg. It checks all the boxes for building an enterprise-level website.

When you’re ready to have your enterprise-level website updated to Gutenberg, contact WebDevStudios.

The post Not All WordPress Websites Are the Same 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.

This historical WordCamp was a superb experience with valuable sessions inside an impressive venue. The side events, food, and just everything were so good! This short blog post featuring the highlights will not do the event justice, but let me try my best. Here we go.

Contributor Day

As a WordCamp Asia 2023 Contributor Day organizer member, I had so much fun. We had a good turnout and active participation from the contributors. It was incredible to have WordPress team representatives come in person and lead the teams.

Six hundred and fifty-three people contributed that day, many of whom were first-time contributors. Contributions included pull requests, patches, theme reviews, translations, etc.

Sessions

The sessions were terrific, featuring a variety of topics and skill levels. There were three tracks, each with a great line of speakers. I learned a lot from the talks.

As a developer, I attended a few programming-related sessions, but there were talks and presentations for everyone, including designers, bloggers, marketers, and business owners. WebDevStudios Account Manager, Laura Byrne, delivered an inspiring talk called “Disillusioned at Age 50: Turning a 10-year WordPress hobby into a successful new career as a woman who doesn’t code.”

Here are the slides. You can also catch Laura’s talk in the video below.

Ask Matt (Mullenweg) Anything

I asked, “How can developers and designers upskill themselves?” The Executive Director of the WordPress project, Josepha Haden Chomphosy, answered that we could accomplish this by participating in do_action hackathons.

Many interesting questions were asked in the “Ask Matt Anything” session. Responding to a question about ChatGPT, Matt recommended we begin by “…leveraging them to improve our productivity than trying to fight them.”

The big announcement was that the collaborative editing, Phase III of the Gutenberg project, would commence soon.

On the fun side, Matt said if he had a time machine, he would like to revisit the day he chatted with Mike Little about forking b2/cafelog as WordPress.

Five for the Future

Matt discussed Five For The Future (5FTF) while answering a question about how open source can thrive. He believes and recommends contributing a small percentage back to open source will keep it growing and thriving. He also highlighted that open source can shine during recessionary times.

I understand the importance of contributions to a project like WordPress, which keeps it one of the top open-source platforms. At WebDevStudios (WDS), we take contributions seriously and continue them without fail. Check out these blog posts if you are curious about 5FTF and how to contribute.

Meeting Teammates In Person

Meeting coworkers for the first time in person cannot be explained in words. When Laura said hello, it took a few seconds for me to believe it was real. Although we are connected online, talking to my teammates in person is a pleasure.

I am an Indian. Engineering Manager, JC Palmes, is a Filipina. Lead Engineer, Ashar Irfan, is from Pakistan, and Laura is from the United States. This event is the perfect place for us to see each other. It is a mix of emotions when we all hang out together.

Thanks to Laura for this gift all the way from New York. Having lunch with Ashar was something special and to be cherished. I mistook three other attendees who looked somewhat similar to Ashar, and this is where swag helps. Luckily, I could identify him by the WebDevStudios shirt that he was wearing.

JC was busy as one of the Global Leads for WordCamp Asia, and the pasalubong she brought for us was terrific. Pasalubong means “gift” in Ilonggo language. Even though I lived in the same city as JC, I had met her only a few times before.

I was feeling unwell right before my flight and thought of canceling the trip, but if I had done that, I would have missed meeting the WordPress community and awesome coworkers.

Reactions to WordCamp Asia 2023

I asked the WDS team who attended the event to describe their WordCamp Asia 2023 experience in one sentence. Here’s what they had to say.

Ashar Irfan

“WordCamp Asia was my first WordCamp ever, and honestly, I enjoyed the whole experience of connecting with the WordPress community. I met with many amazing folks, including some of my wonderful colleagues, and I hope to do this again soon.”

JC Palmes

“I was thrilled to be one of the members of the Global Leads trio for WordCamp Asia. It was both an amazing and a very stressful experience. Although I did not see any of the talks from start to finish, I know they all went well. Just seeing the faces of everyone made all the stress and internal drama worth it. I finally got to connect actual persons to their names and Zoom faces. One of my most memorable experiences was finally meeting Laura and Ashar (it took me a few seconds to realize it was him); Lax, too, but I’ve met him already.”

Laura Byrne

“I loved my first time in Asia and meeting my colleagues. The first person I met was Lax, who is just as warm and welcoming in person as he is online. As a Global Lead Organizer, JC was constantly in motion. It was impressive how many things she dealt with while never looking tired. It was the first time I ever met Ashar or spoke to him. We’ve only ever briefly interacted in Slack before. He has such an outgoing and joyful personality, which I’d never realized from only meeting him on Slack. He’s also really tall; I wasn’t expecting that. You don’t know where to look when you’ve only seen someone as a Zoom avatar.”

WordCamp Asia 2023 in Pictures

A Million Thanks

I want to thank this WordCamp’s leads, organizers, volunteers, sponsors, and attendees. Almost 1,300 people attended, which is a considerable number for the first-ever flagship WordCamp in Asia.

On a personal note, I am grateful for the efficient remote work processes at WDS and the generous paid time off to attend. We send virtual tacos as a token of appreciation to our colleagues at work. I badly wanted to send hundreds of tacos to everyone who made this one memorable!

It felt sad when the event was over, but I look forward to attending other WordCamps and WDSCamp,  our annual retreat, and meeting all my coworkers this year!

The post Highlights from WordCamp Asia 2023 appeared first on WebDevStudios.

Educating a client is rewarding, and fun. At WebDevStudios, we take the time to walk clients through our processes and their new website, never abandoning them after launch.

Here are five things all WordPress website owners should understand. Comprehension of these concepts makes it easier for the discovery and strategy process of their website project.

1. Process vs Plugin

When you install a plugin that has the features you need, it is a small part of the process. Let me explain further with some examples.

SEO is a process, not a plugin.

One thing WordPress website owners should understand and accept now is that SEO plugins cannot magically improve your search engine rankings and get you more traffic by themselves.

Let’s take a look at the SEO process:

SEO Audit

This step includes auditing the whole website and content. Without this step, website owners cannot understand how to find and fix technical errors or flaws in the content strategy.

Technical SEO

Checking, creating, or fixing the following is a part of technical SEO: sitemaps, faster load times, internal links, 301 redirects, broken links, indexing status, and crawl errors.

Keyword Research

This is a significant step in SEO. Research the costs for keyword research software and services, and you can see this step is an industry itself.

Know your audience, then you can find what they are looking for online. The general rule is to choose long-tail keywords with high search volume and low competition ratio. But you can also choose competitive keywords and their related keywords.

If your competitors have long-form articles and rank high for a keyword, you can create videos. This gives you the edge over them.

Content Strategy

Once you have keywords, you should come up with a clear content strategy. This helps you create content related to each topic and is also valuable to your website’s visitors.

WordPress website owners should understand that there are many critical factors involved in SEO. You can’t predict the search engine algorithms, but you can control the quality and relevancy of your content and user experience.

There are a few popular SEO plugins out there, well documented and maintained. You might be using one of them, but SEO doesn’t stop there.

If you are not sure about which plugin to use, our UX designer Jennifer Cooley’s comparison of the top SEO plugins should be helpful.

Security is a process, not a plugin.

A security plugin or combination of plugins can let you set up a Web Application Firewall, IP-based restriction, etc. However, a security plugin alone can’t stop cybersecurity attacks.

Your hosting provider plays a crucial role in keeping the environment safe. You should keep the plugins and themes and core WordPress version updated.

Google / Harris Poll 2019 found that 24% of Americans used common passwords or some variation like Password, abc123, iloveyou, Welcome, etc.

WordPress introduced a password strength indicator in 2013, to encourage the use of strong passwords. But many users go with predictable passwords, even today.

Use two-factor authentication to add another layer of security to your website. DDoS, butte force and XSS attacks could be prevented with a combination of SSL, CDN, and following The Open Web Application Security Project’s best practices.

Security plugins play a part in the security process. You can keep your site secure with a combination of plugins, server configuration, and automated backups. For better understanding, watch this WordCamp London 2108 talk by Thomas Vitale.

Accessibility is a process, not a plugin.

Accessibility should be included in the development process. All WordPress website owners should understand that each component of the website should be accessible.

Allow your website development partner to take time and implement accessibility and audit the website in each sprint. Many website owners assume that installing an accessibility plugin at the last minute is good enough, which is not true!

2. Performance Scores vs User Experience

A performance optimization plugin is not the magic pill for performance issues. A popular myth among website owners is that a good performance score alone can bring more traffic.

The main idea behind core web vitals (CVW) is to offer a good user experience. You should not just rely on the CVW scores. Delight your website visitors with relevant content, clear navigation, faster load times, and follow best practices.

The content has to be relevant and worth reading and sharing with others, if not users might bounce off the page. This in turn increases the bounce rate which signals search engines that the content is not the best for the search query.

For further reading on CVW, dive into this piece from the Search Engine Journal.

3. Rebuild vs Redesign

Every website deserves a fresh look. No one likes the outdated design. This brings up the question, does your website needs a redesign or a rebuild?

Redesign refers to changing the look and feel of the website, and retaining the same content and features. Rebuild means you are changing the website structure, adding or removing features, and even migrating content from one website to another.

• When you change your brand’s colors or messaging, a redesign can help.
• If you want to introduce new features like memberships, shopping carts, etc., you need to rebuild the website.

Further reading: Dev Shortie: Rules For Your Redesign

4. You need to test before you update.

Updating plugins and themes and also core WordPress is always recommended. However, every major update needs to be tested on a development or staging site before going to the live site.

If you know that certain plugins are customized, then it is a must to test the new version before updating it to the live site. Take a look at the change log and see what has changed between the new version and the current version that your site has.

Fields, HTML markup, CSS class names other new features, or bug fixes might be introduced in the new version. Often newer versions require a database update too.

So you have to have a complete backup of files and database before the plugin, theme, or core updates go into the live site. If something goes wrong you can restore the backup.

Do you need auto-updates?

Since WordPress 3.7, you can allow automatic updates for maintenance and security releases. While this is good and saves time, it is not recommended for websites with a lot of customization. In most cases you will not get any critical errors or conflicts, so test it on a development environment, then update the live site.

Further reading: How to Test New WordPress Releases to Avoid Problems

5. Choosing the right approach for you.

When we say competition, we compare our products and services with the competitors on the market. It is common and unavoidable to compare, but you don’t have to go with the same tech stack that your competitors are using.

Choose the right plugins, themes, hosting, and other stack related to your website based on what works for you. Discuss with the web design agency and discover the available options. This will help you narrow down and decide well.

Don’t go with the trend just because someone is using it. Every website is unique in its own way. WebDevStudios is committed to delivering the best services to every client, as our mission statement goes, “Your success is our mission.”

Have an enterprise project in mind? Let us build and launch it together, contact us now!

The post 5 Things WordPress Website Owners Should Understand appeared first on WebDevStudios.

However, as we’ve begun entering content, we realized that we can make improvements to the editing experience for the client. In this blog post, we outline how by optimizing the WordPress Block Editor experience, we make it easier for editors to perform their jobs.

Background

The set of websites contains one main site and many subsites. We created several custom post types to handle a variety of content, some of which exist on both the main site and the subsites.

All custom post types contain meta fields, created with Advanced Custom Fields, which are used to add custom content to the post. Additionally, we use the content from two post types from the main site on the subsites.

To build the blocks for this website, we used Advanced Custom Field (ACF) blocks. For a Headless WordPress website, ACF makes it easy to structure data the way we want on the frontend, with minimal extraneous information.

Because of the complexity of information and the challenges of building a headless site, we wanted to make sure the editing experience was as straightforward as possible. We identified five ways to make improvements, optimizing the WordPress Block Editor. It’s all detailed below.

Instructional Text

When creating the blocks, we made sure to clearly label each field and add instructions for editors. We included information like image dimension requirements, character or word length limits, and location specifications (sidebar, main content, etc.).

With these instructions, editors can easily jump in and edit the website. They don’t need to search for documentation or be trained. This detail is especially important with 20+ subsites, each with different editors in different locations.

Tabs in Blocks

Advanced Custom Fields provides several layout fields, allowing you to organize content. We leveraged the tab field to separate sections and let users enter specific content in each tab.

For example, if we build a block that contains event details and a sponsor, we can create two tabs. One is for the event information, such as venue, time, etc. The other tab is to input the event’s sponsor information, such as the sponsor’s name, logo, and link.

This sounds so simple and obvious, yet this makes it more convenient than usual for users to add content. Would you prefer a long form where you scroll up and down in the editor or a tabbed block?

Leveraging the power of tabs keeps the user interface and experience better, which allows for optimizing the Block Editor experience for the editor.

Dropdowns

To decrease the chance of human error, we identified places where a dropdown select menu should be used instead of a text field.

Using Advanced Custom Fields, we were able to create custom dropdowns generated from post types and meta fields. For example, we have a block on the subsites that needs to return the ID for an organization, which is a custom post type on the main site.

Initially, we created a Text field for that input, but realized that it opened the door for user error. We changed the Text field to a Select field and queried the organization post type on the main site to get the organization ID from the meta field.

This allowed us to create the options in the Select field with the organization name as the display and ID as the return value. Using a Select field in this way significantly reduces the likelihood of human error, and allows for a more bespoke user experience on the backend.

Readonly Fields

Another way we have addressed the possibility of human error is through ‘readonly’ fields. This is helpful when you want to keep data intact on fields like identifiers imported from an API that doesn’t require any manual editing. The user can view the field values and confirm that content has been entered, but cannot change them.

Frontend Previews

ACF blocks are great for creating complex blocks quickly, but the editor loses the Gutenberg experience of seeing a styled block as they’re building a page. Additionally, since we’re using ACF blocks in a Headless WordPress website, an editor can’t see a preview of the page and blocks they’re editing in the Gutenberg editor.

That’s because the website doesn’t use a standard WordPress theme. Plus, the CSS, Javascript, and PHP aren’t pulled into the preview.

To solve this problem, we included a screenshot of the block as a tab, but our lead developer developed functionality that displays an iframe of the block from the frontend when the “Switch to Preview” button is toggled when editing the site. This lets editors preview the block with the content they’ve entered before saving the page.

Conclusion

Working on this complex site reminded our team that not only is frontend usability important, but the editor user experience is also equally important. If an editor can’t enter content correctly, it doesn’t matter what a website looks like or how it functions.

This brings us to the end of learning the ins and outs of optimizing the WordPress Block Editor experience. We’d love to know the steps you take to improve the editing experience for your WordPress websites. Please tell us in the comments below.

The post Optimizing the WordPress Block Editor Experience appeared first on WebDevStudios.

This type of migration is applicable when you are adding new features to your subsite and want to migrate only the content. For example, moving classic editor content to the block editor or sending data to a headless content management system (CMS).

Let’s take a look at how you can export and import content by adding your own WP CLI commands. Define the goals and objectives to be achieved with the migration.

Here are some examples of goals

• Retain the post IDs
• Retain the taxonomies
• Rename certain post meta fields
• Add new post meta fields
• Rename some old custom post types to new ones
• Replace site domain or URLs

Sometimes the clients may have unrealistic expectations about how to migrate subsite content to a multisite network. There are also times when requirements cannot be fulfilled technically.

So, it is important to discuss the requirements and the possible solutions with the engineering team and the clients. Submit the proposal on what could be done and how long it will take and get approval from the client. Then, start working on the solution.

Leverage the WP CLI

WP CLI makes it easy to export and import data of any size. Extend the WP CLI class and create your own commands.

Here is an overview of the whole migration process.

Replicate the live environment locally to write and test the CLI commands. Add separate commands for export and import.

Make sure the site URL is passed every time you run the commands to avoid running commands on the default blog.

wp migrate import –url=http://mywebsite.com/blog2

Add a command to rerun export or import content by passing an array of post IDs, terms, or meta. This allows you to fix the errors during migration without running the whole process.

View the code on Gist.

Pro tip: Use the progress bar utility to display the status of the export and import process.

Prerequisites

Migration requires a lot of planning and preparation. Discuss with the client and discover the data that needs to be migrated.

Content Freeze

There should be a content freeze for keeping the data intact. Whether it is backend content entry or the frontend contact forms, user registration, etc, to be stopped during the migration. Make the site read-only.

Exporting Content

You can export data as SQL, XML, or JSON files. This example exports content as JSON files in batches. This way you don’t have to worry about MySQL timeout and you can include any data you want to export.

Include terms, metadata, and any associated data to each post item. Store the exported files in their respective folders inside the main migration folder.

The path could be something like /migration/{post-type}/1.json, where the post type refers to post type slug, and numeric 1 refers to the first batch of the exported content.

Data Mapping

Map the corresponding post meta fields of each post type carefully. In some cases, you may want to rename the meta keys.

The best advice here is to keep the old meta keys and add new ones. This way you can review the new keys and values after migration.

For example, if you want to rename customer_ip_address to customer_ip, keep old ones and add new ones.

Importing Content

Take a full backup of the site including files and database before running your migration commands on production. Get the exported data, do the mapping, validate it and then proceed with the import.

Import each type of data separately, like terms, post types, post meta and menus, and so on. Whether you are overwriting data or creating new records, add a log to keep track of the status. Test the commands on the local environment and make sure they work without errors.

Logs

Catch the errors during the migration process and log them. Log error messages to a separate file, this helps to isolate and check the migration-related errors.

Add preview links to the migration summary on the terminal, this helps you to quickly navigate different content types and check the content.

Pro tip: A table of results can be helpful to view the total number of migrated items.

Migration Runbook

List out the action items for each team with instructions and commands in hierarchical order. Discuss the process with the engineering team, DevOps, and content team. This allows everyone to be on the same page.

Divide the runbook into pre-migration, migration, and post-migration. Then, add the respective steps.

Pro tip: Do a dry run on a staging environment that mimics the production environment; this helps you to find any errors and tweak the migration script.

Run migration

Prepare the production environment for the migration process. Follow the runbook that you created, then test the output.

Testing

Review the imported content, and look for any missing or incorrect data. Check if all the items are imported to their corresponding taxonomy terms.

You could find more clues in the migration logs. If there are any errors and warnings, follow that trail and confirm that data has been imported.

Rerun the commands if needed and repeat the testing process. Once you feel confident that the content migrated correctly, do the clean-up, like removing any temporary database tables, files, etc.

Finish the items on the post-migration checklist and launch the site.

Conclusion

Each site is different, which means the process to migrate subsite content to multisite could be different as well. We hope that this article sheds some light on the migration process to make it easier.

What are the challenges that you encountered during the migration and how did you overcome them? Let us know in the comments below.

Looking for help? Let WebDevStudios handle the migration, contact us now!

Further reading: WP CLI commands cookbook .

The post How to Migrate Subsite Content to a Multisite Network appeared first on WebDevStudios.

This blog post covers the easy way to add admin notices when a post gets added or updated, focusing mainly on the Gutenberg notices.

Let’s start with this working example and customize it to your needs.

Hook into save action.

Here we are using the publish_post action to add our callback after every time a post gets saved. Add a did_action check to make sure this callback executes on the first time and doesn’t repeat.

Other plugins or customizations may also use this action hook, so it is recommended to perform this did_action check.

View the code on Gist.

Set the message on the callback.

Here is an example of a typical editorial workflow:

• Author submits a blog post
• Saved as Draft
• Editor approves and publishes

The background action is sending email notifications to the author when the post gets published. Let your callback process the data and return the message you want to show in the notice. To keep this data easily accessible, we are using post meta.

View the code on Gist.

Create a custom endpoint.

Register an endpoint using register_rest_route. We will be using the namespace and route during the AJAX call.

View the code on Gist.

AJAX call

Now that we have an error message on meta, we have to fetch it via an AJAX request. To keep this simple, the admin script is added directly along with the PHP code. You can make it a separate file and enqueue it.

We need ‘subscribe’ and ‘select’ from WP data module.

const { subscribe,select } = wp.data;

Subscribe allows you to listen to changes in the state. By subscribing to isSavingPost(), you can call the AJAX request.

We are sending the post ID to the custom REST endpoint and displaying the message via createNotice.

View the code on Gist.

Get the error and render it.

Now we have the error, custom endpoint, and the AJAX callback. Retrieve the message from post_meta and send it to the response.

View the code on Gist.

Here is the plugin with the complete code in the repo. I hope you find this quick tip useful. Follow our blog for more WordPress tutorials.

The post Adding Custom Notices for the Gutenberg Editor appeared first on WebDevStudios.

Why Not Remix?

Every day, we see new changes and improvements in the JavaScript ecosystem. Remix gained popularity with the hype from top website agencies and developers.

Is it worth the hype? Give it a try and you can conclude for yourself.

With in-built hooks and components, Remix makes it easy to fetch data, create dynamic routes, use forms and handle errors. It also comes with HTTP helpers to get responses in JSON and to redirect.

Remix offers only server-side rendering and that makes it different from Next.js. In this example, we will build a simple application that displays a list of posts from a WordPress blog and has a details page and a comments form.

I assume you are a React developer and used some other React-based frameworks like Next.js. This is not a step-by-step tutorial, yet covers the points that you will like to try and explore. Here is the repository for this demo if you like to see the code first.

Installation

Prerequisites

• Node.js 14 or greater
• npm 7 or greater

Start the installation by running the commands. This will ask you a series of questions that allows you to choose the location, typescript, and app server.

View the code on Gist.

This is the last step of the installation; you will get a message like:

That’s it! `cd` into "/Users/lax/local/remixwp" and check the README for development and deploy instructions!

README file contains more detailed information about the commands.

Folder Structure

• app – This is like the src/ folder in create-react-app (CRA), where the components of our app are located.
• node_modules
• public – A folder for static files like images and other public assets
• .gitignore
• jsconfig.json – A configuration file for the compiler
• package – lock.json and package.json
• Remix.config.js – Remix configuration file; keep the default config

Let’s start the development. Change your working directory to Remix-wp or the folder where you installed the app and run:

npm run dev

If any app is running on the default port 3000, Remix will increment the port number. In my case, my app started on port 3002 since I have 2 other apps running.

This index page is clean and easy to get started with bare minimal code. I chose just the basics for this demo without using any predefined templates.

Remix comes with a jokes app and a developer blog app example. You can install them and take a quick look.

App folder

The app is the heart of the application. Let’s see what it contains

• routes – Remix supports file-based routing. The folders and files here control the routes.
• entry.client.jsx – As the name suggests, this acts as the entry point for the client. HTML gets hydrated and added to DOM through this file.
• entry.server.jsx – This runs only on the server side. This acts as the entry point to the server and generates the HTML and server response.
• root – This file is equivalent to App.jsx of the CRA and the default component that loads first.

Tailwind

Install tailwind package.

npm install -D npm-run-all tailwindcss

Create Tailwind config file.

npx tailwindcss init

Update tailwind config and mention the files to be added.

content: ["./app/**/*.{ts,tsx,jsx,js}"],

Add the commands to scripts in package.json.

View the code on Gist.

Then, import tailwind on app/root.jsx.

View the code on Gist.

Add Document, Layout

As this app doesn’t contain a global document, layout, and error boundaries set. Let us add them to root.jsx.

This works similar to the Next.js Document file, where you load the child components and nest them to the main layout. Remix provides an outlet component that will render content according to routes. To keep the layout of the app uniform, let’s wrap the outlet component with a layout, which in turn is wrapped inside a document.

View the code on Gist.

Document will return the child components and the HTML markup, as described here.

View the code on Gist.

This is a simple layout that contains a header and footer.

View the code on Gist.

Setting up an error boundary is easy, as it comes out of the box with Remix. To keep things simple, I have added a console.log to check error messages on the log and also display them on the frontend.

View the code on Gist.

Components and Hooks

The header, footer, and comments form are the components of this app.

• Link – Used to add hyperlinks
• Form – Renders an HTML form and provides the submitted form data using the useActionData hook
• useLoaderData – This hook is the Remix version of getServerSideProps in Next.js. This allows you to fetch data and make it available via the loader function.

Routes

It is no wonder that routes are easy in Remix, as it is created by the same people behind React Router. You don’t have to manually define each route. A folder or a dynamic route that has ‘$’ in the file name would be considered a route.

Fetching data

Posts/index.jsx file fetches data and lists them out using the loader function. Each post item is linked to its detail page using slug as the dynamic route.

useParams hook is used to access parameters on the dynamic route.

View the code on Gist.

Comment Form

Import the form component. You can intercept the form submission and validate each field. Then, process the submitted data.

As a PHP developer, I found the usage of forms with Remix so exciting.

You can set the form action and access the submitted data there. In this example, we have a comments form and display the raw submitted comments. You can extend this by sending data to the WordPress source and displaying the response.

Deployment

Deployment instructions will get added to the README file during installation. You can deploy this app as you would deploy any node app.

npm run build

Then run:

npm run start

Test your app locally. Choose a host of your choice. I used Vercel to deploy this app. Once you choose the repository, Vercel will automatically pick up the configuration for build commands and run.

Conclusion

There are a few areas that you can continue working on in this example:

• Make the WordPress source URL an environment variable.
• Add components for each post item in the posts list.
• Add a frontend form to allow users to submit post content.
• Add a terms route for tags or category archives.

And the list goes on!

I hope you find this quick overview of Remix helpful. Try it out and let us know what you think in the comments below.

The post Creating Your First Remix App appeared first on WebDevStudios.

These plugins are sorted in the order of block patterns, blocks, block-based themes, or theme combinations. Ready to be a power user? These Gutenberg plugins will get you there.

Block Patterns

Can you imagine Gutenberg editor without block patterns? Whether it is creating a landing page or blog post, block patterns come in handy.

As a backend engineer, I prefer using block patterns created by designers rather than creating something on my own. You can find block patterns at the official repository or GutenbergHub’s directory.

Block Pattern Explorer

This plugin allows you to list block patterns registered from your theme or plugins. You can also browse the block patterns that come with WordPress core. As per the developer of this plugin, Nick Diego, this plugin is currently an experimental one.

Control Block Patterns

The control block patterns plugin allows you to manage block patterns and their categories. It also supports inserting custom code to header and footer like analytics scripts, custom CSS styles.

This plugin makes it easier to create custom block patterns from the Gutenberg editor, exporting and importing reusable blocks and block patterns.

Blocks to Improve Writing Experience

Editors Kit

As the name suggests Editors kit plugin offers an array of features that make the writing and editing experience better. You get rich text formatting including superscript, subscript, indent paragraphs, inserting special characters, etc.

Additionally, you can show or hide blocks based on the device screen sizes. With conditional logic, you get granular controls to block visibility.

If you are a developer or a techie who loves MarkDown, this plugin supports markdown, and also comes with a syntax highlighter You can define keyboard shortcuts and speed up your writing process.

There are other cool features like copy and pasting gradients for buttons and covers, block pattern library, theme support for developers and block navigators, etc. Since this plugin comes with many features, you can manage them via feature manager.

MathML Block

Are you tired of trying different plugins to insert math formulas? Try this MathML block.

It allows you to insert mathematical markup language easily. It is also compatible with the official AMP plugin.

Simple TOC

Readers love to see the table of contents while reading a long article. Let your readers know what is in it for them using this simple TOC block.

Blocks to Design Pages

An icon is worth a hundred words, use icons with this icon block. Web fonts API is now available in the Gutenberg plugin, you can change the typeface using the block settings.

Newsletter Glue

It is hard to create a blog post and add it to your email newsletters. Newsletter Glue solves this problem. Create content once, and use it as blog posts and also newsletter archives. Newsletter Glue comes with blocks including embed links, author bylines, social sharing, show or hides content blocks, and more!

Editor Plus

Editor Plus allows you to customize every block with easy-to-use controls for typography, shape divider, box-shadow, spacing, visibility, and more features. You can copy any block patterns from Gutenberg Hub with the help of this plugin.

Addons for Gutenberg

Actively maintained plugins are the best part of the WordPress ecosystem. This enables no-code design and development for people of all skill levels.

Here is the list of Gutenberg addons or suites that provide an array of blocks. They are not listed in any particular order, read more about each of the plugins, shortlist the ones you might need. Then install them on a dev site, try the blocks, and then implement them on the live site.

• PublishPress Blocks
• Caxton
• Coblocks
• Genesis blocks
• Getwid
• Kadence blocks
• Otter blocks
• Responsive Gutenberg Blocks Library
• Stackable
• The plus addons for Gutenberg
• Ultimate blocks
• Kioken blocks
• Aino blocks

Plugins to Enhance Gutenberg Block Editor

Block Manager

This is another feature that should come to WordPress core in the future. Block Manager by WebDevStudios Lead Engineer, Darren Cooney, allows you to enable or disable blocks.

QuickPost

You have to toggle the fullscreen editing mode, to see the add new post link. The QuickPost plugin by Aurooba Ahmed allows you to add new items in the fullscreen editing mode. If you want to duplicate a post, click on the kebab menu, click on the duplicate post. This plugin works with custom post types too.

Theme and Plugin Combinations

Not sure about what theme to use and which blocks work with them well? Try these combinations, most of them are from the respective theme authors.

Gone are the days with multi-purpose themes which make you install a bunch of plugins. Now you are free to choose the starter theme and plugins that you need.

wd_s

At WebDevStudios we use our own starter theme, which provides the best developer experience to our backend and frontend engineers.

Bring Your Own Blocks

Our Frontend Engineer Amor Kumar has been building a brilliant solution to prevent the design system collapse by abuse of block controls.

His headless theme comes with a dockerized container that is easy to set up and get started.

The low-code or no-code themes and block combinations are listed below

ACF Blocks

If you are an Advanced Custom Fields (ACF) user, you can take advantage of their ACF blocks. This requires the ACF pro plugin to be installed and active.

With 20+ blocks in their suite, you can build pages on the fly.

Aino

Aino comes with FSE support and Aino blocks. With the Aino blocks, you can build pages that every website needs.

GeneratePress and GenerateBlocks

This is another popular solution to build sites faster. GeneratePress comes with its own blocks to allow more granular control of the container, grids, headings, and buttons.

One noteworthy feature is that GenerateBlocks doesn’t add too many blocks. It gives extra features instead of extra blocks with their Pro plan. With the features like global styles, effects, backgrounds, custom attributes, container links, and template library.

On a side note, GeneratePress has another plugin called WP Show Posts which is almost the short code-based version of the query loop Gutenberg block. Give it a try.

Kadence and Kadence Blocks

Kadence theme is one of the popular themes that allows you to control and customize your website without coding. Kadence theme and their blocks come with controls for visibility, responsiveness, spacing, typography, colors, and background. With the Pro version, you can get premium templates, animations, custom fonts, and icons.

FrostWP

FrostWP is coming from WP Engine’s family and is an open-source theme. It is packed with standard features, block patterns, and sample sites that you can import.

The global styles and FSE feature adds FrostWP to the popular themes of recent times. It also adheres to accessibility standards.

Blocksy and Stackable

Blocksy is a good choice if you want to control most of your site from the customizer. It allows you to customize colors, typography on every area of the site including header, footer, archives, and single items.

Recently Blocksy team started using Stackable blocks to build their demo sites. You can import the starter sites using their free Blocksy Companion plugin.

Twentig

A better way to customize the default WordPress themes is to use Twentig plugin. This adds more customization options to Gutenberg blocks. You can choose from pre-built starter sites to speed up your development process.

Conclusion

The possibilities are endless with the Gutenberg block editor. Every day, new blocks and themes are added to the WordPress repository.

What is your favorite one from this list? Please leave a comment below.

Learn More from Lax at Atarim Web Agency Summit 2022

Catch Lax at Atarim Agency Summit 2022, April 26-29, 2022. He will present a talk on “Build Something That Scales: Why You Should Use CI/CD.” Registration is free.

The post Gutenberg Plugins That Make You a Power User appeared first on WebDevStudios.

Before we begin, take a quick look at the data fetching methods.

Data Fetching

Next.js allows you to fetch data and prerender them or render them in real time. Prerendering generates HTML before the page gets rendered. This helps to improve SEO rankings and the amount of JavaScript on the page will be less compared to non-prerendered pages.

Once the page gets prerendered, hydration makes the components interactive. That is, the initial loading of the page may have links, but the links will be clickable and work after JavaScript gets loaded.

This is better than looking at a blank page and waiting for all the HTML, including JavaScript, to be loaded. Now that we have an idea about pre-rendering, let’s talk about its two types Static Site Generation (SSG) and Server-Side Rendering (SSR).

What is SSG?

SSG allows you to generate HTML at once during the build time. Next.js provides a method called getStaticProps() for generating static pages.

You can add revalidate property to your getStaticProps method and incrementally regenerate the static pages. This avoids rebuilding the whole application. If you want to use dynamic routing with the static generation you should use getStaticPaths to generate the paths.

What is SSR?

In SSR, the HTML is generated on each request. Use getServerSideProps to fetch data when a user makes a request.

As every request goes to the server, the time to the first byte will be higher than a static generation. You can use query parameters and HTTP headers with SSR.

Here is the summary of SSG, SSR, and Client-side Rendering (CSR):

Things to consider…

You can use SSG and SSR on your app. If you have to fetch data based on a user’s query, like a search page, then use SSR. Other pages can be statically generated.

If your application has more client-side interactions and doesn’t have to pre-render the content, then use the client-side rendering.

I hope this comparison helps you to choose the right data fetching method for your needs, for further reading visit Next.js documentation. Looking for more? Read our Next.js quick tips and articles

The post Quick Tip: When to Choose SSG or SSR in Next.js appeared first on WebDevStudios.