DEV Community: Christof Karisch

Taming a Third-Party React App Inside WordPress — Without Touching Its Code

Christof Karisch — Tue, 04 Aug 2026 17:21:18 +0000

Sometimes the most interesting frontend work isn't building an app — it's bending one you don't control.

For the Austrian animal shelter Arche Noah (Aktiver Tierschutz Austria), the pet adoption listings are powered by a commercial WordPress plugin that renders a React app on the page. The shelter manages its animals in an external SaaS ("Pet-Manager"), and the plugin pulls that data and renders searchable lists, filters, and detail views.

The catch: the design didn't match the site at all, several fields were wrong for the audience (raw birth dates instead of age, cat genders in the dog filter), and important UI was missing (a phone CTA on every animal). And of course:

We can't fork the plugin — every update would wipe our changes.
We can't patch the React bundle — it's minified vendor code.
The markup doesn't exist at page load — React renders it client-side, and re-renders it constantly.

So we built an augmentation layer: a single custom-code block (CSS + vanilla JS with MutationObserver) that reshapes the app from the outside. You can see the result live on the dog adoption page and the cat adoption page.

This post is about the three rules we learned — including the React reconciliation bug that only showed up when users clicked "next animal".

Rule 1: Never move or remove React-managed DOM nodes

This is the big one, and we learned it the hard way.

The detail view shows a "Merkmale" (characteristics) table row that we wanted to display as its own "Besonderheiten" (special traits) card next to the "Eigenschaften" (properties) card. Our first version did the obvious thing: grab the .Eigenschaften node, move it into a new row, delete the characteristics <tr>.

It worked perfectly. On first load.

But the app has "previous animal / next animal" navigation. On those transitions, React doesn't rebuild the DOM from scratch — it reconciles: it diffs its virtual DOM against what it believes is in the real DOM and applies minimal patches. If you've moved or deleted nodes React thinks it owns, its bookkeeping is now wrong. In our case, React silently rendered a broken subtree: the characteristics row stopped being processed, and even an unrelated transformation (birth date → age) stopped firing.

No error, no warning. Just a subtly wrong UI, one click away from the state everyone tests.

The fix defines the whole approach:

Hide, don't remove. React doesn't care about display: none.
Append foreign nodes, don't reparent React's nodes. Elements you create and append survive React's re-renders — React ignores children it didn't render, as long as you don't disturb its own.
On every render, only update text/content. Never restructure.

function processDetail() {
  document.querySelectorAll('.petfinder .tm-pet:not(.card)').forEach(function (pet) {
    var eig = pet.querySelector('.Eigenschaften');
    if (!eig) return;

    // Read the current value from React's table (may be absent)
    var merkmaleValue = null;
    pet.querySelectorAll('.Allgemein .table tr').forEach(function (tr) {
      var first = tr.querySelector('td:first-child');
      if (first && first.textContent.trim().replace(':', '') === 'Merkmale') {
        var v = tr.querySelector('td:last-child');
        merkmaleValue = v ? v.textContent.trim() : '';
        // Hide only — this <tr> belongs to React
        tr.style.display = 'none';
        tr.setAttribute('data-kwm-mhidden', '');
      }
    });

    var show = (merkmaleValue && merkmaleValue !== '-')
      ? merkmaleValue
      : 'Keine Besonderheiten bekannt';

    // Our OWN node, appended into React's row — survives re-renders
    var eigRow = eig.closest('.row');
    if (!eigRow) return;
    var box = eigRow.querySelector('.kwm-besond');
    if (!box) {
      box = document.createElement('div');
      box.className = 'Besonderheiten card col-12 col-md-6 kwm-besond';
      eigRow.appendChild(box);
    }
    var html = '<div class="h3 mt-4">Besonderheiten</div><p>' + show + '</p>';
    // Write only on actual change — prevents observer feedback loops
    if (box.innerHTML !== html) box.innerHTML = html;
  });
}

Rule 2: Make every MutationObserver pass idempotent

All transformations run inside MutationObserver callbacks watching the app's root container:

function start() {
  var pf = document.getElementById('petfinder');
  if (!pf) return;
  processDetail();
  new MutationObserver(processDetail).observe(pf, { childList: true, subtree: true });
}

document.readyState === 'loading'
  ? document.addEventListener('DOMContentLoaded', start)
  : start();

There's an obvious trap here: your callback mutates the DOM, which fires the observer, which runs the callback, which mutates the DOM… To stay out of that loop, every pass must be idempotent — running it twice must be a no-op the second time. We use three patterns, depending on how React treats the node:

Pattern A — a data- guard, for nodes React creates once and never recycles (list cards):

if (card.dataset.kwmDone) return;
// ...transform...
card.dataset.kwmDone = '1';

Pattern B — a self-consuming condition, for nodes React recycles. This one is subtle: on "next animal", React reuses the existing <tr> elements and just resets their text — so a data- guard on the element would wrongly skip the fresh content. Instead, the transformation itself removes its own trigger condition:

// Fires only while the label is the untransformed "Geburtsdatum".
// After we rename it to "Alter", the condition no longer matches —
// until React's next render resets it. Idempotent, no guard needed.
document.querySelectorAll('.petfinder .tm-pet:not(.card) .table tr').forEach(function (tr) {
  var first = tr.querySelector('td:first-child');
  if (!first || first.textContent.trim() !== 'Geburtsdatum') return;
  var valueCell = tr.querySelector('td:last-child');
  var age = valueCell ? calcAge(valueCell.textContent) : null;
  if (age) {
    first.textContent = 'Alter';
    valueCell.textContent = age;
  } else {
    tr.style.display = 'none';
  }
});

Pattern C — compare before writing, for content you keep in sync on every render (the box.innerHTML !== html check in Rule 1). No change, no mutation, no observer echo.

Rule 3: Let CSS do everything it can

The less JavaScript touches the DOM, the fewer reconciliation and observer problems you have. Two CSS tricks earned their keep:

Fixing zebra stripes after hiding a row. Hiding a <tr> with display: none doesn't remove it from :nth-child() counting — so table-striped flips parity from that row on, and your visible rows suddenly alternate wrong. Since we mark the hidden row with an attribute, a sibling combinator can flip the parity back for everything after it:

.table-striped > tbody > tr:nth-child(odd) { background: #eef3e5; }

/* Everything after the hidden row: invert the striping */
.table-striped > tbody > tr[data-kwm-mhidden] ~ tr:nth-child(odd) {
  background: transparent;
}
.table-striped > tbody > tr[data-kwm-mhidden] ~ tr:nth-child(even) {
  background: #eef3e5;
}

Layout with :has() instead of moving nodes. Our appended "Besonderheiten" box lands as a third column in a Bootstrap row that React already populated. Instead of reordering React's columns (forbidden — see Rule 1), we force the other columns full-width, so our box and its partner wrap onto their own line together:

.tm-pet:not(.card) .row:has(> .kwm-besond) > [class*="col-"]:not(.Eigenschaften):not(.kwm-besond) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

One more that surprised us: Bootstrap 5's table-striped colors cells via an inset box-shadow and CSS custom properties, not background. If your override isn't sticking:

td {
  box-shadow: none !important;
  --bs-table-accent-bg: transparent !important;
}

Bonus: context-aware behavior without an API

The plugin renders the same app everywhere; it doesn't know "this is the dogs page". We encode that context in wrapper classes (.kwm-filter.dogs, .kwm-slider.cats) around the shortcode and read them from the augmentation layer — e.g. to restrict the gender filter to Rüde/Hündin on the dog page and Kater/Kätzin on the cat page, or to route card clicks to the right list page:

var slider = card.closest('.kwm-slider');
if (slider) {
  if (slider.classList.contains('cats')) base = '/vergabekatzen/';
  else if (slider.classList.contains('dogs')) base = '/vergabehunde/';
  else base = window.location.pathname;
}
window.location.href = base + '?kwm_pf_id=' + id + '&kwm_pf_v=details';

Cheap, declarative, and it survives plugin updates.

Takeaways

Treat React-managed DOM as read-only structure. Hide with CSS, append your own nodes, update text — never move or delete what React rendered. The bugs you cause otherwise don't appear on first load; they appear on the second interaction.
Design every observer pass to be idempotent, and pick the right guard: data- flags for stable nodes, self-consuming conditions for recycled nodes, compare-before-write for synced content.
Prefer CSS over JS for layout and visibility — :has(), sibling combinators, and attribute hooks set by your JS layer cover more than you'd expect.
Keep it all in one place. Everything lives in a single custom-code block, version-controlled in git — the plugin stays untouched and updateable.

Is this fragile? Somewhat — it's coupled to the vendor's class names, and a major plugin redesign would mean rework. But every transformation fails soft (a missing selector just means an untransformed field, never a crash), and compared to forking a commercial plugin, it's the far more maintainable trade-off.

And the real win isn't technical: the shelter — one of Austria's largest, with room for 163 dogs and 204 cats — gets an adoption UI that looks like their site and speaks to adopters, on aktivertierschutz.at. If you're in Austria and thinking about adopting: the dogs are over here. 🐾

This project was implemented by Sovaro Consulting — we help organizations get the most out of WordPress, even when third-party plugins fight back.

I almost credited llms.txt for a Google AI Mode win. Then I read what Google actually says.

Christof Karisch — Wed, 24 Jun 2026 15:17:52 +0000

I shipped an llms.txt file for a client, their visibility in Google's AI Mode jumped over the same period, and I nearly wrote it up as a clean before/after win for the file.

Then I checked the primary source. This is the honest version — including the part where my first interpretation was wrong.

Context: I'm Christof, a software engineer and technical team lead under Sovaro Consulting in Austria. The client is California Metals, a B2B company specializing in Sustainable Metals — low-carbon alloys and finished components for aerospace, automotive and marine OEMs.

What I observed

Over one reporting cycle, in Google's AI Mode:

California Metals started appearing as the first result for relevant queries.
Two of its certifications were surfaced (a third, ISO 14001, was not — yet).
Its LinkedIn entity gained weight, to the point of showing up twice in the right-hand panel. I had just shipped an llms.txt summarizing the company, its certifications and its key pages. Tempting story: we curated a machine-readable summary, and Google's AI started reading from it. A clean before/after — the kind that's very easy to believe.

It's also almost certainly wrong.

What Google actually says

Google updated its AI optimization guide (Search Central docs, last updated 2026-06-15) with a mythbusting section that names llms.txt directly. The short version: you don't need llms.txt or any special AI markup to appear in Google Search including its generative AI features, because Google Search doesn't use those files. Maintaining one neither helps nor hurts your Google ranking.

This explicitly covers AI Overviews and AI Mode. Per Google's own AI features documentation, those surfaces run on the same index and the same ranking and quality systems as ordinary organic results. AI Mode adds a "query fan-out" — it spins off several related sub-queries and pulls from the normal Search index — but there's no separate llms.txt channel feeding it.

So the file I shipped was not what put my client at the top of AI Mode. Google grounds AI Mode in what it already crawls and trusts across the open web. Which also means the certifications shown there come from sources Google crawls — not from my llms.txt. ISO 14001 will appear in AI Mode when Google picks it up from credible pages (the site itself, certification registries, structured data), not "automatically when I update the llms.txt." That assumption was the core of my mistake.

"But doesn't ChatGPT read it?"

This is the most common pushback, so it's worth being precise. The bots that actually feed ChatGPT — OAI-SearchBot for its search answers, GPTBot for training — crawl HTML directly, and OpenAI's own crawler documentation manages them through robots.txt without mentioning llms.txt at all. Independent log studies covering hundreds of millions of AI-bot requests found hits to /llms.txt to be statistically negligible. GPTBot reportedly fetches the file now and then, but fetching isn't the same as using it to choose or cite sources.

Where llms.txt genuinely gets read is a different layer: coding and agent tooling — Cursor, Claude Code, GitHub Copilot, Windsurf — pulling a documentation site's pages with less token waste, plus emerging agent protocols like OpenAI's Agents SDK. That's real, and it's growing fast.

But notice what that use case requires: documentation worth fetching, and an audience that queries AI tools about your product.

What probably actually moved the needle

Looking at the same reporting period honestly, the likeliest drivers are textbook SEO, not the text file:

Entity/authority signals. The client's LinkedIn presence gained weight in that window — that's exactly the kind of corroborating entity signal Google's AI surfaces lean on. The double-listing is a symptom of a strengthening entity, not of a Markdown file.
The rest of the cycle's work: clearer content, internal linking, crawlability, consistent NAP/brand data across the web. None of that is glamorous, and none of it needs an AI-specific hack. That's the actual takeaway Google keeps repeating: AI search visibility is SEO.

So is llms.txt useless? No — but be precise

It's still worth shipping, for the right reason: it's a business-to-agent (B2A) surface for non-Google LLMs and agent tooling (ChatGPT and Claude agents, Cursor, Windsurf), not a Google ranking lever. Just do it correctly:

Name it llms.txt — plural — and serve it at the domain root (/llms.txt) with a text/plain content type. That's the only path agent tools look for.
Lead with a tight, factual blockquote — that paragraph is what an agent lifts as its mental model of the brand. No marketing adjectives.
Curate, don't dump. A short, high-signal link list.
Only list indexable, canonical pages. The file itself is trivial Markdown:

# California Metals

> Supplier of low-carbon, sustainably sourced metals, alloys and finished
> components for aerospace, defense, automotive, marine and luxury-goods
> manufacturers. Certifications: AS9100, ISO 14001:2015, ISO 20400.

## Core pages
- [Capabilities](https://www.californiametals.com/...): Materials and processes.
- [Sustainability](https://www.californiametals.com/...): CO2-reduction and sourcing standards.
- [Industries](https://www.californiametals.com/...): Sectors and applications.

Most company sites are on WordPress, where a static file in the web root (or a Yoast/Rank Math toggle) is enough. If you use Next.js, serve it from a route handler — same source of truth as the sitemap:

// app/llms.txt/route.ts
export const dynamic = "force-static";

export function GET() {
  const body = `# California Metals

> Supplier of low-carbon, sustainably sourced metals and alloys...
`;
  return new Response(body, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

The takeaway

The improvement was real; the attribution wasn't. Google's AI surfaces rewarded ordinary SEO and a strengthening brand entity — the llms.txt came along for the ride rather than driving it. Ship the file as cheap B2A infrastructure if you want to be early for agent traffic, but keep it on the right side of the ledger: it isn't what gets a non-developer site to the top of AI Mode. Clear content, clean crawlability, and a coherent brand entity are.

Written by Christof Karisch — software engineer and technical team lead at Sovaro Consulting. Work done for my client California Metals, a sustainable metals supplier.

Moz Domain Authority Score for SEO Success

Christof Karisch — Mon, 01 Jul 2024 08:18:13 +0000

At Form und Zeichen, we continually navigate the evolving SEO landscape to provide top-notch digital marketing solutions. Recently, for our client California Metals, we needed a reliable metric to compare their website's performance against competitors. Seeking an insightful and engaging tool, we discovered Moz Domain Authority (DA) and its visualization diagram, revolutionizing our SEO assessments and communications.

Measuring Domain Authority with Moz

The Moz Domain Authority score diagram is an interactive visualization tool that allows SEO professionals and website owners to compare DA scores across multiple domains, track DA score changes over time, identify areas for improvement in link building strategies, and analyze competitors' SEO performance. This powerful diagram leverages data from Moz's extensive link index and presents it in an easy-to-understand format, making it an invaluable asset for both seasoned SEO experts and newcomers to the field.

Integrating the Moz DA Score into Your SEO Workflow

To make the most of this powerful tool, consider the following tips: Make it a habit to check and update your DA score diagram at least once a month. Share the diagram with your SEO team to foster collaborative efforts in improving your website's authority. Use the visual nature of the diagram to clearly communicate SEO progress and strategies to clients. Let the insights gained from the diagram guide your content creation and link building strategies.

Conclusion

The Moz Domain Authority score diagram is a versatile and insightful tool for SEO professionals and website owners. By incorporating it into your regular workflow, you can gain valuable insights, track progress, and make data-driven decisions to improve your website's authority and overall search engine performance. Whether you're a seasoned expert or new to SEO, this visualization tool can help streamline your efforts and drive meaningful results in the competitive digital landscape.

Accessibility errors and special file types in WordPress Elementor

Christof Karisch — Mon, 23 Oct 2023 20:21:38 +0000

As web accessibility becomes increasingly important, at our Design Agency Design Agentur Form und Zeichen in Graz, we are placing a stronger emphasis on fixing accessibility errors on our customer’s websites. A great page builder plugin for WordPress is Elementor. For small Websites, we utilize Elementor most of the time. While Elementor has a great implementation of various accessibility features, we noticed a critical error, that appears when WordPress pages are configured improperly.

In this post, we will explain the “skip to content” error in WordPress Elementor using our client’s website, California Metals.

Moreover, to inspire your web projects, we'd like to inform you that WordPress also supports 3D uploads.

Check your website for the skip to content error

WAVE is a useful plugin available for Chrome, Firefox and Edge. With this tool, we can quickly find critical accessibility errors on the website. When navigating to details, the tool shows that the “skip to content” link is broken.

The reason why the skip to content link is broken, is that two HTML tags from Elementor’s site structure are missing. The missing tag has the id “content”, which the “skip to content” link refers to.

Read the Article about Fixing the skip to content error, if you encountered the same problem.

Loading GLTF models in Elementor

To load a model on a page, we need to use the HTML element of Elementor. On the Three.js examples page, you can find the used script tag by inspecting the website. With a few adoptions, we can use those examples on our Elementor page.

If you're interested in adding 3D models to your website or if you've faced file upload issues, read our blog post on using three.js with Elementor.

Website design among different industries

Christof Karisch — Sun, 18 Jun 2023 22:34:25 +0000

At our Design Agency Design Agentur Form und Zeichen in Graz, we specialize in creating beautiful websites that are tailored to each industry. In this article, we will showcase some of our client's websites, highlighting the design concepts behind them. Join us as we explore the inspirations and ideas that brought these designs to life.

Enduring metal

To convey a sense of durability, stability, and trust for our client California Metals - Sustainable Metals, we aimed to create a visual impression that aligned with these values. While traditional metallic colors such as gray (steel), yellow (gold), red (copper), and blue (zinc, osmium) were considered, none of them seemed quite fitting. However, given our customer's commitment to supplying sustainable metals, we made a bold choice to incorporate a green metallic look. This distinctive color choice not only sets our client apart, but also emphasizes their unique company philosophy. Through this carefully crafted visual element, we aim to leave a lasting impression that resonates with their target audience.

Colorful statements

When working with our esteemed client Aktiver Tierschutz Austria, we had a distinct vision in mind. Our goal was to draw attention to their noble mission of aiding animals while evoking positive emotions through visually appealing marketing materials. To achieve this, we opted for a vibrant and modern design approach. The use of multiple colors became instrumental, with a particular emphasis on light and friendly tones such as yellow, light blue, and rosy hues. This intentional color palette aims to captivate viewers' attention, inviting them to appreciate the playful and engaging aspects of the design.

Conclusion

The selection of colors for your design plays a pivotal role. Colors establish the foundation for how a design communicates with people, how it visually presents itself, and the emotions it evokes. It is essential to invest time in discovering the perfect color palette, as doing so can elevate your designs to new heights. By carefully considering and choosing the right colors, you can enhance the overall impact and effectiveness of your designs, ensuring they resonate with your target audience on a deeper level. Remember, the power of colors can take your designs to the next level and make a lasting impression.

Advanced Next.js challenges

Christof Karisch — Sun, 11 Jun 2023 11:23:57 +0000

At our Design Agency Design Agentur Form und Zeichen in Graz, we are passionate about leveraging Next.js for our programming needs. We thrive on the opportunity to address and overcome even the most specialized customer requirements, thanks to the abundance of powerful libraries available. In this article, I will share a curated summary of fascinating challenges we have successfully tackled using modern techniques.

The perfect hosting provider

As an EU-based company, we understand the significance of GDPR compliance for our customers. Many clients specifically request EU-based hosting to ensure their data remains within the region. However, finding an EU-based hosting provider that matches the exceptional quality of Vercel can be a challenge.

We have written a blog article that ranks and reviews the top EU-based hosting providers. In this article, you will find a comprehensive summary of each provider's features, enabling you to choose the one that best suits your needs while ensuring GDPR compliance. Link to the article: Next.js hosting in the EU

Achieving Exceptional Performance in Complex Logical Programs

In the realm of Next.js programming, we occasionally encounter intricate logical challenges that demand innovative solutions. When faced with requirements of a logical nature, complexity can rise rapidly. For instance, envision the task of developing a bicycle configurator for a webshop, where various components such as the brake, wheel, and bicycle size have to be compatible.

To address these complexities effectively, our blog article offers a comprehensive, step-by-step tutorial on harnessing the power of SAT solvers. By leveraging SAT solvers, we unlock a robust approach to tackling such tasks.

Conclusion

There are many interesting challenges for web projects. I am curious to learn more about solving complex tasks and provide perfect solutions for our customers. You can find some ideas for modern web development on my profile page. If you want to read comprehensive tutorials for modern web development, have a look at our development blog.

Modern Web Development with WordPress Elementor

Christof Karisch — Sat, 27 May 2023 00:09:32 +0000

As a web developer working at Design Agentur Form und Zeichen in Graz, I have encountered various challenges while striving to build stunning, modern websites and stable web applications. Depending on the specific project requirements, we leverage different technologies and services. In this post, I aim to present some intriguing approaches for modern web development for small websites and provide a concise overview of essential software that every web developer should be familiar with.

Modern WordPress and some hidden gems

Back in the day, when numerous content management systems (CMS) emerged and competed for dominance, it became commonplace to purchase a promising theme or utilize a free one to swiftly build a website. For a developer it was easy to build a clean and simple WordPress theme from scratch, but it was not possible to eliminate the plugins, especially when the website had to provide a lot of features or if it used ecommerce plugins like WooCommerce.

However, as the website grew in size and the demand for additional functionality increased, more and more plugins were installed, leading to instability and a less professional appearance in terms of design.

Furthermore, as time elapses, security issues begin to manifest. It is important to regularly update old themes and plugins, but unfortunately, some of them cease to receive updates. In fact, we had to resolve security breaches on multiple customer websites that were compromised by automated scripts. This is particularly crucial when it comes to WordPress, as it is one of the mostly widely used CMS and therefore a target for many automated hacking attacks.

Simplicity and security with Elementor

When visual post editing plugins like visual composer showed up, things got easier. Without detailed knowledge, a user could change the content of the website and even apply some minor layout and design changes. But with new possibilities, new problems arrived. Those visual editors produced a high amount of metadata, that is stored in the database. Because of the bad efficiency of the plugin, saving an edited page could take up to 20 seconds, depending on the complexity of the page. The page speed for customers, which is very important for Search Engine Optimization (SEO) suffered too. With cache plugins, the situation got better, at least for the publicly presented pages.

When Elementor was released, there suddenly was a simple very easy-to-use editor, that apparently even works very efficient compared to others.

The way of setting up a simple website changed completely. Instead of using a theme, even beginners are able to build simple websites. The first step is to install the free and clean Hello Elementor Theme. Because the theme is not the main product of, Elementor is very simple and clean and thus a very low security risk. Elementor also has a great interest in keeping the theme updated, as it is the foundation of a stable Elementor setup. They also provide a child theme, if you want to extend it with custom code. But by now it is not necessary to install the child theme for small websites anymore, because Elementor has a great integration of custom code blocks for JavaScript and CSS code or any other HTML tag that is loaded to the HTML DOM.

Modern design elements

Nowadays, all important devices including smartphones are capable of processing complex website content without effort. With these capabilities, new possibilities arise. In a recent blog post about the integration of 3D objects into your WordPress Elementor website that I published on our website, you can find a step-by-step guide. It is very easy to load 3D objects, and it only takes some basic HTML and JavaScript knowledge to adjust the code to your needs.

Fast websites with stable caching plugins

I mentioned above, that we had to fix several security breaches on WordPress websites. Most of the time the vulnerability was caused by plugins. But even when the plugins are updated frequently, there are some unfixed high severity security issues in some plugins. Especially, caching plugins have a high chance of producing security problems. The plugin we had the best experience with is W3 Total Cache. It is very fast, and we never had a security breach caused by this plugin so far.

Easy resets with a backup plugin

Even when you have a stable and secure website setup, it is always advisable to configure automated backups. I have encountered numerous situations where a simple plugin update caused a WordPress website to crash. In such cases, or if you accidentally remove important components from your website, having a quick reset option can be extremely helpful.

The most stable option is to setup Jetpack for your website. But this service is charged. If you want to use a free alternative, I would recommend UpdraftPlus. This backup solution is hosted on your website, and you can connect file storage services like Dropbox to be sure to never lose your data.

Basic security setup

Finally, the stability of the website can be improved by a huge step with a security plugin. Wordfence Security is one of the most popular plugins of this kind. Make sure to back up your website before you install plugins like this, because they change internal WordPress files and settings. There is a small possibility, that your website crashes during the setup of the plugin because of wrong hosting settings or because you lose the connection. In case of a crash, just reset your website with your backup solution and try again.

A stable WordPress installation

When you use those tool, you have a stable and fast basic installation. With Elementor, it is easy to build pages without deep programming knowledge. Of course, there are many interesting aspects of developing websites with WordPress, that I did not cover in this post. But it is a great start and prevents you from running into many potential problems.

If you found this post helpful, please feel free to leave a comment and share your thoughts. I would also love to hear your recommendations for any plugins you consider essential for a basic setup.