# Kamal Hosen --- ## Pages - [Get a Custom WordPress Project Quote](https://kamalhosen.com/get-a-quote/): Ready to start your WordPress project? Share your requirements and get a tailored quote from expert developer Kamal Hosen. Fast response and transparent pricing. - [Cookie Privacy Policy](https://kamalhosen.com/cookie-privacy-policy-3/): Cookie Privacy Policy https://kamalhosen. com is committed to protecting your privacy online. What information do we collect? We collect information... - [WordPress Developer in UK](https://kamalhosen.com/wordpress-developer-in-uk/): Hire a skilled WordPress Developer in UK. Kamal Hosen builds fast, SEO-optimized websites for UK businesses. - [WordPress Developer in France](https://kamalhosen.com/uk/): Hire a skilled WordPress Developer in France. Kamal Hosen builds fast, SEO-optimized websites for UK businesses. - [Home](https://kamalhosen.com/): Kamal Hosen is a professional WordPress developer specializing in custom website solutions. Transform your digital vision into reality with expert guidance and support. - [WooCommerce Development Services](https://kamalhosen.com/services/woocommerce-development/): Custom WooCommerce development services for high-performing online stores. From custom features to speed optimization—get expert eCommerce solutions. - [WordPress Website Design Services with Elementor & Gutenberg](https://kamalhosen.com/services/wordpress-website-design-services/): Get beautifully designed, fast, and fully responsive WordPress websites built with Elementor or Gutenberg. Expert WordPress designer - [Custom WordPress Development Services](https://kamalhosen.com/services/wordpress-development-services/): Get expert WordPress development services from Kamal Hosen. Custom themes, plugins, speed optimization, and WooCommerce solutions tailored to your business. - [Services](https://kamalhosen.com/services/): Kamal Hosen is a professional WordPress developer specializing in custom website solutions. Transform your digital vision into reality with expert guidance and support. - [Meeting](https://kamalhosen.com/meeting/): Book a meeting Let’s connect and discuss how we can build something amazing together! Whether you need expert guidance on... - [WordPress newsletter](https://kamalhosen.com/wp-newsletter/): 🚀 Join My WordPress & Web Dev Newsletter Stay ahead in the ever‑evolving world of WordPress, web development, and practical... - [Contact](https://kamalhosen.com/contact/): Contact Me Have a project in mind? Need help with WordPress development? Let’s connect! Connect with me in Social media... - [About me](https://kamalhosen.com/about-me/): About Me I’m Kamal Hosen, a passionate WordPress Developer, Web Enthusiast, and Entrepreneur dedicated to building innovative solutions for the... - [Home](https://kamalhosen.com/home-2/): Kamal Hosen is a professional WordPress developer specializing in custom website solutions. Transform your digital vision into reality with expert guidance and support. - [Blog](https://kamalhosen.com/blog/): Welcome to Kamal Hosen's blog, where thought-provoking content meets personal storytelling. Join the journey of exploration and inspiration today. - [Privacy Policy](https://kamalhosen.com/privacy-policy/): Privacy Policy Welcome to https://kamalhosen. com (the ”Site”). We understand that privacy online is important to users of our Site,... --- ## Posts - [Deploying WordPress.org Themes with GitHub Actions](https://kamalhosen.com/deploying-wordpress-org-themes-with-github-actions/): Learn how to automate the deployment of your WordPress.org theme using GitHub Actions. This comprehensive guide covers setup, best practices, and addresses common questions to streamline your development workflow. - [How to Add Google Fonts to Shopify: A Step-by-Step Guide](https://kamalhosen.com/how-to-add-google-fonts-to-shopify-a-step-by-step-guide/): Want to add Google Fonts to your Shopify store? This step-by-step guide covers three easy methods—theme settings, manual coding, and Shopify apps—to help you customize fonts effortlessly. - [Building an extendible WordPress admin Settings page with Gutenberg Components](https://kamalhosen.com/building-an-extendible-wordpress-admin-settings-page-with-gutenberg-components/): In a WordPress settings page 3rd-party developers can inject their own settings fields / HTML with action hooks, but you... - [ওয়ার্ডপ্রেস গুটেনবার্গ ব্লক ডেভেলপমেন্ট: শুরু করার পূর্বে যা জানা দরকার](https://kamalhosen.com/gutenberg-block-development-prep/): ওয়ার্ডপ্রেসের গুটেনবার্গ এডিটর ২০১৮ সালে ওয়ার্ডপ্রেস ৫. ০ আপডেটের মাধ্যমে আনুষ্ঠানিকভাবে যুক্ত হয়। এটি ওয়ার্ডপ্রেসে কন্টেন্ট তৈরি এবং ডিজাইন করার... - [Boost Your PHP & WordPress Code: 7 Powerful "Return Early" Techniques](https://kamalhosen.com/boost-your-php-wordpress-code-powerful-return-early/): Introduction In the world of PHP and WordPress development, writing clean, efficient, and maintainable code is crucial. One powerful technique... - [Essential Tools for My Development Workflow](https://kamalhosen.com/essential-tools-for-my-development-workflow/): In my development journey, I rely on a variety of tools to enhance productivity, streamline tasks, and ensure high-quality results.... - [Deploy Your Plugin to the WordPress.org Repository Using GitHub Actions](https://kamalhosen.com/deploy-your-plugin-to-the-wordpress-org/): Automating the deployment of your WordPress plugin to the WordPress. org repository can save you time and ensure a smooth... - [WordPress Error Log Not Showing with Laravel Herd](https://kamalhosen.com/wordpress-error-log-not-showing-with-laravel-herd/): If you’re encountering issues with Laravel Herd where error logs are not showing up in WordPress, the solution involves adjusting... - [How to Build an Admin Page Using React in WordPress](https://kamalhosen.com/how-to-build-an-admin-page-using-react-in-wordpress/): Creating a custom admin page using React in WordPress can enhance the functionality and user experience of your site. In... - [My First Experience as a WordCamp Organizer at Sylhet 2024](https://kamalhosen.com/my-first-experience-as-a-wordcamp-organizer-at-sylhet-2024/): Stepping into the role of a WordCamp organizer was a thrilling and rewarding experience for me. WordCamp Sylhet 2024 was... - [My Toptal Journey: Becoming a Toptal WordPress Developer](https://kamalhosen.com/my-toptal-journey-becoming-developer/): Embarking on the journey to become a Toptal WordPress developer has been one of the most challenging and rewarding experiences... - [Hello World: Welcome to My Blog Journey!](https://kamalhosen.com/hello-world/): Hello, world! I’m thrilled to welcome you to my brand-new blog. This marks the beginning of an exciting journey where... - [Using Composer With WordPress](https://kamalhosen.com/using-composer-with-wordpress/): If you’ve been looking for a way to manage your WordPress dependencies, look no further than Composer. In this blog post, we’ll show you how to get started with using Composer with WordPress. --- # # Detailed Content ## Pages > Ready to start your WordPress project? Share your requirements and get a tailored quote from expert developer Kamal Hosen. Fast response and transparent pricing. - Published: 2025-06-18 - Modified: 2025-06-20 - URL: https://kamalhosen.com/get-a-quote/ Request a Custom Quote Whether you need a custom WordPress theme, plugin, or full website design, I’m here to help you bring your project to life. Fill out the form below with as much detail as possible. I’ll respond within 24–48 hours with a personalized quote. Connect with me in Social media Email: hi@kamalhosen. com LinkedIn: linkedin. com/in/khosen/ Twitter (X): x. com/KamalHosenX I’m always open to new collaborations, opportunities, and discussions about the ever-evolving web. Feel free to reach out! --- - Published: 2025-06-15 - Modified: 2025-06-15 - URL: https://kamalhosen.com/cookie-privacy-policy-3/ Cookie Privacy Policy https://kamalhosen. com is committed to protecting your privacy online. What information do we collect? We collect information from you when you visit our site. When submitting or registering on our site, you may be asked to enter your: name or e-mail address. You may, however, visit our site anonymously. What do we use your information for? Any of the information we collect from you may be used in one of the following ways: To improve our website To improve customer service How do we protect your information? We implement a variety of security measures to maintain the safety of your personal information when you place an order or enter, submit, or access your personal information. Cookies Cookies are small files that a site or its service provider transfers to your computers hard drive through your Web browser (if you allow) that enables the sites or service providers systems to recognize your browser and capture and remember certain information We use cookies to understand and save your preferences for future visits. Online Privacy Policy Only This online privacy policy applies only to information collected through our website and not to information collected offline. Changes to our Privacy Policy If we decide to change our privacy policy, we will post those changes on this page. If you have any questions and suggestions regarding our Privacy Policy Statement, please contact us and we will get back to you very soon. CONTACT INFORMATION Kamal HosenMailing address: House 77, Road 5, Mahmumdabad... --- > Hire a skilled WordPress Developer in UK. Kamal Hosen builds fast, SEO-optimized websites for UK businesses. - Published: 2025-06-15 - Modified: 2025-06-15 - URL: https://kamalhosen.com/wordpress-developer-in-uk/ Hire a Professional WordPress Developer in UK Looking for a reliable WordPress developer in the UK? I’m Kamal Hosen, a passionate WordPress specialist with 6+ years of experience building websites, custom plugins, and high-performance WooCommerce stores for UK-based businesses. I understand the UK market, business needs, and expectations. Whether you're a small business owner in London or a creative agency in Manchester, I can build tailored WordPress solutions that drive results. Why Work with Me? Custom SolutionNo cookie-cutter templates. Every build is made for your brand and business goals. Mobile-First, SEO-ReadyYour site will look great on any device and get found faster on Google Clear Communicationspeak your language, not just code. You’ll always know what’s going on. Ongoing Support UK timezoneEven after launch, I’ve got your back. Need a tweak or update? I’m here. Need a WordPress developer who understands your goals? Don’t waste weeks figuring it out alone. Let’s build something that works, looks good, and makes money. Based in Bangladesh. Serving clients throughout UK remotely with efficiency and professionalism. --- > Hire a skilled WordPress Developer in France. Kamal Hosen builds fast, SEO-optimized websites for UK businesses. - Published: 2025-06-15 - Modified: 2025-06-15 - URL: https://kamalhosen.com/uk/ Expert WordPress Developer for Businesses in France Are you looking for a skilled WordPress developer in France? I’m Kamal Hosen, a dedicated WordPress expert with over 6 years of experience building fast, responsive, and SEO-friendly websites for clients across France. Whether you need a custom theme, plugin development, or WooCommerce optimization, I offer tailored WordPress solutions to help French businesses grow online. Why Work with Me? Custom SolutionNo cookie-cutter templates. Every build is made for your brand and business goals. Mobile-First, SEO-ReadyYour site will look great on any device and get found faster on Google Clear Communicationspeak your language, not just code. You’ll always know what’s going on. Ongoing Support Your timezoneEven after launch, I’ve got your back. Need a tweak or update? I’m here. Need a WordPress developer who understands your goals? Don’t waste weeks figuring it out alone. Let’s build something that works, looks good, and makes money. Based in Bangladesh. Serving clients throughout France remotely with efficiency and professionalism. --- > Kamal Hosen is a professional WordPress developer specializing in custom website solutions. Transform your digital vision into reality with expert guidance and support. - Published: 2025-06-06 - Modified: 2025-06-14 - URL: https://kamalhosen.com/ Hi. I’m Kamal Hosen. a WordPress developer, entrepreneur, and Toptal freelancer. A WordPress and Shopify developer and entrepreneur passionate about building digital products that empower people and businesses online. I love creating solutions that make the web more accessible and functional. Outside of my core work at Codelabs Digital, I enjoy taking on side projects and helping people through freelance platforms like Toptal. You can also find me sharing my knowledge and experience on LinkedIn, where I connect with others in the web development community. Real Results. Real People. Let’s Get You Online – Fast Don’t waste weeks figuring it out alone. Let’s build something that works, looks good, and makes money. Latest From the Blog --- > Custom WooCommerce development services for high-performing online stores. From custom features to speed optimization—get expert eCommerce solutions. - Published: 2025-05-24 - Modified: 2025-06-21 - URL: https://kamalhosen.com/services/woocommerce-development/ Custom WooCommerce Development Services Build Fast, Scalable & Conversion-Optimized Online Stores. I offer tailored WooCommerce development solutions for businesses looking to launch or scale their online store. From store setup to advanced custom features—I build secure, fast, and conversion-driven eCommerce sites. WooCommerce Services I Provide WooCommerce Store Development Theme Integration Performance & Speed Optimization Why Partner with Me for Your WooCommerce Project 6+ Years of WordPress ExperienceNo cookie-cutter templates. Every build is made for your brand and business goals. Mobile-First, SEO-ReadyYour site will look great on any device and get found faster on Google Clear Communicationspeak your language, not just code. You’ll always know what’s going on. Ongoing SupportEven after launch, I’ve got your back. Need a tweak or update? I’m here. My work is guided by the WordPress philosophy: simplicity, performance, and extensibility. I use Git for versioning, follow WPCS, and apply modern frontend stacks when needed. Recent Projects Testimonials FAQ Do you build themes compatible with Full Site Editing (FSE)? Yes, I build block-based themes following WordPress’s latest standards. Will the theme be responsive and accessible? Absolutely. All themes are fully responsive and meet accessibility best practices. Can you modernize our old theme without rebuilding from scratch? Yes, I offer theme refactoring to modernize code and improve performance. Let’s Build Your WooCommerce Store the Right Way Custom development. Clear communication. Real results. Let’s build something that works, looks good, and makes money. --- > Get beautifully designed, fast, and fully responsive WordPress websites built with Elementor or Gutenberg. Expert WordPress designer - Published: 2025-05-24 - Modified: 2025-06-18 - URL: https://kamalhosen.com/services/wordpress-website-design-services/ Modern WordPress Website Design Services Built with Elementor, Gutenberg, and Your Brand in Mind. I design beautiful, responsive, and high-converting WordPress websites using top page builders like Elementor and Gutenberg. From landing pages to complete sites—I bring your vision to life. What I Offer Elementor Website DesignAdvanced layouts, animation, and full responsiveness using Elementor Free & Pro. Gutenberg Block DesignNative WordPress block design with reusability and clean markup. Landing Page & Funnel DesignConversion-focused layouts tailored for marketing campaigns. Why Work with Me? Tailored to YouNo cookie-cutter templates. Every build is made for your brand and business goals. Mobile-First, SEO-ReadyYour site will look great on any device and get found faster on Google Clear Communicationspeak your language, not just code. You’ll always know what’s going on. Ongoing SupportEven after launch, I’ve got your back. Need a tweak or update? I’m here. Let’s Design a WordPress Site That Elevates Your Brand Don’t waste weeks figuring it out alone. Let’s build something that works, looks good, and makes money. --- > Get expert WordPress development services from Kamal Hosen. Custom themes, plugins, speed optimization, and WooCommerce solutions tailored to your business. - Published: 2025-05-24 - Modified: 2025-06-21 - URL: https://kamalhosen.com/services/wordpress-development-services/ WordPress Development Services Crafting Scalable, Gutenberg-Ready WordPress Solutions. Need a WordPress developer who writes clean, scalable, and performance-focused code? I build custom themes and block-based solutions that deliver real value to businesses and agencies. What I Do Best Custom WordPress Theme DevelopmentBuild from scratch with full responsiveness and accessibility. Gutenberg Block & Block Theme DevelopmentModern block-based editing with Full Site Editing support. Theme Refactoring & ModernizationUpgrade legacy themes to support current WordPress standards. Why Work with Me? 6+ Years of WordPress ExperienceNo cookie-cutter templates. Every build is made for your brand and business goals. Mobile-First, SEO-ReadyYour site will look great on any device and get found faster on Google Clear Communicationspeak your language, not just code. You’ll always know what’s going on. Ongoing SupportEven after launch, I’ve got your back. Need a tweak or update? I’m here. My work is guided by the WordPress philosophy: simplicity, performance, and extensibility. I use Git for versioning, follow WPCS, and apply modern frontend stacks when needed. Recent Projects Testimonials FAQ Do you build themes compatible with Full Site Editing (FSE)? Yes, I build block-based themes following WordPress’s latest standards. Will the theme be responsive and accessible? Absolutely. All themes are fully responsive and meet accessibility best practices. Can you modernize our old theme without rebuilding from scratch? Yes, I offer theme refactoring to modernize code and improve performance. Build Your Next WordPress Project With Confidence Don’t waste weeks figuring it out alone. Let’s build something that works, looks good, and makes money. --- > Kamal Hosen is a professional WordPress developer specializing in custom website solutions. Transform your digital vision into reality with expert guidance and support. - Published: 2025-05-24 - Modified: 2025-06-06 - URL: https://kamalhosen.com/services/ Expert WordPress & WooCommerce Solutions for Growing Businesses With over 7 years of experience, we deliver tailored WordPress and WooCommerce development services that empower small to medium-sized businesses, e-commerce entrepreneurs, and startups. Our mission is to build scalable, secure, and user-friendly web solutions that drive measurable growth. Services --- - Published: 2025-02-03 - Modified: 2025-02-03 - URL: https://kamalhosen.com/meeting/ Book a meeting Let’s connect and discuss how we can build something amazing together! Whether you need expert guidance on WordPress development, plugin architecture, performance optimization, or custom web solutions, I’m here to help. Have questions before booking? Feel free to contact me. --- - Published: 2025-02-01 - Modified: 2025-06-15 - URL: https://kamalhosen.com/wp-newsletter/ Join My WordPress & Web Dev Newsletter Stay ahead in the ever‑evolving world of WordPress, web development, and practical tech insights — straight from a seasoned developer with years of real-world experience. What You’ll Get: Expert tutorials on WordPress & web dev Plugin, theme, and performance tips Latest updates & industry trends Free resources and insider lessons Exclusive offers & early access content Subscribe now to receive valuable insights, once or twice a month — no spam, just useful content. --- - Published: 2025-02-01 - Modified: 2025-06-18 - URL: https://kamalhosen.com/contact/ Contact Me Have a project in mind? Need help with WordPress development? Let’s connect! Connect with me in Social media Email: hi@kamalhosen. com LinkedIn: linkedin. com/in/khosen/ Twitter (X): x. com/KamalHosenX I’m always open to new collaborations, opportunities, and discussions about the ever-evolving web. Feel free to reach out! --- - Published: 2025-02-01 - Modified: 2025-02-03 - URL: https://kamalhosen.com/about-me/ About Me I’m Kamal Hosen, a passionate WordPress Developer, Web Enthusiast, and Entrepreneur dedicated to building innovative solutions for the web. With over six years of experience, I specialize in WordPress plugin development, theme customization, and modern web technologies like Laravel, React, and Vue. I thrive on crafting scalable and user-friendly digital products, ensuring they meet the highest coding standards. As the founder of Codelabs Digital, I create tools that empower businesses, developers, and website owners. Beyond coding, I love sharing knowledge, exploring emerging web trends, and constantly refining my skills. Whether it’s enhancing website performance, developing a feature-rich plugin, or architecting a seamless user experience, I’m always up for the challenge. Let’s build something amazing together! WordPress. org Badges Achievements Founder of Codelabs Digital – Building innovative WordPress products. Published Plugins & Themes – Developed multiple solutions used by the WordPress community. Technical Writer & Educator – Sharing knowledge through blogs and courses. WordPress Community Involvement – Engaging in meetups, discussions, and open-source contributions. --- > Kamal Hosen is a professional WordPress developer specializing in custom website solutions. Transform your digital vision into reality with expert guidance and support. - Published: 2025-01-23 - Modified: 2025-02-20 - URL: https://kamalhosen.com/home-2/ Hi. I’m Kamal Hosen. A WordPress and Shopify developer and entrepreneur passionate about building digital products that empower people and businesses online. I love creating solutions that make the web more accessible and functional. Outside of my core work at Codelabs Digital, I enjoy taking on side projects and helping people through freelance platforms like Toptal. You can also find me sharing my knowledge and experience on LinkedIn, where I connect with others in the web development community. Some things I wrote More blog Reading List --- - Published: 2024-05-28 - Modified: 2025-06-15 - URL: https://kamalhosen.com/privacy-policy/ Privacy Policy Welcome to https://kamalhosen. com (the ”Site”). We understand that privacy online is important to users of our Site, especially when conducting business. This statement governs our privacy policies with respect to those users of the Site (”Visitors”) who visit without transacting business and Visitors who register to transact business on the Site and make use of the various services offered by Kamal Hosen (collectively, ”Services”) (”Authorized Customers”). ”Personally Identifiable Information” refers to any information that identifies or can be used to identify, contact, or locate the person to whom such information pertains, including, but not limited to, name, address, phone number, fax number, email address, financial profiles, social security number, and credit card information. Personally Identifiable Information does not include information that is collected anonymously (that is, without identification of the individual user) or demographic information not connected to an identified individual. What Personally Identifiable Information is collected? We may collect basic user profile information from all of our Visitors. We collect the following additional information from our Authorized Customers: the names, addresses, phone numbers and email addresses of Authorized Customers, the nature and size of the business, and the nature and size of the advertising inventory that the Authorized Customer intends to purchase or sell. What organizations are collecting the information? In addition to our direct collection of information, our third party service vendors (such as credit card companies, clearinghouses and banks) who may provide such services as credit, insurance, and escrow services may collect this information... --- --- ## Posts > Learn how to automate the deployment of your WordPress.org theme using GitHub Actions. This comprehensive guide covers setup, best practices, and addresses common questions to streamline your development workflow. - Published: 2025-05-27 - Modified: 2025-05-27 - URL: https://kamalhosen.com/deploying-wordpress-org-themes-with-github-actions/ - Categories: Automation, WordPress - Tags: Automation, CI/CD, GitHub Actions, How to deploy WordPress Theme, wordpress plugin, WordPress Theme Deployment, WordPress.org In the dynamic world of WordPress development, efficiency and automation are key to staying ahead. Deploying your theme to the WordPress. org repository can be a meticulous process, but with GitHub Actions, you can automate and streamline this workflow. This guide will walk you through setting up GitHub Actions to deploy your WordPress. org theme, addressing common questions, and providing valuable insights to enhance your development process. Introduction to GitHub Actions for WordPress Theme Deployment GitHub Actions is a powerful tool that enables developers to automate, customize, and enhance their software development workflows directly within GitHub. For WordPress theme developers, this means you can automate the deployment of your themes to the WordPress. org repository, reducing manual effort and minimizing errors. By leveraging GitHub Actions, you can set up a continuous integration and deployment (CI/CD) pipeline that automatically pushes your theme updates to the WordPress. org repository whenever you create a new release. This not only saves time but also ensures that your users always have access to the latest features and improvements. Setting Up GitHub Actions for Theme Deployment To deploy your WordPress theme using GitHub Actions, follow these steps: 1. Prepare Your Theme Repository Ensure your theme's code is hosted on GitHub and that your repository follows the standard structure. This includes having a style. css file with the necessary theme headers and a functions. php file. 2. Create the . distignore File The . distignore file specifies which files and directories should be excluded from the deployment.... --- > Want to add Google Fonts to your Shopify store? This step-by-step guide covers three easy methods—theme settings, manual coding, and Shopify apps—to help you customize fonts effortlessly. - Published: 2025-02-19 - Modified: 2025-02-19 - URL: https://kamalhosen.com/how-to-add-google-fonts-to-shopify-a-step-by-step-guide/ - Categories: Shopify - Tags: Adding custom fonts to Shopify, Best Fonts for Shopify, Best Shopify fonts for conversions, Change Shopify font without an app, Google Fonts Integration, Google Fonts Shopify, How to use Google Fonts on Shopify, Shopify Custom Fonts, Shopify Development, Shopify Font Guide, Shopify Fonts, Shopify Google Fonts not working, Shopify Store Design, Shopify Theme Customization, Shopify Typography Fonts play a crucial role in shaping your Shopify store's visual identity. A well-chosen font can enhance your brand's personality, improve readability, and create a seamless user experience. Google Fonts offers a vast library of free, high-quality fonts that can elevate your Shopify store’s design without slowing down your site. If you're wondering how to add Google Fonts to Shopify, you're in the right place! This step-by-step guide will walk you through multiple methods to integrate Google Fonts into your Shopify store effortlessly. Step 1: Choose Your Google Font Before adding a Google Font to Shopify, you need to select a font that matches your store's theme. Follow these steps: Visit Google Fonts (https://fonts. google. com) Browse and search for a font that aligns with your brand’s identity. Click on the font and select the styles you want to use (Regular, Bold, Italic, etc. ). Copy the embed link or the CSS @import code. Step 2: Add Google Fonts Using Shopify Theme Settings (Easiest Method) Some Shopify themes already support Google Fonts, making integration simple. Here’s how you can check and add them: Go to Shopify Admin Panel → Click Online Store → Themes. Click on Customize to enter the theme editor. Navigate to Typography Settings (varies by theme). If Google Fonts are available, select your desired font. Click Save and refresh your store to see the changes. Note: If your theme does not support Google Fonts, use the methods below. Step 3: Add Google Fonts Using HTML & CSS... --- - Published: 2025-01-01 - Modified: 2025-02-20 - URL: https://kamalhosen.com/building-an-extendible-wordpress-admin-settings-page-with-gutenberg-components/ - Categories: Gutenberg, React - Tags: Fill, fillProps, PluginArea, registerPlugin, Slot, SlotFillProvider, wordpress plugin In a WordPress settings page 3rd-party developers can inject their own settings fields / HTML with action hooks, but you cannot do the same if you decide to build your plugin’s settings page in React. This article explores the options to make our React Components extendible such that 3rd-party developers can easily inject their own components in them. We are going to use SlotFillProvider, Slot, Fill and PluginArea Gutenberg React Components. Part 1: Building a simple settings page We’re going to build a very simple settings page. For the sake of simplicity of this article, we won’t complicate it by writing any server-side logic to save the fields, nor will cover managing the state of our application because our focus is just rendering our components and allowing other developers to render their own components. So, we will create an AdminSettings Component that renders First Name, Last Name text fields and a Save button. WordPress settings page built using Gutenberg components. import { __ } from '@wordpress/i18n'; import { BaseControl, TextControl, Button, } from '@wordpress/components'; export const AdminSettings = => { return ( { __( 'Settings using Gutenberg components' ) } { __( 'Save' ) } ); }; Understanding Slot and Fill Components If we were to compare the behavior with the PHP hooks, the I’d say Slot is similar to what do_action does and Fill is similar to add_action. As a plugin developer, you usually provide both the Slot and Fill. 3rd-party developers will inject their Components in this Slot using Fills. But we will do it differently. Instead of relying on other developers to implement Fills, we will... --- - Published: 2024-09-30 - Modified: 2024-09-30 - URL: https://kamalhosen.com/gutenberg-block-development-prep/ - Categories: Tips, Tutorial ওয়ার্ডপ্রেসের গুটেনবার্গ এডিটর ২০১৮ সালে ওয়ার্ডপ্রেস ৫. ০ আপডেটের মাধ্যমে আনুষ্ঠানিকভাবে যুক্ত হয়। এটি ওয়ার্ডপ্রেসে কন্টেন্ট তৈরি এবং ডিজাইন করার এক নতুন দিগন্ত খুলে দেয়। গুটেনবার্গ ব্লক এডিটর ব্যবহার করে, আপনি পোস্ট এবং পেজের বিভিন্ন এলিমেন্টগুলোকে ব্লক হিসেবে সাজিয়ে কাস্টম লেআউট তৈরি করতে পারেন। তবে, একজন ডেভেলপার হিসেবে গুটেনবার্গ ব্লক ডেভেলপমেন্ট শুরুর আগে কিছু বিষয় মাথায় রাখা জরুরি। ১. গুটেনবার্গ ব্লক কীভাবে কাজ করে? গুটেনবার্গ এডিটর একটি ব্লক-ভিত্তিক এডিটর, যেখানে প্রতিটি কন্টেন্ট এলিমেন্ট (যেমন টেক্সট, ছবি, ভিডিও) একটি ব্লক হিসেবে সংরক্ষিত হয়। প্রতিটি ব্লক সম্পূর্ণ আলাদা এবং স্বতন্ত্রভাবে কাজ করে, যা ড্র্যাগ-এন্ড-ড্রপ পদ্ধতিতে পেজ বা পোস্টে সাজানো যায়। ডেভেলপারদের জন্য গুটেনবার্গ ব্লক ডেভেলপমেন্ট মূলত React. js এর উপর ভিত্তি করে। ওয়ার্ডপ্রেস নিজস্ব @wordpress প্যাকেজগুলোর মাধ্যমে React, JSX, এবং ESNext ফিচারগুলোকে সমর্থন করে, যা ডেভেলপারদের ব্লক তৈরির প্রক্রিয়া সহজ করে তোলে। ২. প্রয়োজনীয় টুলস এবং প্লাগইন গুটেনবার্গ ব্লক ডেভেলপমেন্ট শুরু করার জন্য কিছু নির্দিষ্ট টুলস এবং প্লাগইনের প্রয়োজন হবে। এর মধ্যে অন্যতম হল: Node. js এবং npm: ব্লক ডেভেলপমেন্টের জন্য Node. js এবং npm এর জ্ঞান থাকা জরুরি। এগুলো ব্যবহার করে প্রয়োজনীয় প্যাকেজ ইনস্টল এবং প্রজেক্ট ম্যানেজ করা হয়। WordPress Scripts: ওয়ার্ডপ্রেস নিজস্ব ডেভেলপমেন্ট টুল হিসেবে @wordpress/scripts প্যাকেজ সরবরাহ করে, যা Webpack এবং Babel এর মাধ্যমে JavaScript কোড প্রসেসিং সহজ করে তোলে। Gutenberg Plugin: যদিও ওয়ার্ডপ্রেসের লেটেস্ট ভার্সনে গুটেনবার্গ এডিটর ডিফল্টভাবে ইন্টিগ্রেট করা আছে, তবুও গুটেনবার্গের আপডেটেড ফিচারগুলো ব্যবহার করতে চাইলে গুটেনবার্গ প্লাগইন ইনস্টল করা যেতে পারে। ৩. গুটেনবার্গ ব্লকের কাঠামো গুটেনবার্গ ব্লক মূলত তিনটি অংশে বিভক্ত: Block Registration: প্রতিটি ব্লককে প্রথমে রেজিস্টার করতে হয়। ব্লক রেজিস্ট্রেশনের জন্য registerBlockType ফাংশন ব্যবহার... --- - Published: 2024-08-24 - Modified: 2024-08-24 - URL: https://kamalhosen.com/boost-your-php-wordpress-code-powerful-return-early/ - Categories: Tips Introduction In the world of PHP and WordPress development, writing clean, efficient, and maintainable code is crucial. One powerful technique that can significantly improve your code quality is the "return early" pattern. This approach not only enhances readability but also optimizes performance and reduces complexity. In this article, we'll dive deep into the "return early" concept, exploring its benefits and providing practical examples for PHP and WordPress developers. What is "Return Early" and Why Should You Care? The "return early" pattern is a coding technique where you check for certain conditions at the beginning of a function and return immediately if those conditions are met. This approach helps to: Reduce nesting and improve code readability Minimize the cognitive load on developers Optimize performance by avoiding unnecessary computations Simplify error handling and edge case management Let's explore how you can leverage this technique in your PHP and WordPress projects. 7 Powerful "Return Early" Techniques for PHP and WordPress 1. Guard Clauses: Your First Line of Defense Guard clauses are simple conditional statements at the beginning of a function that return early if certain conditions are met. They act as a protective barrier, filtering out invalid inputs or edge cases before proceeding with the main logic. function processOrder($orderId) { if (! is_numeric($orderId)) { return false; } if ($orderId function getUserName($user) { if (null === $user) { return 'Guest'; } return $user->getName; } 3. Permission Checks: Secure Your WordPress Functions In WordPress, it's crucial to check user permissions early: function custom_admin_action { if... --- - Published: 2024-07-11 - Modified: 2024-07-13 - URL: https://kamalhosen.com/essential-tools-for-my-development-workflow/ - Categories: General - Tags: figma, laravel herd, php, vs code In my development journey, I rely on a variety of tools to enhance productivity, streamline tasks, and ensure high-quality results. Here’s a look at the tools I use regularly: Visual Studio Code (VSCode) VSCode is my go-to code editor due to its versatility, extensive extensions library, and robust debugging capabilities. It supports multiple languages and offers a highly customizable interface. Download Visual Studio Code Chrome (and Brave) For browser-based development and testing, Chrome is indispensable. Its developer tools are powerful for inspecting elements, debugging JavaScript, and analyzing performance. Brave is a great alternative for its privacy features and built-in ad-blocking. Download Chrome Download Brave Git and GitHub Version control is crucial in development. Git allows me to track changes, collaborate with others, and manage code versions efficiently. GitHub serves as my primary platform for hosting repositories, reviewing code, and contributing to open-source projects. Download Git Visit GitHub Figma Figma is an excellent design tool for creating UI/UX designs, wireframes, and prototypes. Its real-time collaboration features make it easy to work with design teams and stakeholders. Visit Figma Postman For API development and testing, Postman is essential. It simplifies creating, testing, and documenting APIs, ensuring they function correctly before integrating them into applications. Download Postman Laravel Herd Laravel Herd provides a local development environment specifically for PHP applications. It helps in managing multiple PHP versions and streamlines the development process with built-in services. Visit Laravel Herd Slack Communication and collaboration are key in development. Slack helps in staying connected with team... --- - Published: 2024-07-09 - Modified: 2024-07-13 - URL: https://kamalhosen.com/deploy-your-plugin-to-the-wordpress-org/ - Categories: Tutorial - Tags: git, github, wordpress plugin Automating the deployment of your WordPress plugin to the WordPress. org repository can save you time and ensure a smooth release process. With GitHub Actions and the 10up/action-wordpress-plugin-asset-update action, you can streamline this process. Here’s how to set it up: Step 1: Prepare Your Plugin Ensure your plugin follows WordPress. org guidelines and includes the necessary files (readme. txt, plugin header, etc. ). Step 2: Create GitHub Repository Host your plugin code in a GitHub repository. Make sure your repository is public. Step 3: Set Up GitHub Actions Workflow In your GitHub repository, create a . github/workflows/deploy. yml file with the following configuration: name: Deploy to WordPress. org on: push: tags: - '*' jobs: deploy: name: Deploy runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Run build script run: | # Add your build scripts here, e. g. , npm install && npm run build - name: WordPress Plugin Asset Update uses: 10up/action-wordpress-plugin-asset-update@v1. 3. 1 with: # Your WordPress. org plugin repository name plugin-slug: your-plugin-slug # WordPress. org username and password (use GitHub Secrets) svn-username: ${{ secrets. WP_ORG_USERNAME }} svn-password: ${{ secrets. WP_ORG_PASSWORD }} Step 4: Configure Secrets In your GitHub repository, go to Settings > Secrets and variables > Actions > New repository secret and add the following secrets: WP_ORG_USERNAME: Your WordPress. org username. WP_ORG_PASSWORD: Your WordPress. org password. Step 5: Push Tags to Trigger Deployment Tag your release in GitHub to trigger the workflow: git tag v1. 0. 0 git push origin v1. 0. 0... --- - Published: 2024-07-07 - Modified: 2024-07-13 - URL: https://kamalhosen.com/wordpress-error-log-not-showing-with-laravel-herd/ - Categories: Tutorial - Tags: laravel herd, WordPress If you're encountering issues with Laravel Herd where error logs are not showing up in WordPress, the solution involves adjusting the log configuration for PHP-FPM. Here’s how you can resolve this: Step-by-Step Solution Step 1: Locate the Log File Laravel Herd writes logs to the following file: /Users/{user_name}/Library/Application Support/Herd/Log/php-fpm. log Step 2: Adjust Configuration Files Navigate to the configuration directory: /Users/{user_name}/Library/Application Support/Herd/Config/fpm In this directory, you'll find configuration files for different PHP versions, named as -fpm. config. example 8. 2-fpm. config Step 3: Modify Configuration Files Open each configuration file and comment out the php_admin_value line. Add a semicolon ; at the beginning of the line: ;php_admin_value = /Users/{user_name}/Library/Application Step 4: Restart Herd Services After modifying the configuration files, go to Herd and stop all services. Then, start all services again. Result You should now see your logs in the wp-content/debug. log file of your WordPress installation. Example ;php_admin_value = /Users/{user_name}/Library/Application By following these steps, you can ensure that your Laravel Herd logs appear correctly in the WordPress debug log file. This solution helps in troubleshooting and monitoring errors more effectively within your WordPress environment. --- - Published: 2024-07-03 - Modified: 2024-07-13 - URL: https://kamalhosen.com/how-to-build-an-admin-page-using-react-in-wordpress/ - Categories: Tutorial - Tags: Admin, React, wordpress plugin Creating a custom admin page using React in WordPress can enhance the functionality and user experience of your site. In this guide, we'll use @wordpress/element for React, and @wordpress/components for UI elements. We'll also set up a minimal workable Webpack configuration. Step 1: Install Necessary Packages First, ensure you have Node. js and npm installed. Then, install the required packages: npm install @wordpress/element @wordpress/components @babel/preset-react @babel/preset-env webpack webpack-cli webpack-dev-server babel-loader --save-dev Step 2: Set Up Your Project Structure Create the following directory structure: my-plugin/ ├── admin │ ├── build │ │ │ └── src │ └── index. js ├── package. json ├── webpack. config. js └── wp-react. php Step 3: Configure Webpack Create webpack. config. js with the following configuration: const path = require('path'); module. exports = { entry: '. /admin/src/index. js', output: { path: path. resolve(__dirname, 'admin/build'), filename: 'bundle. js' }, module: { rules: } } } ] }, devServer: { contentBase: path. join(__dirname, 'admin/build'), compress: true, port: 9000 } }; Step 4: Create React Component In admin/src/index. js, create a simple React component: import { render } from '@wordpress/element'; import { Button } from '@wordpress/components'; const App = => ( My Admin Page Click Me ); render(, document. getElementById('admin-page')); Step 5: Set Up package. json In your package. json, add scripts for building and watching your files: { "name": "wp-react", "version": "1. 0. 0", "description": "", "main": "webpack. config. js", "scripts": { "build": "webpack --mode production", "watch": "webpack --mode development --watch" }, "keywords": , "author": "Kamal Hosen", "license":... --- - Published: 2024-05-30 - Modified: 2024-07-10 - URL: https://kamalhosen.com/my-first-experience-as-a-wordcamp-organizer-at-sylhet-2024/ - Categories: Event Stepping into the role of a WordCamp organizer was a thrilling and rewarding experience for me. WordCamp Sylhet 2024 was not just an event but a remarkable journey that brought together passionate WordPress lovers, users, founders, and marketers from around the world. My key role was to develop and update the WordCamp website, ensuring everything ran smoothly and looked great. Contributor Day: May 10th The journey began on Contributor Day, May 10th. This day was dedicated to giving back to the WordPress community. It was heartwarming to see so many enthusiastic individuals come together to contribute their skills and knowledge. As part of the website team, I worked alongside talented developers and designers to enhance the site’s functionality and aesthetics. The energy and collaboration were inspiring, setting a positive tone for the main event. Event Day: May 11th The main event took place on May 11th. From the early morning setup to the evening wrap-up, the day was filled with engaging sessions, workshops, and networking opportunities. One of the highlights was meeting some amazing WordPress enthusiasts, including users, founders, and marketers. Their stories and experiences were incredibly motivating and reinforced the impact of WordPress in the digital world. My Role and Contributions As the website developer, my primary responsibilities included keeping the site updated with the latest information, ensuring all functionalities were working correctly, and assisting attendees with any website-related issues. The feedback from the community was positive, and it was satisfying to see our hard work pay off. Networking... --- - Published: 2024-05-30 - Modified: 2024-07-13 - URL: https://kamalhosen.com/my-toptal-journey-becoming-developer/ - Categories: General - Tags: Toptal, WordPress Developer Embarking on the journey to become a Toptal WordPress developer has been one of the most challenging and rewarding experiences of my career. Toptal is known for its rigorous screening process, ensuring that only the top 3% of freelancers join their network. Here’s a step-by-step account of how I navigated through the Toptal selection process and earned my place as a Toptal WordPress developer. Step 1: Communication Test The first step was the communication test. This stage aimed to assess my English proficiency and my ability to understand and convey complex concepts clearly. The interview involved a verbal component, ensuring I could communicate effectively with clients and team members from around the world. Passing this test was crucial as clear communication is the foundation of any successful project. Toptal Bangladesh Meetup Step 2: Data Structures and Algorithms (DSA) Test The next hurdle was the Data Structures and Algorithms (DSA) test. Although WordPress development might not always involve complex algorithms, this test evaluated my problem-solving skills and my ability to write efficient code. I prepared extensively by practicing coding problems and revisiting key concepts in algorithms and data structures. The test was challenging, but it was a great opportunity to sharpen my coding skills. Step 3: WordPress Live Coding After passing the DSA test, I moved on to the WordPress live coding session. This stage tested my practical knowledge of WordPress development. During the live coding session, I was given a set of tasks to complete within a specified time frame.... --- - Published: 2024-05-28 - Modified: 2024-05-30 - URL: https://kamalhosen.com/hello-world/ - Categories: Uncategorized Hello, world! I’m thrilled to welcome you to my brand-new blog. This marks the beginning of an exciting journey where I get to share my thoughts, experiences, and insights with you. Whether you’re a seasoned reader, a curious passerby, or someone who stumbled upon this blog by chance, I’m glad you’re here. Why Start a Blog? Starting a blog has been on my mind for quite some time. I’ve always had a passion for writing and storytelling. For me, a blog is more than just a platform to share content; it’s a space where creativity meets purpose. Here, I aim to explore various topics that intrigue me and, hopefully, resonate with you too. What to Expect You might be wondering what kind of content you’ll find here. Well, this blog will be a blend of my personal experiences and practical tips in web development. Expect detailed posts on how to get started with and contribute to open-source projects, tips and tricks for using WordPress, and insights into Laravel. Additionally, I’ll be sharing the latest trends and new things in the tech world. Whether you’re a beginner or an experienced developer, there will be plenty of valuable information and resources for you. Join the Conversation A blog isn’t just about the writer; it’s about building a community. I encourage you to join the conversation by leaving comments, sharing your thoughts, and providing feedback. Your insights and experiences are valuable, and I look forward to learning from you as much as you... --- > If you’ve been looking for a way to manage your WordPress dependencies, look no further than Composer. In this blog post, we’ll show you how to get started with using Composer with WordPress. - Published: 2022-09-08 - Modified: 2024-06-13 - URL: https://kamalhosen.com/using-composer-with-wordpress/ - Categories: Tutorial Composer is a dependency manager for PHP, widely used in modern web development for managing libraries and dependencies efficiently. When working with WordPress, Composer can streamline your development workflow, manage plugins and themes as dependencies, and ensure version control across your projects. Here's how you can use Composer with WordPress: 1. Install Composer First, you need to install Composer on your system. You can download and install it from getcomposer. org. 2. Initialize Composer in Your Project Navigate to your WordPress project directory and run the following command to initialize Composer: composer init This command will prompt you to set up your composer. json file, where you'll specify the project’s dependencies. 3. Add WordPress Core as a Dependency You can manage the WordPress core files using Composer. Add the following to your composer. json: { "require": { "johnpbloch/wordpress": "^5. 8" }, "extra": { "wordpress-install-dir": "wp" } } This configuration installs WordPress into the wp directory. 4. Manage Plugins and Themes You can add plugins and themes as dependencies in your composer. json file. For example, to add the popular Contact Form 7 plugin: { "require": { "vendor/contact-form-7": "^5. 4" } } Using Packagist, a repository that mirrors the WordPress plugin and theme directories, you can easily include plugins and themes. 5. Autoload Custom Classes Composer can autoload your custom PHP classes, making it easier to manage your code. Add the autoload section to your composer. json: { "autoload": { "psr-4": { "MyNamespace\\": "src/" } } } Run composer dump-autoload to... --- ---