DEV Community: danielfilemon

How to Create a Custom Gutenberg Blocks Plugin in WordPress (wp-custom-blocks)

danielfilemon — Wed, 25 Mar 2026 14:45:00 +0000

Building custom Gutenberg blocks is one of the most valuable skills for modern WordPress developers. In this article, we’ll create a real plugin from scratch called wp-custom-blocks.

The Gutenberg editor has transformed how we build content in WordPress. Instead of relying on shortcodes or page builders, we can now create reusable, dynamic blocks using modern JavaScript (React) and WordPress APIs.

In this tutorial, you’ll learn how to create your own custom block plugin and understand the core concepts behind it.

Prerequisites:

Before starting, make sure you have:

WordPress installed locally
Node.js and npm installed
Basic knowledge of JavaScript and React
A code editor (VS Code recommended)

Step 1: Create the Plugin

Open your terminal and run:

npx @wordpress/create-block wp-custom-blocks

This command scaffolds a complete plugin with build tools, configuration, and a sample block.

Step 2: Navigate to the Project

cd wp-custom-blocks
npm install
npm start

Now your development environment is running and watching for changes.

Step 3: Understand the Project Structure

The generated project includes:

src/
index.js
build/
block.json
package.json

src/ → source code (React)
build/ → compiled files
block.json → block configuration

Step 4: Create a Hero Block

Let’s create a custom block with editable content.

Create a folder:

src/blocks/hero/

js
import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import Save from './save';

registerBlockType('wpcb/hero', {
title: 'Hero Block',
category: 'design',

attributes: {
title: { type: 'string', default: 'Hero Title' },
text: { type: 'string', default: 'Hero description...' },
buttonText: { type: 'string', default: 'Click here' },
},

edit: Edit,
save: Save,
});

Step 5: Block Editor (Edit)

js
import { RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
return (

tagName="h1"
value={attributes.title}
onChange={(value) => setAttributes({ title: value })}
/>

  <RichText
    tagName="p"
    value={attributes.text}
    onChange={(value) => setAttributes({ text: value })}
  />

  <RichText
    tagName="button"
    value={attributes.buttonText}
    onChange={(value) =>
      setAttributes({ buttonText: value })
    }
  />
</div>

);
}

Step 6: Save Component

js
import { RichText } from '@wordpress/block-editor';

export default function Save({ attributes }) {
return (

  <p>
    <RichText.Content value={attributes.text} />
  </p>

  <button>
    <RichText.Content value={attributes.buttonText} />
  </button>
</div>

);
}

Step 7: Import the Block

In src/index.js:

js
import './blocks/hero';

Step 8: Test in WordPress

Move the plugin folder to: wp-content/plugins/
Activate the plugin
Open the block editor
Search for Hero Block

Creating custom Gutenberg blocks is a powerful way to build modern WordPress experiences. With tools like @wordpress/create-block, the setup is easier than ever.

If you're serious about WordPress development, mastering block development is a must-have skill.

How to Use Shopify to Build Your Online Store

danielfilemon — Sun, 06 Jul 2025 13:27:35 +0000

Nowadays, many people want to sell products on the internet, and Shopify is a platform that helps you create an online store in a simple way. I will explain, step by step, how to use Shopify to start your online business.

First, you need to go to Shopify’s website and sign up. You can test the platform for free for a few days before paying for a plan. After creating your account, you choose the name of your store, add your business information, and set the currency and language you want to use.

Next, you can customize how your store looks. Shopify has many ready-made themes, some free and some paid, to make your website look nice and organized. You can change the colors, fonts, and images to match your brand style.

With the layout ready, it’s time to add your products. You should upload photos, set the prices, write a description, and add the stock quantity. Shopify lets you organize products into categories, which helps customers find what they are looking for. There are also apps you can use to improve your sales, marketing, and store management.

Another important step is choosing payment and shipping options. Shopify accepts credit cards, PayPal, and other payment systems. You can also set up shipping rates and connect with delivery companies, so customers know exactly how much they will pay to receive the product.

Finally, after checking all the details, you can publish your store and start selling. In the Shopify admin panel, you can see sales reports, visitor numbers, and other data that help you improve your business more and more.

In summary, Shopify is a practical tool that lets you create and manage an online store quickly and safely. This way, anyone can start selling online and reach more customers.

How I Built My First Portfolio with React and Vite

danielfilemon — Thu, 03 Jul 2025 17:32:15 +0000

Hello, developers! In this article, I want to share how I built my first portfolio using React and the Vite bundler. I had always wanted a personal website to showcase my projects, tell a bit of my story, and make it easier for recruiters and clients to get in touch.

I chose React for its popularity and flexibility, and used Vite to speed up development with a modern, fast, and practical environment. I’ll tell you how I planned, developed, and published my portfolio — and the lessons I learned along the way.

Motivation

Having an online portfolio today is essential for anyone working in tech. Besides being a business card, it’s a concrete way to demonstrate your skills and stand out.

I chose React and Vite because:

React gives me freedom and a powerful component-based architecture
Vite has a super fast build and efficient hot reload
The React community is huge, with tons of documentation
Deployment is easy on platforms like Vercel or Netlify

Planning

Before opening the code editor, I did a bit of planning:

✅ Portfolio sections:

Home
About
Projects
Contact

✅ Chosen technologies:

React
Vite
Vercel

✅ Design
I got inspiration from Dribbble and Behance references to define the color palette, typography, and layout. I made a quick wireframe on paper to guide me.

Development

I started the project with:

npm create vite@latest my-portfolio --template react

Then I configured Tailwind CSS following the official documentation, which really sped up the styling process.

I organized the project structure like this:

/src/components for reusable components (navbar, footer, project cards)
/src/pages for the main pages
/public for images and favicons

One of my initial challenges was keeping components clean and separated, since it’s easy to end up with giant files. Later I refactored and split them into smaller, easier-to-maintain components.

I also added a JSON file to store the projects, so I can update them later without changing the layout code directly.

Deployment

For hosting, I used Vercel, which works great with React projects. You just connect your GitHub repository, and Vercel takes care of the entire build and deployment process automatically.

I also set up a custom domain to make my portfolio more professional.

Conclusion

Building my portfolio with React and Vite was a great experience. I learned how to better organize my code, practiced using modern tools, and launched my site in just a few days.

If you’d like to take a look, check it out here:

👉 (https://danielfilemon)*

Feel free to leave a comment or question — I’d love to connect!

# How to Optimize Images to Improve Your Website’s SEO 🚀

danielfilemon — Wed, 02 Jul 2025 13:51:07 +0000

Images are essential to make a website attractive and engaging, but if they aren’t optimized, they can hurt your performance and impact your Google rankings. In this article, I’ll show you in a practical way how to optimize images to ensure a good user experience while improving your website’s SEO.

✅ Why does image optimization impact SEO?

Slow sites are penalized in search rankings
Heavy images increase loading time
Optimized images also rank better on Google Images, bringing extra organic traffic
Improved accessibility for users with screen readers

In other words: **optimizing your images improves your website’s performance and visibility at the same time.

1️⃣ Choose the right format

JPEG: best for photographs
PNG: great for images with transparency
WebP: modern format, high quality, smaller size
SVG: ideal for icons and vector graphics

💡 Tip: WebP can reduce image weight by up to 30% compared to JPEG without losing quality.

2️⃣ Reduce file size

Set width and height to what is actually needed
Use compression tools like TinyPNG, ImageOptim, or plugins such as Smush (WordPress)
Avoid oversized images scaled down with CSS

3️⃣ Write a proper ALT attribute

The alt attribute describes the content of the image, helping Google understand it while improving accessibility.

Example:

html

🚀 Introducing MyStarterTheme: A Clean, Minimal WordPress Starter Theme for Developers

danielfilemon — Tue, 01 Jul 2025 19:54:21 +0000

Hey everyone! 👋

If you’ve ever built a custom WordPress theme from scratch, you know how time-consuming it can be to set up the same base structure over and over again. That’s why I created MyStarterTheme, a clean and minimalist starter theme ready to accelerate your development.

In this post, I’d love to walk you through what makes MyStarterTheme useful, what features it includes, and how you can try it out or even contribute.

✨ Why MyStarterTheme?
WordPress remains one of the world’s most popular CMS platforms, but the default themes or heavy frameworks can sometimes be bloated for a fully custom project. With MyStarterTheme, you get:

✅ A clean foundation with minimal styling
✅ Support for modern WordPress features (custom logos, featured images, etc.)
✅ Ready-to-go template structure
✅ A sidebar area for widgets
✅ Easy-to-read, developer-friendly code

It’s intentionally kept simple, so you can extend it however you like — whether with Gutenberg blocks, advanced Custom Post Types, or custom styles.

🛠 Features Overview
Here’s what’s included out of the box:

Fully responsive, minimal HTML/CSS

Custom logo support

Navigation menu registered in functions.php

Sidebar with widget support

Featured image (post thumbnails) support

Simple, commented code structure

GPL v2+ license, so you’re free to build on top of it

🚀 Getting Started
You can get started right away:

1️⃣ Clone the repository:

git clone https://github.com/danielfilemon/my-starter-theme.git
2️⃣ Place it inside your WordPress theme folder:
wp-content/themes/my-starter-theme

3️⃣ Activate the theme from the WordPress admin.

That’s it! You can now begin customizing to your heart’s content.

🙌 Contributing
If you spot any issues or have ideas for improvement, feel free to open an issue or pull request on GitHub. Community contributions are more than welcome!

👉 Check out the repository on GitHub

❤️ Final Thoughts
My goal with MyStarterTheme is to make the life of WordPress developers easier, speeding up your workflow so you can focus on what matters: building amazing websites.

If you give it a try, let me know! I’d love to hear your feedback or see what you build with it.

Happy coding! 🚀

How I Built a Simple Contact Form Plugin for WordPress from Scratch

danielfilemon — Mon, 30 Jun 2025 18:30:07 +0000

👋 Introduction
Hey everyone! 👋

Today I’d like to share how I built a simple contact form plugin for WordPress from scratch. This is a perfect step-by-step guide for anyone who wants to get started developing plugins and understand how the magic behind WordPress really works.

This project is designed both for those who want to learn and for those who want to customize their own websites.

✨ What will we build?
✅ A simple contact form plugin
✅ Fields: name, email, message
✅ Sends the message directly to the WordPress site administrator’s email
✅ Easy to install and activate
✅ You can place the form anywhere using a shortcode

🗂️ Plugin structure
The project structure looks like this:

my-contact-form-plugin/
├── my-contact-form-plugin.php
└── readme.md
🧩 Plugin code
Inside my-contact-form-plugin.php, add:

<?php
/*
Plugin Name: My Contact Form
Description: A simple contact form plugin with shortcode
Version: 1.0
Author: Your Name
*/

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) exit;

/**

Render the form */ function mcf_render_form() { ob_start(); ?> Name: Email: Message: Send <?php return ob_get_clean(); }

/**

Handle the form submission
*/
function mcf_handle_post() {
if ( isset($_POST['mcf_submit']) ) {
$name = sanitize_text_field($_POST['mcf_name']);
$email = sanitize_email($_POST['mcf_email']);
$message = sanitize_textarea_field($_POST['mcf_message']);

$to      = get_option('admin_email');
$subject = "New contact message from $name";
$body    = "Name: $name\nEmail: $email\nMessage:\n$message";
$headers = ["From: $name <$email>"];

wp_mail($to, $subject, $body, $headers);

// Simple confirmation
add_action('wp_footer', function() {
    echo "<script>alert('Message sent successfully!');</script>";
});

}
}
add_action('init', 'mcf_handle_post');

// Register the shortcode
add_shortcode('my_contact_form', 'mcf_render_form');
🛠️ How to install
1️⃣ Upload the plugin folder to wp-content/plugins/
2️⃣ Activate it from the WordPress dashboard
3️⃣ In any page or post, insert this shortcode:

plaintext
Copiar
Editar
[my_contact_form]
✅ Done! The form will be working for your visitors.

🚀 How could it be improved?
This is a basic starter plugin, but you can expand it:

Add prettier styles with CSS

Improve validation (with regex, for example)

Add anti-spam protection (like Google reCAPTCHA)

Save messages to the WordPress database

Display submitted messages in the WordPress admin panel

👨‍💻 Code on GitHub
If you want to check the repository, contribute, or make suggestions:

👉 [danielfilemon]

🤝 Conclusion
Building plugins for WordPress may sound intimidating, but starting with something small — like a contact form — is an amazing way to understand the structure and the connection between WordPress and PHP.

I hope this tutorial helps you take your first steps! If you’d like to share ideas or collaborate, feel free to reach out here or on GitHub. 🚀

How to Name Variables Clearly in JavaScript

danielfilemon — Fri, 21 Feb 2025 19:24:53 +0000

Choosing good variable names makes code clearer and easier to maintain. Well-defined names help with understanding and reduce errors, making the code more readable for other developers. Avoid generic names and prefer descriptive terms that precisely represent the variable’s purpose, facilitating quick identification of its use.

Use the camelCase format, maintaining a consistent pattern throughout the code, as this improves standardization and avoids confusion. Additionally, avoiding excessive abbreviations and overly long names is essential to balancing clarity and conciseness. Variables should indicate their function in the code, making it more organized and intuitive.

Well-named code not only improves individual understanding but also facilitates collaboration among developers, reducing the need for excessive explanatory comments. Moreover, clear and standardized code enhances long-term maintenance by making future modifications and debugging easier.

Following these practices improves development quality, prevents future confusion, and contributes to more professional and efficient code.

The Importance of Networking in a Developer's Career

danielfilemon — Wed, 12 Feb 2025 18:56:11 +0000

Networking is essential for developers as it opens doors to job opportunities, learning, and collaborations. Many positions are filled through referrals, and staying in touch with other professionals can make it easier to access these opportunities. Additionally, exchanging experiences with other developers accelerates learning, helps solve problems with new approaches, and keeps you updated on emerging technologies.

Building an active presence in online communities, events, and social networks such as LinkedIn and Twitter increases visibility and credibility in the field. Contributing to open-source projects is also a way to showcase skills, collaborate with other professionals, and expand connections in a practical and relevant way.

Networking is not just about adding people but creating genuine relationships, maintaining contact, interacting regularly, and offering help whenever possible. Building valuable connections can lead not only to professional opportunities but also to continuous learning and personal growth. Investing in networking can be the key to career growth and building a strong support network. Share your experiences, expand your network, and take advantage of the opportunities that arise!

Docker for Beginners: Containerizing Your First Application

danielfilemon — Tue, 04 Feb 2025 18:35:25 +0000

If you've heard about Docker but never used it, this guide is for you. Docker is a platform that allows you to create, distribute, and run applications in isolated containers. This means you can run your application in any environment without worrying about OS differences or dependencies.

First, you need to install Docker. Visit the official website (https://www.docker.com/get-started), download, and install Docker Desktop for your operating system. After installation, check if everything is working by running the following command in your terminal:

If everything is set up correctly, Docker will return the installed version.

Creating Your First Application
Let's create a simple web server using Node.js and Docker. First, create a project folder and a server.js file:

mkdir my-docker-project && cd my-docker-project
Now, create the server.js file and add the following code:

const http = require("http");

const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Hello, Docker!\n");
});

const PORT = 3000;
server.listen(PORT, () => {
console.log(Server running at http://localhost:${PORT});
});
Next, create a Dockerfile in the same folder with the following content:

Use the official Node.js image

FROM node:18

Set the working directory inside the container

WORKDIR /app

Copy project files into the container

COPY . .

Expose port 3000

EXPOSE 3000

Command to run the server

CMD ["node", "server.js"]
Now, to build the Docker image, run the following command in your terminal:

docker build -t my-server .
This command creates an image called my-server. Now, let's run it inside a container:

docker run -p 3000:3000 my-server
This starts the container and maps port 3000 from the container to port 3000 on your computer. Now, open your browser and go to http://localhost:3000, and you will see the message "Hello, Docker!".

Best Practices for Writing Clean Code in JavaScript

danielfilemon — Mon, 03 Feb 2025 12:37:51 +0000

Writing clean code is essential to facilitate maintenance, improve readability, and ensure the scalability of a project. To achieve this, name variables and functions descriptively, choosing clear and meaningful names that express the purpose of the code. Avoid redundancies and unnecessary code, making it more direct and efficient. Use arrow functions whenever possible to improve conciseness and readability. Avoid excessive comments, as well-written code should be self-explanatory. Break large functions into smaller, reusable parts to facilitate maintenance and understanding. Use template literals to enhance the readability of concatenated strings and prefer named constants instead of magic numbers to make the code more comprehensible. Avoid mutability by opting for const and let instead of var, and refrain from modifying objects directly, using the spread operator when necessary. Use destructuring to access object properties more efficiently and clearly. Maintain consistency in code style by using tools like ESLint and Prettier, ensuring standardization and preventing common errors. By applying these best practices, your code will become more organized, comprehensible, and less prone to failures. 🚀

Introduction to Full Stack Development for Beginners

danielfilemon — Tue, 28 Jan 2025 18:22:32 +0000

Full Stack Development involves working on both the front-end, which is the visible part of a website or application, and the back-end, which includes the server and database. A Full Stack developer is responsible for building the entire system, ensuring that all components work seamlessly together. The main technologies used in Full Stack Development include HTML, which structures the content of the page; CSS, which styles the page to make it visually appealing; and JavaScript, which adds interactivity. On the back-end, Node.js allows developers to use JavaScript to create fast and scalable servers. For front-end development, React is a popular JavaScript library for building dynamic and reusable user interfaces.

Databases play a crucial role in storing application data, with SQL databases like MySQL and PostgreSQL providing structured data management, while NoSQL databases like MongoDB offer more flexibility for handling unstructured data. To start in Full Stack Development, it is essential to first learn the basics of front-end technologies, including HTML, CSS, and JavaScript. Then, exploring back-end development with Node.js and databases will help build a solid foundation. Practice is key, so working on simple projects helps reinforce knowledge and develop problem-solving skills. As learning progresses, studying frameworks such as React for the front-end and Express.js for the back-end enhances development efficiency. With continuous practice, a Full Stack developer gains the ability to build complete applications, managing everything from user interfaces to server-side logic and database management.

How to Organize Your Code with SASS/SCSS

danielfilemon — Mon, 11 Nov 2024 14:11:04 +0000

ASS/SCSS are tools that significantly improve the organization and reusability of CSS code, making development more efficient and the code cleaner. One of their key features is the use of variables, which allow developers to store reusable values such as colors, sizes, and fonts. This makes design changes easier without the need to manually update multiple parts of the code. Additionally, mixins enable the creation of reusable code blocks, ensuring consistent styling across different elements while reducing redundancy and improving maintainability.

Another essential feature is inheritance, which allows styles to be shared between different classes using @extend, eliminating the need to rewrite similar CSS rules. This results in cleaner and more maintainable code. Furthermore, SASS/SCSS supports breaking the code into smaller, well-organized files using partials and imports, improving project structure and making collaboration among developers easier.

With these capabilities, SASS/SCSS brings greater flexibility, organization, and efficiency to front-end development, ensuring that code remains modular, reusable, and easy to manage. As a result, projects can scale more effectively while maintaining a consistent visual style and simplifying future design updates.