Advanced Custom Fields (ACF) is one of the most trusted tools in the WordPress developer ecosystem. From portfolio showcases to event schedules and pricing tables, repetitive structured data is everywhere in modern web design.

However, standard ACF users hit a common roadblock: the official Repeater Field is strictly locked behind ACF Pro.

While ACF Pro is a fantastic product, many freelance developers, agencies, and small business owners building lean client sites find that purchasing an ongoing license for simple repeating tables is cost-prohibitive. Furthermore, many existing community add-ons are outdated, introduce database bloat, or break whenever WordPress releases a major core update.

To solve this problem, we built and released Codekosh Custom Repeater Field for Advanced Custom Fields—a 100% free, lightweight, and modern repeating field plugin published directly on the official WordPress.org plugin directory.

In this guide, we will explore:

1. What the Codekosh Custom Repeater Field is.
2. The core problems it solves.
3. How to configure subfields using simple pipe-separated syntax.
4. How to display repeating data on the frontend using PHP.

What is Codekosh Custom Repeater Field?

Codekosh Custom Repeater Field for Advanced Custom Fields is a lightweight extension that adds a new, fully functional Custom Repeater field type to your free version of ACF (compatible with ACF 5.8+ through WordPress 6.x and 7.x).

Instead of managing complex nested subfield interfaces, Codekosh allows you to configure your repeating columns using a clean, text-based syntax. Once defined, your authors and content managers get a slick, intuitive tabular interface with reordering, dynamic row creation, and rich media management.

Key Features at a Glance

• 100% Free & Open Source: Full repeating table functionality without requiring ACF Pro.
• WYSIWYG Rich Text Support: Add formatted descriptions, bullet lists, bold text, and links directly inside repeating rows without JavaScript breaking upon drag-and-drop.
• Drag-and-Drop Sorting: Smooth row reordering powered by WordPress core’s native jQuery UI Sortable library.
• Multiple Field Types Supported:
  • Single-line Text (text)
  • URLs & Links (url)
  • Multi-line Textareas (textarea)
  • WYSIWYG TinyMCE Rich Text (wysiwyg)
  • WordPress Media Image Uploaders (image)
  • HTML5 Date Pickers (date)
• Clean Database Architecture: Saves data in clean arrays, avoiding unnecessary database bloat or duplicate orphaned postmeta rows.
• Safe & WPCS Compliant: Fully sanitized inputs, strictly escaped outputs, and zero external CDN dependencies.

Step-by-Step Tutorial: Setting Up Your First Custom Repeater

Let’s walk through building an interactive “Team Members” section using the plugin.

Step 1: Install & Activate the Plugin

1. Go to your WordPress Dashboard and navigate to Plugins > Add New Plugin.
2. In the search box, type: Codekosh Custom Repeater Field.
3. Click Install Now, then click Activate. (Note: Ensure you already have Advanced Custom Fields installed and activated).

Step 2: Configure the Field in ACF

1. Go to ACF > Field Groups (or Custom Fields > Field Groups) and click Add Field Group.
2. Add a title (e.g., Page Settings).
3. Click + Add Field and choose the settings below:
   • Field Type: Select Custom Repeater (found under the Relational category).
   • Field Label: Team Members
   • Field Name: team_members
   • Button Text: Add Team Member (Default: + Add Row)

Step 3: Define Your Columns

In the Column Definitions textarea, specify your subfields line by line using this clean pattern:

field_slug : Field Label : field_type

Example Configuration:

member_name : Full Name : text
role        : Job Title : text
bio         : Biography : wysiwyg
linkedin    : Profile URL : url
photo       : Profile Picture : image
start_date  : Joined Date : date

Save or update your Field Group.

Step 4: Add Repeating Rows in the Post Editor

1. Open any Post or Page where your Field Group is assigned.
2. You will see a clean, organized table matching your defined columns.
3. Click + Add Team Member to spawn new rows.
4. Click the upload button to choose profile pictures via the native WordPress Media Library.
5. Use the drag handles (:::) on the left to reorder team members on the fly.
6. Click Update to save the post.

Frontend Integration: How to Display the Data in Your Theme

Because the plugin stores field data in standard array structures, retrieving and printing values using the familiar ACF get_field() function is fast and intuitive.

Add this code snippet to your theme template file (page.php, single.php, or your custom template part):

<?php
/**
 * Display Codekosh Custom Repeater Field Data
 */
$team_members = get_field( 'team_members' );

if ( ! empty( $team_members ) && is_array( $team_members ) ) : ?>
    <section class="team-grid">
        <div class="container">
            <h2 class="section-title">Meet Our Team</h2>
            
            <div class="team-cards">
                <?php foreach ( $team_members as $member ) : 
                    // Safely extract subfield values
                    $name       = ! empty( $member['member_name'] ) ? esc_html( $member['member_name'] ) : '';
                    $role       = ! empty( $member['role'] ) ? esc_html( $member['role'] ) : '';
                    $linkedin   = ! empty( $member['linkedin'] ) ? esc_url( $member['linkedin'] ) : '';
                    $bio        = ! empty( $member['bio'] ) ? wp_kses_post( $member['bio'] ) : '';
                    $photo_id   = ! empty( $member['photo'] ) ? absint( $member['photo'] ) : 0;
                    $start_date = ! empty( $member['start_date'] ) ? esc_html( $member['start_date'] ) : '';
                ?>
                    <article class="team-card">
                        <?php if ( $photo_id ) : ?>
                            <div class="team-avatar">
                                <?php echo wp_get_attachment_image( $photo_id, 'medium', false, [ 'class' => 'avatar-img' ] ); ?>
                            </div>
                        <?php endif; ?>

                        <div class="team-info">
                            <?php if ( $name ) : ?>
                                <h3 class="team-name"><?php echo $name; ?></h3>
                            <?php endif; ?>

                            <?php if ( $role ) : ?>
                                <p class="team-role"><?php echo $role; ?></p>
                            <?php endif; ?>

                            <?php if ( $bio ) : ?>
                                <div class="team-bio">
                                    <?php echo $bio; ?>
                                </div>
                            <?php endif; ?>

                            <?php if ( $linkedin ) : ?>
                                <a href="<?php echo $linkedin; ?>" target="_blank" rel="noopener noreferrer" class="team-link">
                                    Connect on LinkedIn &rarr;
                                </a>
                            <?php endif; ?>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

Why Choose Codekosh Custom Repeater Over Heavy Alternatives?

Conclusion & Next Steps

Dynamic repeating data is an essential part of professional WordPress theme development. With Codekosh Custom Repeater Field for Advanced Custom Fields, you no longer need to compromise between project budget and clean site architecture.

• Download the plugin on WordPress.org: Codekosh Custom Repeater Field
• Explore more tools & tutorials: Visit Codekosh Solutions

Have you tried using the Custom Repeater on your client sites? Drop your questions or feature requests in the comments below!

The post How to Add Free Repeater Fields in ACF: Complete Guide to Codekosh Custom Repeater Field appeared first on .

When your storefront (like WooCommerce or Shopify), your CRM (like GoHighLevel), and your email marketing platform don’t talk to each other perfectly, it usually means someone on your team is exporting CSVs, manually updating records, or worse, letting warm leads slip through the cracks.

The solution isn’t hiring more people to manage data entry; it’s connecting the dots with Webhooks and Zapier.

What is a Webhook? (The Non-Jargon Explanation)

Most apps communicate using standard APIs. Think of an API like a kid in the back seat on a road trip constantly asking, “Are we there yet? Are we there yet?” The app has to keep checking the server (a process called polling) to see if a new order has come in. This is slow, inefficient, and eats up system resources.

A Webhook, on the other hand, is entirely event-driven. Your e-commerce store says, “I will tell you the exact millisecond a customer buys something, so you don’t have to keep asking.”

When you pair this instant, push-based communication with an automation platform like Zapier, you can trigger complex, multi-step workflows across more than 9,000 apps without writing a single line of code. If an app doesn’t have a native integration, a webhook can bridge the gap instantly.

3 High-Impact Automations Every E-Commerce Store Needs

1. The Instant Abandoned Cart Rescue

Cart abandonment is the silent killer of e-commerce revenue. While standard platforms have built-in recovery emails, webhooks allow you to take this further:

• The Trigger: A customer enters their email but leaves the checkout page (Webhook fires).

• The Automation: Zapier catches the webhook and instantly routes the data to your CRM.

• The Result: The CRM immediately triggers an SMS reminder and a targeted retargeting ad on social media, catching the buyer while they are still holding their phone.

2. The VIP Customer Tagging & Onboarding Experience

Not all customers are created equal. You want to roll out the red carpet for high-ticket buyers.

• The Trigger: An order over a specific threshold (e.g., $500) is placed.

• The Automation: Zapier filters the order value. If it’s over the threshold, it adds a “VIP” tag in your email platform, sends a notification to your team’s Slack channel, and enrolls the customer in a premium post-purchase sequence.

• The Result: Your team can personally thank high-value buyers, increasing lifetime value and brand loyalty.

3. Intelligent Inventory & Supplier Alerts

Overselling out-of-stock items creates a customer service nightmare.

• The Trigger: Inventory for a specific SKU drops below 10 units.

• The Automation: Zapier automatically drafts an email to your wholesale supplier with a reorder request and updates a shared Google Sheet for your fulfillment team.

• The Result: You never run out of your best-sellers, and you eliminate the manual stock-checking process.

The True ROI of Automation

Implementing webhooks and Zapier isn’t just a “nice to have” tech upgrade. It directly impacts your bottom line by providing real-time visibility into your metrics without manual exports.

• Eliminating Human Error: Data moving from your store to your CRM is 100% accurate, every single time.

• Speeding Up Lead Response: Leads and VIPs are engaged in seconds, not hours.

• Reclaiming Billable Hours: Your marketing team can focus on strategy and creative, rather than administrative data transfer.
  
  Ready to connect your tools and automate your growth? Stop wrestling with disconnected platforms. If you want to see how custom API and Zapier integrations can streamline your exact sales funnel, let’s talk. Book a free technical audit with our development team today, and we’ll map out your first automated workflow.

The post Connecting the Dots: How Webhooks & Zapier Can Automate Your E-Commerce Sales Funnel appeared first on .

Elementor is one of the most popular page builders used in the wordpress, but its free version doesn’t allow you to use saved templates via shortcodes. Luckily, with a bit of custom code, you can achieve this functionality and make your templates reusable throughout your site.

What Are Shortcodes in WordPress?

Shortcodes are small pieces of code that allow you to insert dynamic content into WordPress pages or posts. The shortcode will be dynamically renders a saved Elementor template with the template ID.

Step-by-Step Guide to Render Elementor Saved Templates

Step 1: Create a custom function in your active theme file functions.php file. Copy the below code and add in your functions.php file.

function codekosh_render_elementor_template($atts) {
    $atts = shortcode_atts(
        array(
            'id' => '',
        ),
        $atts,
        'elementor_template'
    );

    $template_id = intval($atts['id']);

    // Prevent recursion or invalid ID
    if (!$template_id || get_the_ID() == $template_id) {
        return '';
    }

    // Make sure Elementor is loaded
    if (!did_action('elementor/loaded')) {
        return '';
    }

    // Enqueue necessary frontend assets (important for guests)
    Elementor\Plugin::$instance->frontend->enqueue_styles();
    Elementor\Plugin::$instance->frontend->enqueue_scripts();

    // Buffer output to return as shortcode
    ob_start();
    echo Elementor\Plugin::$instance->frontend->get_builder_content_for_display($template_id);
    return ob_get_clean();
}
add_shortcode('elementor_template', 'codekosh_render_elementor_template');

Step 2: Create and Save an Elementor Template.

• Go to Templates > Saved Templates in the WordPress admin area.
• Click Add New, design your section, and save it.

• Note down the Template ID from the template list.

Step 3: Use the Shortcode

• Add the following shortcode wherever you want the saved template to appear as I have used under the elementor tabbing widget:

• Replace the ID of your saved template in the ShortCode.

The post How to Use custom Shortcodes to Render Elementor Saved Templates appeared first on .

Codekosh Solutions has the best tutorials for React app creation.
Today we will explain to you how to create the React app.

React is a popular JavaScript framework used to build front-end applications. Developed by Facebook, React has made its strong presence in the dev community to build fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax – JSX.

In short, ReactJs is a popular and widely used front-end library application system for developing single-page applications. Since it’s a library, we can install this library to Create React App for developing single-page applications.

Create React App is a tool or generator for new developers, allowing them to develop and execute React projects. You don’t have to configure it manually. In other words, you don’t have to worry about configuring a build system like Webpack. You don’t have to worry about most of the complicated systems of modern front-end development. You can start the React code with basic knowledge of Javascript.

Requirements:

You need the following things to start the React application.
— Need to install the Node.js and NPM on your desktop. For Windows users, you can download the Node at Node.org.
— For the MAC/Linux you can use the commands to install the node.js in your machine.

For the MAC users, I recommended installing the “Homebrew” (if you haven’t already) to install the Node.js.
— Open your terminal and run the following command to install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

— Install Node.js using the Homebrew library:

 brew install node

— Verify the Node.js installation:

node -v 
npm -v

For Linux users open your terminal and you can install the Node.js by following commands:
— Update your package list command:

 sudo apt update

— To Install Node.js and npm from the default Ubuntu repository:

 sudo apt install nodejs npm

Verify the installation:
Check the installed versions of Node.js and npm:

node -v 
 npm -v

This will show you your machine’s installed version of Node and NPM.

Steps to Create Your New React App
— Open your terminal to install the base project, run the following command:

 npx create-react-app codekosh-react-tutorials

— Now your base project is set up in the new directory as we are using the “codekosh-react-tutorials” You can give any name to your base project directory.

— Now go to the directory where you set up the base react app using the below command.

cd codekosh-react-tutorials

Starting the React App Development Server:
— To run your React project you need to execute the below command:

 npm start

When we run codekosh-react-tutorials, we just have to run npm start in the app directory to start serving the development server. We will see a new browser opening with localhost:3000.

Browser view:

See React in Action

Did you notice something interesting in this react js app creation tutorial guide?

You have just created your first React Project using React developer tools without getting much into the technical details.
Isn’t it the beauty of Create React App?

It’s not necessary to know everything to create a React app. It gives us the freedom to avoid the complex steps involved in writing React code.

Now you know how to start, test, and build a Create project. Consider these commands and understand their usage, as you will need them for your project development.
We hope this article turned out to be beneficial!

Happy coding!

The post How to create the first react app appeared first on .

Setup Sub – Domain in Digital Ocean:

1. 1. Login to your digital ocean account.
   2. Click on the domain – e.g I want to make portfolio.codekosh.com – so I m click on codekosh.com from added domain list. As I have marked in reg.
      
   3. Now you need to add the “A” record and CNAME record.
      A record e.g: portfolio and CNMAE www.portfolio and point to your droplet.
      Create your CNAME record.
      

How To Set Up Apache Virtual Hosts on Ubuntu

Setting up Apache virtual hosts on Ubuntu allows you to host multiple websites on a single server, each with its own domain or subdomain. This setup is particularly useful for web developers, businesses, or individuals who want to run multiple websites through domain and subdomain on the same server without conflicts. Here’s a comprehensive guide to walk you through the process by codekosh.com.

Step 1: Install Apache

If Apache isn’t already installed on your Ubuntu server, you can install it using the following below commands.

sudo apt update
sudo apt install apache2

Step 2 — Creating the Directory Structure

Step to create a directory structure that will hold the site data that you will be serving to visitors.

Your document root, the top-level directory that Apache looks at to find content to serve, will be set to individual directories under the /var/www directory. You will create a directory here for each of the virtual hosts.

Create a directory structure to store the website files for each virtual host. Within each of these directories, you will create a public_html directory. The public_html directory contains the content that will be served to your visitors.

Use this command, with your own domain name, to create your directories.

sudo mkdir -p /var/www/example.com/public_html

Replace example.com with your domain name.

Step 3: Assign Permissions

You’ve created the directory structure for your files, but they are owned by the root user. If you want your regular user to be able to modify files in these web directories, you can change the ownership with this command.

sudo chown -R $USER:$USER /var/www/example.com/public_html

The $USER> variable will take the value of the user you are currently logged in as when you press ENTER in terminal. By doing this, the regular user now owns the public_html subdirectories where you will be storing your content.

You should also modify your permissions to ensure that read access is permitted to the general web directory and all of the files and folders it contains so that the pages can be served correctly.

sudo chmod -R 755 /var/www

Your web server now has the permissions it needs to serve content, and your user should be able to create content within the necessary folders. The next step is to create content for your virtual host sites.

Step 4: Create Sample HTML File for host (Optional)

With your directory structure in place, you can start focusing on individual virtual host site and the content within that site. Start by creating an index.html page for your subdomain e.g portfolio.codekosh.com.

Run this command to open and create the index.html. This example uses nano:

nano /var/www/subdomain.example.com/public_html/index.html

You can add some html stuff in your index.html file to load the file in broswer by your subdomain.

To save and close the index.html file in nano, start by pressing CTRL+X. Press Y when prompted to save the file, then press ENTER when you are finished to exit.

Step 5: Creating New Virtual Host File

Apache on Ubuntu uses separate configuration files for each virtual host. You can create a new configuration file for each site in the /etc/apache2/sites-available/ directory.

sudo nano /etc/apache2/sites-available/subdomain.example.com.conf

Enter the following configuration in the config file:

	
	    ServerAdmin admin@example.com
	    ServerName example.com
	    ServerAlias www.yoursubdomain.example.com
	    DocumentRoot /var/www/yoursubdomain.example.com/public_html
	    ErrorLog ${APACHE_LOG_DIR}/error.log
	    CustomLog ${APACHE_LOG_DIR}/access.log combined
	

Save and close the file.

Step 6: Enable the Virtual Host file

In previous step that we have created the virtual host file, you must enable them. Apache includes some tools that allow you to do this.

You’ll be using the a2ensite tool to enable each of your sites.

sudo a2ensite subdomain.example.com.conf

Before reloading your server, you have to disable the default site defined in 000-default.conf by using the a2dissite command.

sudo a2dissite 000-default.conf

Next, command to test the configuration errors:

sudo apache2ctl configtest

When you are finished the above process, restart Apache to make these changes take effect.

sudo systemctl restart apache2

Optionally, you can check the status of the server after all these changes with this below command.

sudo systemctl status apache2

That’s it! You should now be able to access your website using the subdomain name you configured. Repeat steps 2-6 for each additional virtual host you want to set up.

The post How to Create a Subdomain in DigitalOcean appeared first on .