DEV Community: Dipankar Maikap

How to Secure Your Headless WordPress & WPGraphQL API

Dipankar Maikap — Fri, 05 Sep 2025 03:30:00 +0000

Going headless with WordPress is awesome. You get a world-class CMS on the backend and the freedom to use modern frontend frameworks like Astro, Next.js, Nuxt, or SvelteKit. But with this new architecture comes a new set of security considerations.

One of the biggest mistakes developers make is leaving their GraphQL endpoint wide open. A public /graphql endpoint is like leaving the blueprints to your house on the front lawn. It allows anyone to:

Introspect your entire schema, revealing your data structures, custom post types, and fields.
Run complex, resource-intensive queries that could slow down or even crash your server (a form of DoS attack).
Potentially access private or draft content if permissions aren’t perfectly configured.

This guide walks you through a multi-layered approach to locking down your WPGraphQL endpoint so only your frontend application can talk to it.

WPGraphQL Plugin Security Options

WPGraphQL includes a built-in option to restrict access to authenticated users only.

Steps to enable:

In the WordPress dashboard, go to GraphQL → Settings.
Toggle Restrict Endpoint to Authenticated Users.
Save changes.

From now on, any unauthenticated request to https://yourdomain.com/graphql will be blocked. This is your first line of defense.

WordPress Application Passwords

WordPress has a native feature called Application Passwords. It generates credentials specifically for external apps without exposing your main login password.

How to create one:

Go to Users → Profile in the WordPress admin.
Scroll to Application Passwords.
Enter a descriptive name (e.g., Astro Frontend) and click Add New Application Password.
Copy the generated password immediately (it won’t be shown again).

You’ll use this password to authenticate API requests from your frontend.

Making Authenticated API Calls

Let’s use that Application Password to securely query your WordPress backend.

1. Store credentials in environment variables

Never hardcode secrets into your components. Instead, create a .env.local file in your frontend project:

# .env.local
WP_GRAPHQL_URL="https://yourdomain.com/graphql"
WP_USER="your_wordpress_username"
WP_APP_PASSWORD="your-generated-app-password"

✅ Add .env.local to .gitignore so credentials don’t end up in version control.

2. Create a reusable fetch helper

Here’s a safe fetchAPI function you can reuse across your app:

// lib/graphql.js

/**
 * Perform an authenticated fetch to the WordPress GraphQL API.
 * @param {string} query - The GraphQL query string.
 * @param {object} [variables={}] - Query variables.
 * @returns {Promise<any>} - GraphQL response data.
 */
export async function fetchAPI(query, variables = {}) {
  const endpoint = process.env.WP_GRAPHQL_URL;
  const username = process.env.WP_USER;
  const password = process.env.WP_APP_PASSWORD;

  if (!endpoint) {
    throw new Error("WP_GRAPHQL_URL is not defined in environment variables.");
  }

  const headers = { "Content-Type": "application/json" };

  // Add Basic Auth if credentials exist
  if (username && password) {
    headers["Authorization"] = "Basic " + btoa(`${username}:${password}`);
  } else {
    console.warn(
      "WordPress credentials not set. Falling back to unauthenticated request."
    );
  }

  const res = await fetch(endpoint, {
    method: "POST",
    headers,
    body: JSON.stringify({ query, variables }),
  });

  const json = await res.json();

  if (json.errors) {
    console.error("GraphQL errors:", json.errors);
    throw new Error("Failed to fetch from WordPress API");
  }

  return json.data;
}

Now you can query WordPress safely:

const query = `
  query GetPosts {
    posts {
      nodes {
        title
        slug
      }
    }
  }
`;

fetchAPI(query).then((data) => console.log(data));

Advanced Security Layers (Defense in Depth)

Application-level auth is good, but production sites need extra safeguards. Here are a few options:

1. Add a Secret Header

Require all requests to /graphql to include a private header.

Frontend fetch:

const headers = {
  "Content-Type": "application/json",
  "X-Secret-Request-Header": process.env.SECRET_HEADER_KEY,
};

.env.local

SECRET_HEADER_KEY="a-very-long-random-string"

Nginx config example:

location = /graphql {
  if ($http_x_secret_request_header != "a-very-long-random-string") {
    return 403; # Forbidden
  }
  try_files $uri $uri/ /index.php?$args;
}

2. Firewall or Hosting Rules

Whitelist only your frontend app or serverless function IPs.
Deny all other requests to /graphql.
Require the secret header in firewall rules.

3. Disable the WordPress REST API (if unused)

If you don’t use REST, disable it for anonymous visitors:

<?php
// functions.php

add_filter('rest_api_init', function () {
    if (!is_user_logged_in()) {
        wp_die(
            'The REST API is disabled for public access.',
            'rest_api_disabled',
            array('status' => 401)
        );
    }
});

This blocks public access to endpoints like /wp-json/wp/v2/users, preventing user enumeration attacks.

Resources

✅ With these layers in place, your /graphql endpoint is protected from unauthorized access while still letting your frontend communicate securely.

Ultimate Guide to Integrating React Hook Form with TanStack Start

Dipankar Maikap — Sun, 23 Mar 2025 23:00:00 +0000

In this tutorial, we’ll explore how to integrate React Hook Form, a widely-used form library for React, with TanStack Start, an innovative React meta-framework. This guide will walk you through creating a robust, type-safe form that supports both client-side and server-side validation, works with or without JavaScript enabled, and remains reusable across your projects.

Prerequisites

To follow along, you should have a basic understanding of React and React Hook Form. Expertise isn’t required, but familiarity with their core concepts will help. Additionally, while knowledge of TanStack Start isn’t mandatory, reviewing its official documentation beforehand is recommended for a smoother experience.

Why React Hook Form and TanStack Start?

React Hook Form is a popular choice for managing forms in React, excelling at client-side validation and providing instant feedback to users when they submit incorrect data. However, client-side validation has limitations—such as when JavaScript is disabled in the browser. For critical workflows, server-side validation is a best practice to ensure reliability.

TanStack Start, a modern React meta-framework, enhances this setup with powerful features like its Server Functions, which offer a superior alternative to server actions in frameworks like Next.js. In this guide, we’ll leverage these tools to build a form that:

Validates input on both client and server sides.
Functions seamlessly with or without JavaScript.
Remains type-safe and reusable.

Let’s dive into the code!

Required Packages

Beyond a TanStack Start project, you’ll need the following dependencies:

pnpm i @hookform/resolvers clsx react-hook-form zod

Tailwind CSS: Used for styling in this guide (optional; feel free to use plain CSS).
clsx: A utility library for conditionally managing class lists.
react-hook-form: The core form library.
zod: For schema validation and type safety.

All code is available on GitHub (https://github.com/dipankarmaikap/tanstack-react-hook-form) with a live demo here (https://tanstack-react-hook-form.netlify.app/).

Organizing the Project Structure

While you’re free to structure your project as you prefer, here’s an approach that works well:

src/routes: Contains all TanStack Start routes (e.g., index.tsx for the homepage).
src/app: A custom folder for route-specific logic.
- src/app/home: Dedicated to the homepage.
- components/SimpleForm.tsx: Form component.
- schema.ts: Form schemas and types.
- actions.ts: Server Functions for form handling.
src/components: Reusable components (e.g., Input.tsx).
src/utils: Helper functions (e.g., delay.ts for mimicking server delays).
src/lib: Server-related utilities (e.g., form-helper.ts for reusable form logic).

These files don’t exist yet—they’re examples of how we’ll organize the code moving forward.

Setting Up a Page in TanStack Start

Start by defining a route in src/routes/index.tsx:

import { createFileRoute } from "@tanstack/react-router";
import SimpleForm from "~/app/home/components/SimpleForm";

export const Route = createFileRoute("/")({
  component: RouteComponent,
  loader: async () => {
    return {
      name: "Home",
    };
  },
});

function RouteComponent() {
  return (
    <main className="p-4 pt-8 sm:pt-12">
      <h1 className="text-2xl font-bold mb-4">Examples</h1>
      <div className="flex">
        <SimpleForm />
      </div>
    </main>
  );
}

RouteComponent: The page content, rendering a SimpleForm component.
createFileRoute: TanStack Start’s method for defining routes and loading data. Refer to their docs for more details.

Defining the Form Schema

Create a schema with Zod for type safety and reusability in src/app/home/schema.ts:

import { z } from "zod";

const SimpleFormSchema = z.object({
  email: z.string().email(),
});

export type SimpleFormSchemaType = z.infer<typeof SimpleFormSchema>;
export { SimpleFormSchema };

This schema ensures the email field is a valid email string.

Building the Simple Form Component

Now, let’s create a basic form in src/app/home/components/SimpleForm.tsx:

import { zodResolver } from "@hookform/resolvers/zod";
import { SubmitHandler, useForm } from "react-hook-form";
import { SimpleFormSchema, type SimpleFormSchemaType } from "~/app/home/schema";

export default function SimpleForm() {
  const simpleForm = useForm<SimpleFormSchemaType>({
    resolver: zodResolver(SimpleFormSchema),
  });
  const { register, handleSubmit, formState } = simpleForm;
  const { errors } = formState;

  const onSubmit: SubmitHandler<SimpleFormSchemaType> = (data) => {
    console.log(data);
  };

  return (
    <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
      <input
        className="flex border"
        {...register("email", { required: true })}
      />
      {errors.email && (
        <span className="flex text-red-600">This field is required</span>
      )}
      <input className="flex bg-neutral-800 text-white" type="submit" />
    </form>
  );
}

This minimal form includes an email field with client-side validation. Submitting logs the data to the console, but it won’t work without JavaScript. Let’s fix that next.

Supporting Forms Without JavaScript

To handle submissions without JavaScript, we’ll use TanStack Start’s Server Functions. Here’s an example in src/app/home/actions.ts:

export const registerSimpleForm = createServerFn({
  method: "POST",
  response: "raw",
})
  .validator((data: unknown) => {
    if (!(data instanceof FormData)) {
      throw new Error("Expected FormData");
    }
    return data;
  })
  .handler(async ({ data }) => {
    const formObject = Object.fromEntries(data.entries());
    const result = SimpleFormSchema.safeParse(formObject);

    return new Response(
      JSON.stringify({
        success: result.success,
        data: result.success ? result.data : result.error.format(),
      }),
      {
        headers: { "Content-Type": "application/json" },
        status: result.success ? 200 : 400,
      }
    );
  });

Update the form to use this server function:

<form
  method="POST"
  action={registerSimpleForm.url}
  className="flex flex-col gap-4"
>
  ...
</form>

Submitting now sends the form to the server, but the browser redirects to the server function's URL (e.g., /_server/...). To stay on the same page, we’ll use cookies and a redirect.

Creating Reusable Form Helpers

Let’s extract validation and response logic into reusable utilities in src/lib/form-helper.ts.

Validate Form Data

import { ZodSchema } from "zod";

interface ValidationResult<T> {
  success: true;
  message?: string;
  data: T;
}

type FormDataObject = Record<string, any>;

interface ValidationError {
  success: false;
  data: FormDataObject;
  errors: Record<string, string>;
}

export type ValidationResponse<T> = ValidationResult<T> | ValidationError;

export const validateData = <T,>(
  data: FormData,
  schema: ZodSchema<T>
): ValidationResponse<T> => {
  const formObject = Object.fromEntries(data.entries()) as FormDataObject;
  const result = schema.safeParse(formObject);
  if (result.error) {
    return {
      data: formObject,
      success: false,
      errors: Object.fromEntries(
        result.error.issues?.map((issue) => [issue.path[0], issue.message]) ||
          []
      ),
    };
  }
  return { success: true, data: result.data };
};

The validateData function takes form data and its ZodSchema, returning an object with success, user input, and errors if validation fails. This ensures reusable validation across multiple forms.

Generate Server Response

For responses, we'll create a utility function to keep registerSimpleForm clean and reuse logic across the app.

import { getWebRequest } from "@tanstack/react-start/server";

const FLASH_TIMEOUT = 5;

export const generateResponse = <T,>(
  data: ValidationResponse<T>,
  status: number = 301
): Response => {
  const request = getWebRequest();
  const responseString = JSON.stringify(data);
  const responseType = request?.headers.get("X-Response-Type") || "redirect";
  const headers = new Headers({
    "Content-Type": "application/json",
  });
  const isRedirect = responseType?.includes("redirect");

  if (isRedirect) {
    const requestSource = new URL(request?.headers.get("referer") || "");
    headers.set("Location", requestSource.pathname);
    headers.set(
      "Set-Cookie",
      `flashData=${encodeURIComponent(
        responseString
      )}; Path=/; Max-Age=${FLASH_TIMEOUT}; Secure; HttpOnly`
    );
  }
  return new Response(responseString, {
    status: isRedirect ? status : 200,
    headers,
  });
};

Let’s break down the code. This function primarily takes a data prop (from validateData), with status being optional. It accesses the request using TanStack’s built-in getWebRequest, checking for the X-Response-Type header. By default, it redirects, but when called from JS with a different value, it returns JSON instead.

If redirecting, we set a flashData cookie for 5 seconds. Keeping it short ensures fast-loading pages don’t miss essential hints while avoiding unnecessary data retention.

You can view the full form-helper.ts code here.

Now, let’s update registerSimpleForm to use it.

Update the server function:

import { createServerFn } from "@tanstack/react-start";
import { SimpleFormSchema, type SimpleFormSchemaType } from "~/app/home/schema";
import { generateResponse, validateData } from "~/lib/form-helper";
import { delay } from "~/utils/delay";

export const registerSimpleForm = createServerFn({
  method: "POST",
  response: "raw",
})
  .validator((data: unknown) => {
    if (!(data instanceof FormData)) throw new Error("Expected FormData");
    return data;
  })
  .handler(async ({ data }) => {
    await delay(1000);
    const validationResult = validateData(data, SimpleFormSchema);
    if (!validationResult.success) {
      return generateResponse<SimpleFormSchemaType>(validationResult);
    }
    if (validationResult.data.email === "admin@gmail.com") {
      return generateResponse<SimpleFormSchemaType>({
        success: false,
        data: validationResult.data,
        errors: { email: "This email is already taken" },
      });
    }
    return generateResponse({ ...validationResult, message: "Success" });
  });

Now, submitting reloads the page without redirection, storing response data in a flashData cookie.

Displaying Feedback Without JavaScript

Retrieve the cookie with a new server function in src/lib/getFlashData.ts:

import { createServerFn } from "@tanstack/react-start";
import { getCookie } from "@tanstack/react-start/server";

export const getFlashData = createServerFn().handler(async () => {
  const cookies = getCookie("flashData");
  if (!cookies) return null;
  return JSON.parse(cookies);
});

Update the route to pass flashData:

//src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";
import SimpleForm from "~/app/home/components/SimpleForm";
import { type SimpleFormSchemaType } from "~/app/home/schema";
import { type ValidationResponse } from "~/lib/form-helper";
import { getFlashData } from "~/lib/getFlashData";

export const Route = createFileRoute("/")({
  component: RouteComponent,
  loader: async () => {
    const flashData =
      (await getFlashData()) as ValidationResponse<SimpleFormSchemaType> | null;
    return {
      name: "Home",
      flashData,
    };
  },
});

Update SimpleForm.tsx to display feedback:

import { zodResolver } from "@hookform/resolvers/zod";
import clsx from "clsx";
import { SubmitHandler, useForm } from "react-hook-form";
import { registerSimpleForm } from "~/app/home/actions";
import { SimpleFormSchema, type SimpleFormSchemaType } from "~/app/home/schema";
import { Route } from "~/routes";

export default function SimpleForm() {
  const simpleForm = useForm<SimpleFormSchemaType>({
    resolver: zodResolver(SimpleFormSchema),
  });
  const { register, handleSubmit, formState } = simpleForm;
  const { errors, isSubmitting } = formState;

  const onSubmit: SubmitHandler<SimpleFormSchemaType> = (data) => {
    console.log(data);
  };

  const { flashData } = Route.useLoaderData();
  const haveErrors = flashData?.success === false;
  const showError = errors?.email || haveErrors;

  return (
    <form
      method="POST"
      action={registerSimpleForm.url}
      className="flex flex-col gap-4"
    >
      <div className="email">
        <input
          className="flex border"
          defaultValue={flashData?.data.email}
          {...register("email", { required: true })}
        />
        <span
          className={clsx("text-red-600 flex text-sm mt-0.5", {
            hidden: !showError,
          })}
        >
          {haveErrors
            ? flashData.errors?.email
            : errors?.email?.message?.toString()}
        </span>
      </div>
      <input
        disabled={isSubmitting}
        className="flex bg-neutral-800 text-white disabled:opacity-60"
        type="submit"
        value={isSubmitting ? "Submitting..." : "Submit"}
      />
    </form>
  );
}

Now, the form provides feedback (e.g., “This field is required” or “This email is already taken”) even without JavaScript.

Adding JavaScript-Enabled Submission

For JavaScript-enabled clients, implement the onSubmit handler:

const onSubmit: SubmitHandler<SimpleFormSchemaType> = async (_, e) => {
  if (!e) return;
  try {
    const formData = new FormData(e.target as HTMLFormElement);
    const response = await submitFormData<
      ValidationResponse<SimpleFormSchemaType>
    >(registerSimpleForm.url, formData);
    if (!response.success) {
      Object.entries(response.errors).forEach(([field, message]) => {
        setError(field as keyof SimpleFormSchemaType, {
          type: "validate",
          message,
        });
      });
    }
    console.log(response);
  } catch (error) {
    console.log(error);
  }
};
//src/lib/submitFormData.ts
export const submitFormData = async <T,>(
  url: string,
  formData: FormData
): Promise<T> => {
  try {
    const response = await fetch(url, {
      method: "POST",
      body: formData,
      headers: {
        Accept: "application/json",
        "X-Response-Type": "json",
      },
    });

    return (await response.json()) as T;
  } catch (error) {
    console.error("Network error:", error);
    throw new Error("Something went wrong. Try again.");
  }
};

This fetches the server response as JSON, updating the form with errors dynamically.

Final Thoughts

You now have a fully functional form that:

Works with or without JavaScript.
Validates on both client and server sides.
Uses reusable, type-safe code.

Check the GitHub repo for a more complex example with a reusable Input component. While this form doesn’t yet save data to a database, the structure makes it easy to extend—whether by storing submissions, redirecting users, or adding custom logic.

Happy coding! Questions? Let me know.

Resources

How to Use Tailwind CSS v4 in Astro

Dipankar Maikap — Sun, 09 Feb 2025 15:36:00 +0000

Tailwind CSS is a popular utility-first CSS framework that helps you build modern and responsive web designs efficiently. In this tutorial, we'll walk through how to set up Tailwind CSS v4 in an Astro project using the @tailwindcss/vite plugin.

Install Tailwind CSS

To get started, install Tailwind CSS and the @tailwindcss/vite plugin via npm:

npm install tailwindcss @tailwindcss/vite

Configure the Vite Plugin

Next, add the @tailwindcss/vite plugin to your Astro configuration file (astro.config.mjs):

// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Import Tailwind CSS

Create a CSS file (e.g., tailwind.css) in your src directory and import Tailwind CSS by adding the following line:

@import "tailwindcss";

Include Tailwind in Your Astro Project

Make sure to reference the tailwind.css file you created in the previous step within your layout file (layout.astro). This ensures that Tailwind styles are correctly applied to your project. You can include it using the following method:

Import in `layout.astro`

---
import "../tailwind.css";
---

A complete Layout.astro file may look like this:

---
import "~/tailwind.css";
---

<!doctype html>
<html lang="en" class="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
  </head>
  <body>
    <slot />
  </body>
</html>

Start Using Tailwind CSS

Once everything is set up, you can start using Tailwind’s utility classes in your Astro components. For example:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Welcome to Tailwind CSS in Astro!
</div>

Tailwind CSS v4 Breaking Changes

Tailwind CSS v4 introduces some breaking changes. If you're upgrading from v3, you might notice differences in styling or some features behaving differently. I recommend checking out the official upgrade guide from Tailwind to ensure a smooth transition: Tailwind CSS Upgrade Guide

That's it! You've successfully set up Tailwind CSS v4 in your Astro project. Happy coding! 🚀

Announcing Stable Live Preview for Storyblok’s Astro SDK

Dipankar Maikap — Mon, 03 Feb 2025 13:56:27 +0000

We are absolutely thrilled to announce that starting with version 6.0.0, our Astro SDK, @storyblok/astro, now includes a stable live preview feature!

With this major release, we’ve introduced some breaking changes as well. Let’s take a look at what’s new and how you can update your code to work seamlessly with the latest release.

Module import changes

In this release, we’ve removed the default export in favor of a named export. This change primarily affects your astro.config.mjs file, so make sure to update it as shown below:

//astro.config.mjs
import { storyblok } from '@storyblok/astro';

export default {
  integrations: [
    storyblok({
      accessToken: 'OsvN....',
      bridge: {
        resolveRelations: ['featured-articles.posts'],
      },
      enableFallbackComponent: true,
      livePreview: true,
    }),
  ],
};

Removal of `useStoryblok`

In our experimental release, useStoryblok required extensive configuration, even if you didn’t use all live preview features, to maintain consistency with our other SDKs. Additionally, we used AST code parsing, which made the implementation more complex.

In this version, useStoryblok has been completely removed and replaced with a new function: getLiveStory. Here’s how you can use it:

---
// pages/[...slug].astro
import { getLiveStory, useStoryblokApi } from '@storyblok/astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import BaseLayout from '../layouts/Layout.astro';

const { slug } = Astro.params;
let story = null;

const liveStory = await getLiveStory(Astro);
if (liveStory) {
  story = liveStory;
} else {
  const sbApi = useStoryblokApi();
  const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
    version: 'draft',
    resolve_relations: ['featured-articles.posts'],
  });
  story = data?.story;
}
---

<BaseLayout>
     <StoryblokComponent blok={story.content} />
</BaseLayout>

If you’re using resolve_relations, pass it directly in the bridge configuration in astro.config.mjs. Refer to the first code example above for details.

Listening for live preview updates

When the live preview updates content in the Storyblok editor, a custom event (storyblok-live-preview-updated) is triggered. You can listen for this event in your application like this:

// pages/[...slug].astro
<script>
  document.addEventListener("storyblok-live-preview-updated", () => {
    console.log("Live preview: body updated");
  });
</script>

This is particularly useful if you need to regenerate CSS or handle other custom tasks when the content updates.

Next steps

We’re excited for you to try out this stable live preview feature! We would absolutely love to see your projects built with Storyblok and Astro, and hear your feedback.

Would you like to contribute to the development of @storyblok/astro? Feel free to create an issue or submit a PR in the official GitHub repository.

Further resources

Create custom toggle button - That's accessibility friendly

Dipankar Maikap — Mon, 10 Aug 2020 13:11:59 +0000

In this blog, we are going to create a custom toggle button like the above image. We are also going to make the toggle button accessibility friendly so everyone can have a great experience.

You can find all the code in my GitHub and feel free to use it.

Here is a list of all the steps we are going to take.

Design the toggle button
Add javascript to make the button work
Make the button keyboard accessible

First Step

<div
   id="toggle-container"
   class="toggle-container"
   role="checkbox"
   aria-checked="false"
   tabindex="0"
   >
   <div id="toggle-button" class="toggle-button">
      <p>
         Turn
<span id="toggle-button-text" class="dynamic-text">On</span>
      </p>
   </div>
   <p id="toggle-container-text">Off</p>
</div>

Let’s go through the above HTML code. The first div is our toggle button container. It has a few attributes id, class, role, aria-checked, and tabindex. If you are thinking why all this attributes id and class should be enough to create our toggle button. You would be not completely wrong but the other three attributes are very important to make this toggle button accessibility friendly and its considered best practice.

Next within the first div we have another div and this will act as the button. The two p tags has on and off text which we will change based on the toggle state.

Next, we have to add the CSS to make the toggle button beautiful.

.toggle-container {
  user-select: none;
  cursor: default;
  background: rgb(173, 173, 173);
  width: 50px;
  height: 100px;
  display: flex;
  text-align: center;
  flex-direction: column;
  padding: 2px;
}
.toggle-button {
  background: white;
  width: 50px;
  height: 50px;
  order: 1;
  font-size: 13px;
  text-align: center;
}
.dynamic-text {
  display: block;
}
.toggle-button.toggle-button-active {
  order: 0;
  color: black;
}
.toggle-container.toggle-container-active {
  background-color: rgb(16, 121, 190);
  color: white;
}

The above CSS is almost self-explanatory. This is our button disable or off mode style. The last two lines of CSS are for the active state of our toggle button. We will toggle those two classes based on our button state.

Second Step

Ok so by now you should have a nice toggle button but it does nothing when you click on it. Now we will make the toggle button work by adding javascript.

var initialState = false;
var toggleContainer = document.getElementById("toggle-container");
var toggleButton = document.getElementById("toggle-button");
var toggleContainerText = document.getElementById("toggle-container-text");
var toggleButtonText = document.getElementById("toggle-button-text");

We are selecting our HTML elements by their ID. Also, we have a variable called initialState with the value of false. Now we can add an event listener to toggleContainer and toggle the active classes to make the button work.

toggleContainer.addEventListener("click", handelClick);
function handelClick() {
  initialState = !initialState;
  toggleContainer.classList.toggle("toggle-container-active");
  toggleButton.classList.toggle("toggle-button-active");
  if (initialState) {
    toggleContainerText.innerHTML = "On";
    toggleButtonText.innerHTML = "Off";
    toggleContainer.setAttribute("aria-checked", "true");
  } else {
    toggleContainerText.innerHTML = "Off";
    toggleButtonText.innerHTML = "On";
    toggleContainer.setAttribute("aria-checked", "false");
  }
}

Ok, so we added an event listener to toggleContainer and passed a function called handelClick(). When a user clicks in the toggleContainer the handelClick() function will run and toggle the two active classes in toggleContainer and toggleButton.

We also have to track our button current state. By default it’s inactive and that’s why we declared a variable initialState above. So now on every click we are changing the value of initialState and based on that we are changing the text and aria-checked attributes value.

We are almost done. If you check now our button looks great and works almost perfectly. We added tabindex to make this button accessible by pressing tab on the keyboard and we are changing the aria-checked attribute so voice translator programs can track that. We have one more step left that is making this button work on keypress.

Making accessibility friendly

Like we have a click event listener in toggleContainer we are adding a keydown event listener to toggleContainer and passed a handleKeydown() function.

toggleContainer.addEventListener("keydown", handleKeydown);
function handleKeydown(event) {
  var flag = false;
  console.log(event);
  switch (event.keyCode) {
    case 32:
      handelClick();
      flag = true;
      break;
    case 13:
      handelClick();
      flag = true;
      break;
    default:
      break;
  }
  if (flag) {
    event.stopPropagation();
    event.preventDefault();
  }
}

In handleKeydown() function, we have a switch statement that tracks for spacebar and enter key and run our handelClick() function.

We also have a variable called flag and its value is by default false and if users press either space or enter we are changing its value to true and running the last two functions.

Finally, now you have a working toggle button that works on click and if you press spacebar or enter key it works same way. Its fully accessibility friendly and follows best practices.

You can read more in detail about best practices on w3.org. IF you want to know about key codes for each key visit keycode.info.

Find the project files here.

I have tried to keep this as short as possible but if you have any questions please feel free to ask them in the comment. Stay safe and keep your surroundings clean 🙂

Add dark mode to your wordpress site

Dipankar Maikap — Sat, 18 Jul 2020 20:32:29 +0000

Dark mode is very popular nowadays. In this blog, I’ll explain how I added dark mode into my WordPress site using CSS and Javascript.

My WordPress site is created with Elementor and the Elementor’s hello theme. But you can add the dark mode to any WordPress site.

Check out my website to see the darkmode in action

First Step

In order to add the dark mode, You have to write custom CSS based on that. It should not be very hard you can use the browser inspect feature to find the CSS classes and write a dark mode version of that class.

For example, let’s say you have default color for h1 tag is black and in the dark mode, you want it to be white. For this, your CSS should look like this.

h1{
color:black;
}
.dark h1{
color:white;
}

I hope you get the idea. FYI I have less than 30 lines of CSS for dark mode in my site.

Second Step

Once you have the CSS ready for the dark mode your next step will be to have a button in the header that changes the theme mode. It can be a button with plain text dark and light or you can use icons. I have added the below code in html widget with an Id of toggle_theme_button.

<i id="toggle_theme_button" aria-hidden="true" class=""></i>

If you notice I have not added anything in the class section and if you now publish your site you will see nothing. We will add the classes dynamically based on the theme mode selected.

Now, let’s discuss a few problems we have in front of us and how to solve them.

The Problems

Now the HTML and CSS part is done its time for some javascript.

Add the .dark or .light class to the body when clicks on the toggle button.
Add different classes to the toggle button so the icons change based on the current theme.
Set initial theme as soon as the page renders.
Store user-selected theme in localStorage so it stays the same when the page changes.

We will go through the above list from the bottom. If we go from the top this blog will get longer and we have to refactor the codes once we face different problems.

Third Step

Let’s set the initial theme as soon as the page renders.

//set default theme on load
window.addEventListener("DOMContentLoaded", (event) => {
var theme = localStorage.getItem("theme");
  if (!theme) {
    localStorage.setItem("theme", "light");
  }
  setInitialThemeClass(theme);
console.log("Setting initial theme to - ",theme)
});

As you can see in the above code I’ve added a DOMContentLoaded event listener to check if the user has any stored theme preference in the localStorage, if not we are assigning default light theme. After that, we are passing the selected theme to a function called setInitialTheme(theme). We will look into this function next.

Note – If you are curious why I used DOMContentLoaded instead of onload event listener. I used the onload event listener first and it works but the issue was onload fires when everything is loaded which takes some amount of time so if you change the page you will notice some color flicker. DOMContentLoaded fires as soon as the initial HTML document is loaded, that’s why I choose this.

Fourth Step

The setInitialTheme(theme) function takes the current theme and adds that class to the body either light or dark. And the if condition checks for the current theme and adds toggle button icon class based on that.

//Add initial theme class
var toggle_theme = document.getElementById("toggle_theme_button");
function setInitialTheme(theme) {
  document.body.classList.add(theme);
  if (theme === "dark") {
    toggle_theme.classList.add("icon-sun");
  } else {
    toggle_theme.classList.add("icon-moon");
  }
}

Fifth Step

We have the initial theme setup done now we have to work on the toggle theme button.

//Toggle theme button
toggle_theme.addEventListener("click", function () {
var theme = localStorage.getItem("theme");
  changeTheme(theme);
});

In the above code, we are adding a click event listener to the toggle button and getting the current theme from localStorage and passing it to changeTheme(theme) function.

Final Step

This is the final step after this you will have a working dark mode on your site.

//Change the current theme
function changeTheme(theme) {
  if (theme === "light") {
    localStorage.setItem("theme", "dark");
    document.body.classList.add("dark");
    document.body.classList.remove("light");
    toggle_theme.classList.add("icon-sun");
    toggle_theme.classList.remove("icon-moon");
  } else {
    localStorage.setItem("theme", "light");
    document.body.classList.add("light");
    document.body.classList.remove("dark");
    toggle_theme.classList.add("icon-moon");
    toggle_theme.classList.remove("icon-sun");
  }
}

In this function, we are taking the current theme and if the current theme is light we are changing localStorage theme to dark, adding the dark class to the body and removing the light class and for the toggle button, we are adding the icon-sun class and removing icon-moon class, and opposite in else section.

Congress 🙌 Now you have a working dark theme on your WordPress site.

Note- I started writing blog few days ago on my website and this is my first post on DEV so if I have missed anything or you have questions please let me know in the comments.

DEV Community: Dipankar Maikap

How to Secure Your Headless WordPress & WPGraphQL API

WPGraphQL Plugin Security Options

WordPress Application Passwords

Making Authenticated API Calls

1. Store credentials in environment variables

2. Create a reusable fetch helper

Advanced Security Layers (Defense in Depth)

1. Add a Secret Header

2. Firewall or Hosting Rules

3. Disable the WordPress REST API (if unused)

Resources

Ultimate Guide to Integrating React Hook Form with TanStack Start

Prerequisites

Why React Hook Form and TanStack Start?

Required Packages

Organizing the Project Structure

Setting Up a Page in TanStack Start

Defining the Form Schema

Building the Simple Form Component

Supporting Forms Without JavaScript

Creating Reusable Form Helpers

Validate Form Data

Generate Server Response

Update the server function:

Displaying Feedback Without JavaScript

Adding JavaScript-Enabled Submission

Final Thoughts

Resources

How to Use Tailwind CSS v4 in Astro

Install Tailwind CSS

Configure the Vite Plugin

Import Tailwind CSS

Include Tailwind in Your Astro Project

Import in layout.astro

Start Using Tailwind CSS

Tailwind CSS v4 Breaking Changes

Announcing Stable Live Preview for Storyblok’s Astro SDK

Module import changes

Removal of useStoryblok

Listening for live preview updates

Next steps

Further resources

Create custom toggle button - That's accessibility friendly

Here is a list of all the steps we are going to take.

First Step

Second Step

Making accessibility friendly

Add dark mode to your wordpress site

First Step

Second Step

The Problems

Third Step

Fourth Step

Fifth Step

Final Step

Import in `layout.astro`

Removal of `useStoryblok`