DEV Community: Jorge Araya

The WordPress Stack I Keep Reaching For

Jorge Araya — Wed, 15 Apr 2026 03:23:28 +0000

Over the past few years I've worked with a good mix of WordPress setups. Traditional starter themes, page builders, and more recently some FSE experiments. Each approach solves a different problem, and I still think they all have their place depending on the type of project and the team behind it.

That said, there’s one combination I keep coming back to more often than not:

_tw as the base theme
ACF with custom blocks
Tailwind CSS
Alpine.js

Not because it's the "best" option in every case, but because it consistently hits a sweet spot between flexibility, performance, and development speed. It’s one of those setups that just feels reliable once you’ve used it a few times.

What most of my projects actually need

The projects I typically work on don’t call for a heavy frontend framework or a fully visual editing experience. Most of them are marketing sites, content-driven builds, or custom client work where clarity and maintainability matter more than flashy tooling.

What they really need is:

Clean, maintainable code that won't become a headache six months later
Fast load times without needing constant optimization workarounds
A structured editing experience that keeps content editors productive without giving them enough freedom to accidentally break things

This stack fits that space really well. It gives me control as a developer while still delivering a solid experience for whoever is managing the content later on.

How the pieces work together

What I value most about this combination isn’t any single tool. It’s how they complement each other and reduce friction across the whole development process.

_tw as the foundation

_tw gives me a clean starting point without imposing too many opinions. Instead of spending the first hour of a project removing things I don’t need, I can focus on shaping the theme around the project requirements from the start.

It also comes with Tailwind already configured, which removes a lot of setup overhead and makes the initial development phase feel almost immediate.

ACF Blocks for content structure

This is where most of the architecture lives. I define blocks that give clients clear, structured fields to work with. No guessing where things go. No accidentally breaking layouts by dragging elements around or mixing components in unintended ways.

In practice, this means:

more predictable layouts
fewer support requests
and a smoother handoff once the project is live

The editing experience ends up feeling intentional. Flexible enough to cover real use cases, but constrained enough to keep everything consistent across pages.

Tailwind for fast, predictable styling

When every block is treated as its own component, Tailwind makes styling feel almost mechanical (in a good way). I’m not spending time naming classes or dealing with specificity issues. I’m just building.

Over time, this also helps keep styles more consistent across the project. There’s less drift, less duplication, and fewer surprises when revisiting older code.

Paired with the _tw setup, the workflow barely needs any CSS configuration out of the box.

Alpine.js for just enough interactivity

Toggles, dropdowns, tabs, mobile menus, conditional visibility. Alpine handles all of it with a few attributes directly in the markup.

No build step. No component hierarchy. No state management overhead.

For the level of interactivity most marketing sites and corporate pages need, this approach keeps things simple and easy to maintain without sacrificing functionality.

When I reach for something else

I don’t default to this stack on every project. There are clear cases where it’s not the right fit, and forcing it would only make things harder.

For example:

App-like projects that need complex state management or real-time interactions
Teams already committed to React, Vue, or similar ecosystems, where consistency matters more than personal preference
Projects where full visual editing is a hard requirement, and the client expects to control layout more freely

In those situations, I’ll switch to whatever makes the most sense. The goal is always to pick the right tool for the job, not to stick to a single stack out of habit.

Why it keeps earning its spot

Even with all the alternatives out there, like headless setups, block-based builders, and full JavaScript frameworks, I keep reaching for this stack because it consistently delivers where it matters.

It lets me:

Ship faster without cutting corners on structure
Hand off confidently, knowing the codebase will still make sense later
Avoid unnecessary complexity that doesn’t add real value to the project

It’s predictable in the best way. I know how it behaves, how it scales, and what to expect when coming back to a project months later. That kind of reliability is hard to overstate in real-world work.

What's next

This isn’t a fixed rule. It’s just a current favorite.

I’m always experimenting with new approaches, especially as WordPress continues to evolve. If a better setup comes along for this type of project, I’m more than open to switching things up.

But for now, _tw + ACF + Tailwind + Alpine keeps proving itself, project after project.

I usually write about WordPress workflows and dev setups on my site.

Original post:
https://jorgearaya.com/blog/wordpress-stack-i-keep-reaching-for

Create Your Own Chromium Browser Extension from Scratch

Jorge Araya — Fri, 28 Feb 2025 03:00:24 +0000

Browser extensions are powerful tools that allow users to customize and enhance their browsing experience, or in my case, as a developer it allows me to create solutions for my everyday problems.

If you’re a web developer interested in building your own extension for Chromium-based browsers like Google Chrome, Microsoft Edge, or Brave, this guide will walk you through the basics by creating an extension to copy the name of the images 🏞️.

Understanding the Basics

A Chromium extension is essentially a small web application made up of HTML, CSS, and JavaScript. It interacts with the browser through the Extensions API, allowing you to modify pages, add functionalities, and interact with the browser UI.

Key Components of a Chromium Extension

Manifest File (manifest.json) - The configuration file that defines the extension’s metadata, permissions, and scripts.
Background Script - Runs in the background and manages events.
Content Scripts - Injected into web pages to modify content.
Popup UI - The front-end interface shown when users interact with the extension.
Permissions - Defines what the extension can access, such as tabs, storage, or bookmarks.

Setting Up the Extension

Step 1: Create the Project Directory

Create a new folder and name it something like image-name-copy or any other name you like.

Step 2: Define the Manifest File

Inside your project folder, create a manifest.json file with the following content:

{
  "manifest_version": 3,
  "name": "Image Name Copy",
  "version": "1.0",
  "description": "Easily copy image filenames through a right-click context menu. Automatically saves names to clipboard with confirmation notification.",
  "permissions": [
    "contextMenus",
    "scripting",
    "notifications",
    "clipboardWrite"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"],
  "icons": {
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Here are some important notes and definitions for the code above:

permissions: This is very important since it will define which browser permissions our extension will require.
background: This is the main script where we'll handle events and execute our logic.

Step 3: Implement the Background Script

Create a background.js file inside your project folder.

And first let create the context menu, this will add a menu item on the browser when you right-click, add this code on the background.js file

// Create context menu
chrome.contextMenus.create({
  id: "copyImageName",
  title: "Copy Image Name",
  contexts: ["image"],
});

Now, let's define what happens when the user clicks this menu item. We'll use a "click" listener to trigger the functionality we want when this menu item is clicked.

A script is injected into the page using chrome.scripting.executeScript() this method executes the code in the context of the web page where the user clicks the menu item. And this calls the function copyToClipboard that contains the browser function navigator.clipboard.writeText() to copy the filename.

In this case, we are setting a notification as feedback. This way we can visually see when the name of the image is being copied. For the notifications I've created a separate function called showNotification.

Add the following code right bellow the context menu code.

// Listen for click in context menu
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId !== "copyImageName" || !info.srcUrl) return;

  const imageName = extractImageName(info.srcUrl);

  chrome.scripting
    .executeScript({
      target: { tabId: tab.id },
      function: copyToClipboard,
      args: [imageName],
    })
    .then(([result]) => {
      if (result?.result?.success) {
        showNotification(`Copied: ${imageName}`, "success");
      } else {
        throw new Error(result?.result?.error || "Copy failed.");
      }
    })
    .catch((error) => {
      showNotification(`Error: ${error.message}`, "error");
    });
});

// Copy to clipboard within the page
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return { success: true };
  } catch {
    return {
      success: false,
      error: "Failed to copy. Click on the page first.",
    };
  }
}

// Get the image name from the URL
function extractImageName(url) {
  return url.split("/").pop().split("?")[0] || "untitled";
}

// Show notifications
function showNotification(message, type = "success") {
  chrome.notifications.create({
    type: "basic",
    iconUrl: type === "success" ? "images/success.png" : "images/error.png",
    title: type === "success" ? "Success" : "Error",
    message,
  });
}

Step 4: Adding your images/icons

Icons are required for browser extensions, you can create a folder named images and add all the files in there. These images will be called in the manifest.json file on the "icons" section.

Step 5: Load the Extension in Chromium

Open chrome://extensions/ in your browser.
Enable "Developer mode" (toggle in the top right corner).
Click "Load unpacked" and select your project folder.
Your extension should now appear in the list!

Now if you right-click on an image on any page, it will copy the name of the file. Please note that this won't work on background images, since it requires a different process.

Conclusion

Creating a Chromium extension is a great way to enhance browser functionality and customize the web experience. By following this guide, you now have the foundation to build and expand your own extensions. Happy coding!

Here you can find a repository with the example used on this post.

If you have any ideas, questions, or improvements, feel free to leave a comment bellow. Happy coding! 🚀

Building Your WordPress Website: Custom Code or Page Builder?

Jorge Araya — Fri, 10 Jan 2025 03:47:35 +0000

When you're building a WordPress website, you're faced with a crucial decision: should you opt for a custom-coded theme or rely on a page builder? Both approaches have their own strengths and weaknesses, and the best choice ultimately depends on your specific needs and priorities.

Understanding the Options

Custom Code:

Building a WordPress site with custom code involves manually writing HTML, CSS, JavaScript, and PHP to design and develop your website. This approach often provides complete control and flexibility over functionality, design, and performance.

Pros:

Unparalleled Flexibility: Total control over every aspect of the website's look and feel.
Enhanced Performance: Can be optimized for speed and efficiency, leading to better search engine rankings.
Improved Security: Reduced vulnerability to common WordPress exploits.
Unique Branding: Stand out from the crowd with a truly distinctive online presence.

Cons:

Higher Cost: Development and ongoing maintenance can be expensive.
Steeper Learning Curve: Requires technical expertise for customization and updates, especially if you are just starting out in WordPress custom code development.
Longer Development Time: Can take significantly longer to build compared to page builders.

Page Builders:

Page builders are drag-and-drop tools that allow you to design and build a website without needing to write code. Popular page builders for WordPress include Elementor, Beaver Builder, and Divi.

Pros:

Ease of Use: Intuitive interfaces make website creation accessible to beginners.
Faster Development: Quickly create complex designs without coding knowledge.
Cost-Effective: Many options are available as one-time purchases or affordable subscriptions.
Large Community and Support: Access to extensive resources, tutorials, and active communities.

Cons:

Limited Customization: May not be suitable for highly complex designs or unique branding needs.
Potential Performance Issues: Can sometimes impact website loading speed if not used carefully.
Bloat: Can lead to unnecessary code and increase website size, potentially affecting performance.
Vendor Lock-in: Can be challenging to migrate away from a page builder if you decide to change platforms.

Which is Right for You?

Choose a Custom-Coded Theme if:
You require a highly unique and complex website design, performance and SEO are top priorities, you have a dedicated budget for development and ongoing maintenance, and you need a high level of customization and control.

Choose a Page Builder if:
You have limited technical expertise and prefer a user-friendly approach, you need to build a website quickly and efficiently, you're on a tight budget and looking for cost-effective solutions, and you value ease of use and a large community for support.

Hybrid Approach

Many developers successfully leverage a hybrid approach by combining the power of custom code with the user-friendliness of page builders. This synergistic method allows you to harness the strengths of both worlds, resulting in a website that is both visually appealing and highly functional.

Key benefits include:

Increased flexibility: Combine custom code for unique features with the ease of a page builder.
Enhanced performance: Optimize with custom code while maintaining visual appeal.
Improved security: Build a secure foundation with custom code.

Example:
Use custom code for new content types or advanced features, then easily manage them with a page builder. You could build your custom theme foundation with code and then use a page builder for the internal content of pages or posts.

This approach provides a balance of control, flexibility, and ease of use for your WordPress website.

Both custom code and page builders have their place in WordPress development. Understanding your specific needs and limitations will help you make the right choice. Whether you opt for the creative freedom of custom coding or the efficiency of page builders, the key is to build a website that serves your goals, engages your audience, and scales with your growth.

What would you choose? Share your thoughts in the comments below.

First Look at Incremental Static Regeneration (ISR) in Next.js

Jorge Araya — Tue, 07 Jan 2025 03:50:33 +0000

Static site generation (SSG) is one of the core features that makes Next.js powerful. However, traditional static sites often face the challenge of keeping content up-to-date without redeploying the entire application.

In this post, you'll learn:

What ISR is and why it's useful.
How to implement ISR in a simple blog example.
Common use cases and best practices.

What is Incremental Static Regeneration (ISR)?

ISR is a feature that allows you to update static content at runtime, combining the speed of static pages with the flexibility of dynamic content.

With ISR your application will have the ability to revalidate static pages after a specified time interval. In simpler words, this means you can serve pre-rendered content while keeping it updated without rebuilding your application.

With ISR, you can:

Pre-render pages at build time.
Set an interval (e.g., every 10 seconds) to regenerate the static page in the background.
Serve updated content on subsequent requests.

How It Works

Incremental Static Regeneration (ISR) combines the benefits of static generation with the freshness of dynamic content.

When a user makes the first request to a page, Next.js generates it statically and caches the result. This initial generation happens on-demand rather than at build time, meaning pages are created only when they're actually needed.
Here's how it works step by step:

First user visits the page → Next.js generates and caches it
Other users visit → They see the cached version
After revalidation time expires → Next visit triggers background update
New version replaces the old one in cache

After a specified time period, the next user request triggers a background regeneration, seamlessly updating the cached content.

How to setup ISR?

Let’s build a simple blog that updates dynamically using ISR. This example uses the App Router.

// app/articles/page.js
export const revalidate = 10 // Set the revalidation interval to 10 seconds

async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
  return res.json()
}

export default async function Articles() {
  const posts = await getPosts()

  return (
    <div>
      <h1>Latest Articles</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

In the above example the page will be regenerated every 10 seconds.

When to Use ISR?

ISR is perfect for:

Content that updates periodically but doesn’t need real-time updates.
Product pages that need periodic updates (e.g., stock availability).
Pages with dynamic content that changes occasionally.

Conclusion

ISR in Next.js bridges the gap between static and dynamic content, offering a flexible and powerful way to build more sophisticated web applications. Whether you’re creating a blog, an online store, or a dashboard, ISR is a very cool feature that is worth exploring.

What are your thoughts on ISR? Have you used it in your projects? Please share your experience in the comments!

How to set up a simple WordPress local environment with Docker

Jorge Araya — Fri, 15 Nov 2024 03:35:19 +0000

Docker is one of those amazing tools that everyone wants to get their hands on. In the last few years, it has become very popular, and if you are bored of the same local environment setups with xampp or wamp, this is a great option to learn about containers and improve your development environment.

First, you need to install Docker

To install docker desktop you can download it from the docker page. It's available for Windows, Linux, and Mac, check out the official page, select your system, and follow the installation steps, and then you'll be ready to go!

Create the project directory and files

You need to create a directory where your WordPress installation is going to be, in this directory you will have the necessary folders to place your plugins and themes.

Create a folder, I'm going to call it wp-local-docker, inside this folder you need to create a docker compose file called docker-compose.yml, this is the configuration file for our docker setup. In this file, we're going to add all the necessary services to have WordPress up and running.

In the docker-compose.yml file you need to specify the version and the services, the first service will be the database; in this service, we define the database image that docker is going to use, the volume, the ports where the service will be running, and the MySql environment variables.

The next service is going to be the WordPress service, where we need to define the image, the WordPress environment variables, and the volumes where the WordPress plugins and themes will be allocated, the entire file should look like this:

version: '3.9'
services:
  db:
    image: mysql:latest
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    ports:
      - "3306:3306"
    networks:
      - localwp

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    volumes:
      - wpfiles:/var/www/html
      - ./wordpress/themes:/var/www/html/wp-content/themes
      - ./wordpress/plugins:/var/www/html/wp-content/plugins
    ports:
      - "8000:80"
    restart: on-failure
    networks:
      - localwp

volumes:
  db_data:
  wpfiles:

*Make sure to use the correct identation to .yml files.

As you may see, you will need a directory to allocate all your themes and plugins, for this create a folder called wordpress and inside this folder create another two, one for plugins and one for themes.

At this point, the only thing left to do is open docker, and once it's running on your system, open the terminal and go to your project folder, in my case wp-local-docker/ and run docker-compose up, with this docker is going to create the containers and pull all the necessary thing to get the services (databse and wordpress) running. You can run docker-compose down to stop the containers.

And that's it! 🎉 You've now set up a Dockerized WordPress development environment. Enjoy the smooth and flexible experience of working with containers! Happy coding and have fun! 🚀

Here is a link to a github repository with a basic example.

Understanding Shortcodes in WordPress: A Beginner’s Guide

Jorge Araya — Tue, 12 Nov 2024 04:13:07 +0000

In the WordPress world, shortcodes are a very powerful feature. They allow you to insert complex functionality into your posts and pages with a simple code snippet. If you're just starting with WordPress development, this guide will help you understand what shortcodes are, how they work, and how to create your own!

What exactly are shortcodes?

Shortcodes are small pieces of code that you add to a post, page, or widget to include dynamic content. They act as placeholders that WordPress processes and replaces with more complex functionality when the page loads.

For example, [year] could be a shortcode used to display the current year dynamically.

Why should you use shortcodes?

They provide a simplified way to add advanced features to your content. Instead of writing the same code repeatedly, you can create a reusable shortcode to save time and maintain consistency. Shortcodes are perfect for adding custom features like contact forms, buttons, or galleries to multiple pages, with the ability to control them from a single place.

Now, let’s get to the good part: how to create custom shortcodes.

How to create a custom shortcode

Creating your own basic shortcode in WordPress requires just a little PHP.

1. Open your `functions.php` file.

2. Create a function for what you want the shortcode to do.

For example:

function cta_button_shortcode() {
    return '<a href="#" class="cta-button">Click Here!</a>';
}

3. Register the shortcode.

The add_shortcodefunction takes two parameters: the first is the name of the shortcode, for example, [cta_button]. The second is the callback function that will handle all the logic and render the result—in this case, our cta_button_shortcode function.

add_shortcode('cta_button', 'cta_button_shortcode');

4. Use Your Shortcode!

Now, you can use [cta_button] in any post or page, and it will display a link element with the text "Click Here!".

Adding parameters to the shortcode

You can also add parameters to shortcodes, which act as attributes that pass information to the shortcode function. This lets you change the text or the link of our button without needing to edit the code or create additional shortcodes. With parameters, you can also define default values in case they’re not provided in the shortcode.

I highly recommend checking out the official WordPress documentation about the shortcode atts.

See the example bellow:

function cta_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Here!', // Default value
            'url' => '/', // Default value
        ),
        $atts,
        'cta_button'
    );
    return '<a href="' . esc_url($atts['url']) . '" class="cta-button">' . esc_html($atts['text']) . '</a>';
}

Now we can use it as [cta_button text="Learn More" url="https://example.com"], and if we need to change the text and link, we can do so without modifying our shortcode code.

Now you know the basics of WordPress shortcodes! With just a few lines of code, you can create powerful and flexible content elements that make your site more dynamic and easier to manage. Whether you’re building buttons, forms, or unique design elements, shortcodes are here to make your life as a developer a bit easier and a lot more fun.

So go ahead, experiment, and see what cool features you can create! 🎉 Shortcodes are like little magic tricks you can pull out anytime to make WordPress even more amazing. Happy coding! 🚀

DEV Community: Jorge Araya

The WordPress Stack I Keep Reaching For

What most of my projects actually need

How the pieces work together

_tw as the foundation

ACF Blocks for content structure

Tailwind for fast, predictable styling

Alpine.js for just enough interactivity

When I reach for something else

Why it keeps earning its spot

What's next

Create Your Own Chromium Browser Extension from Scratch

Understanding the Basics

Key Components of a Chromium Extension

Setting Up the Extension

Step 1: Create the Project Directory

Step 2: Define the Manifest File

Step 3: Implement the Background Script

Step 4: Adding your images/icons

Conclusion

Building Your WordPress Website: Custom Code or Page Builder?

Understanding the Options

Custom Code:

Page Builders:

Which is Right for You?

Hybrid Approach

First Look at Incremental Static Regeneration (ISR) in Next.js

What is Incremental Static Regeneration (ISR)?

How It Works

How to setup ISR?

When to Use ISR?

Conclusion

How to set up a simple WordPress local environment with Docker

First, you need to install Docker

Create the project directory and files

Understanding Shortcodes in WordPress: A Beginner’s Guide

What exactly are shortcodes?

Why should you use shortcodes?

How to create a custom shortcode

1. Open your functions.php file.

2. Create a function for what you want the shortcode to do.

3. Register the shortcode.

4. Use Your Shortcode!

Adding parameters to the shortcode

1. Open your `functions.php` file.