Saving the ACF JSON files locally allows you to have version control over your field settings! Let’s learn how to do that.

Create an acf-json directory

  • Create a directory called acf-json in your plugin.

Save the JSON

Add the following in your functions.php file

<?php
define( 'MY_PLUGIN_DIR_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
add_filter('acf/settings/save_json', 'my_acf_json_save_point');

function my_acf_json_save_point( $path ) {

// Update path
$path = MY_PLUGIN_DIR_PATH . '/acf-json';

// Return path
return $path;

}

?>

Now when you hit save/update for each ACF Group , it is going to generate a local JSON copies in your given folder for each…


In this blog we will learn about how to add a mailchimp newsletter subscription in a Nextjs react application.

Get the Mailchimp URL

Create an account on Mailchimp if you don’t already have one.
Create an audience campaign.

Navigate to Campaigns > Signup Forms > Signup forms tab and click on Embed forms and then select.

Copy the the form action value

// Example.
<form action="https://xyz.us19.list-manage.com/subscribe/post?u=96386247a54fss21f7bb3a1c&amp;id=072ss2cbd"...

In this blog we will learn how to convert a React App into a PWA using Workbox WebpackPlugin, workbox-window etc. We will do pre-caching of a few assets and few api response at runtime, using strategies like StaleWhileRevalidate and Cache Firstetc.

Demo site

Source Code

Install workbox webpack plugin

npm i workbox-webpack-plugin copy-webpack-plugin -D

Install these packages.

npm i workbox-core workbox-expiration workbox-precaching workbox-routing workbox-strategies workbox-cacheable-response workbox-window

Webpack Configuration

Add these configuration to webpack:

// @see https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.InjectManifestconst WorkboxWebpackPlugin = require("workbox-webpack-plugin");const CopyPlugin = require("copy-webpack-plugin");module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "./src/favicon.ico", to…


In this blog we will learn about how to serve static images.

Add your images to a relative path in your source. Let’s say your entry point is src . Then create an images folder, and place your images inside of it.

Then `npm install file-loader` add the below config with `use: ‘file-loader?name=./images/[name].[ext]’`.

module.exports = {
context: __dirname,
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'main.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(png|j?g|svg|gif)?$/,
use: 'file-loader?name=./images/[name].[ext]'
}
]
},
}

This will output the following on build


npm i stripe @stripe/react-stripe-js @stripe/stripe-js axios

Create an account on stripe

Create an account on stripe and get the test publishable key and secret key. Add it to the .env file

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxx
STRIPE_SECRET_KEY=sk_test_xxxx

Create a stripe intent

Create a file called `stripe-payment-intent.js` under pages/api folder of your next.js app

import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async (req, res) => {
if (req.method === "POST") {
try {
const { amount } = req.body…

In this blog you will learn how to create a stripe session, redirect the user to the stripe checkout and also create stripe webhook that listens to when the payment is made.

Live Demo Site Example

Create Next.js app

npx create-next-app
cd my-app
// Install packages
npm i @stripe/stripe-js next-stripe@beta micro

Create stripe keys and put them in next.js`.env` file
Create a stripe account if you don’t already have one and create your publishable key and secret key and place them in .env

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_19HI412TBidBrJMDDsQ3HcDZ
STRIPE_SECRET_KEY=sk_test_wUdwAIjtgDq0oAa3rR0hJLU2h

Create a Next stripe api
Create a `[…nextstripe].js` …


In this blog we will learn how to add shippingMethod to the cart and checkout.

Add to Cart — Add product to the cart.

mutation {
addToCart(input: {productId: 12358}) {
clientMutationId
cart {
total
}
}
}

Get Shipping method

{
shippingMethods {
nodes {
databaseId
}
}
}

Tell me a little bit about yourself and your work.

My name is Demelza Marie and I am an artist and an “online course creation” coach, with specialized skills in film and video production. I have over 20 years of experience in video production.

How did you come into your current field? Could you please share a bit of the background

I was homeschooled from 13 onwards, which is when I developed my art talent & entered into video competitions, which I won. That led me to get my degree in film & video production at a university in America, after which I travelled all over Europe producing videos for missionaries as well as doing a variety of other style videos. I stopped doing that due…


Ashlee Espinosa

Please share a little bit about yourself and your work

My name is Ashlee Espinosa and I am an actor, educator, creator, and coach. I am transforming the methods of teaching and coaching online while helping educators and artists move their business, classes and studios into a virtual format. Through my virtual studio I offers 1:1 coaching sessions along with monthly classes ranging from musical theatre performance techniques to branding and building your online business as an artist. I hold a Bachelor of Music in Musical Theatre from University of Central Oklahoma and a Master of Fine Arts in Musical Theatre from San Diego State University. I recently served as…


In this blog you will learn about uploading a new approved plugin or updating an existing WordPress plugin on svn.

1. Adding New Plugin to WordPress

Go to below link and upload your plugin :
https://wordpress.org/plugins/developers/add/

Add read me file

Screenshots

Screenshots go in the /assets folderthe filename for screenshot should be screenshot-1.png, screenshot-2.png and the number corresponds to the description no. of screenshot in readme.txt file

== Screenshots ==1-This is the description of screenshot-1.png
2-This is the description of screenshot-2.png

Creating Banners

Banner go in the /assets folder
You should make banner of below size and put that in assets folder

banner-772x250.png

Creating Icons

Icons go in the /assets folder
You should…

Imran Sayed

👤 Full Stack Developer at rtCamp, Speaker, Blogger, YouTuber, Wordpress, React, Node, Laravel Developer http://youtube.com/ImranSayedDev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store