957 views 
(FREE) Duplicate Lines Count Online
#Duplicate Lines + Count Duplicate Lines + Count Enter below the lines which you want find duplicates lines with duplicate lines count.
Convert Darker to Lighter (Or Vice versa) with jQuery
Sometimes we want to convert darker color to lighter when we provide one color option to the user and we want to automatically get the brightest.
Most Common jQuery How To Questions
Below is the list of the most commonly asked jQuery How To questions.
jQuery is a lightweight library that internally uses JavaScript. It gives a developer verity of reusable functions, event handlers, and many more features.
Free Sample Data for WordPress Website
We can use the sample data for WooCommerce as well as the bbPress plugins.
WooCommerce Blog: All Useful Articles
Below is the list of the most useful WooCommerce articles.
WooCommerce - Complete ECommerce Solution
The WooCommerce plugin is a WordPress plugin that gives us a complete eCommerce solution. It allows us to create a product, implement a payment gateway, and more.
[Solved] MySQL not recognized as an internal or external command
We see common error: MySQL is not recognized as an internal or external command. This is a common error which appear for any tool.
[Solved] ERROR 2002 (HY000): Can’t connect to MySQL server on ‘localhost’ (10061)
Some time on Windows Operating System we see an error: ERROR 2002 (HY000): Can’t connect to MySQL server on ‘localhost’ (10061) You may have something similar error as below screenshot: The issue behind the “ERROR 2002 (HY000): Can’t connect to MySQL server on ‘localhost’ (10061)” error is the Windows Operating System MySQL service is not
(Solved) mysqld exe aria recovery failed
While I started the XAMPP after a long break up to 1/2 months and I got the error mysqld.exe: Aria recovery failed. Please run aria_chk -r on all Aria tables and delete all aria_log.
Most Common MySQL How To Questions
Below is the list of most commonly asked MySQL How To questions.
Checkout the Complete Guide of MySQL database.
Translate CSS from LTR to RTL with Grunt grunt-rtlcss package
While developing the application we just need to provide support for RTL (right to left) language users. Like the Urdu language. If you use the Grunt.js then you can use the "grunt-rtlcss" package.
Bump Up Package Version with Grunt Bump-up Package
Introduction What is the version bump? When we build any package release then we set up the Install NPM Packages Install npm package grunt-bumpup To install the NPM package use below command:
Grunt Packages: Most Useful Packages
Below is the list of most useful Grunt pacages.
Check website visual changes of staging vs live website %currentyear%
Find the difference between staging and live website with the help of "imagemagick" and "capture-website-cli" command line tooks.
Slack /remind command to create a reminder
The slack /remind is a slack command (a special type of message that is treated differently from a regular message) that tells Slackbot to create a reminder.
Find Broken Links with WGET Command Line Tool
See how to use Wget to find broken links from the website. Try the below example command which generates the wget.
Minify CSS, JS, LESS, and SASS with Koala
Minify CSS, JS is very common task for website load time optimization. Read this tutorial to minify your CSS, JS, SASS, LESS files on windows by “Koala”. Step:1 Download it from http://koala-app.com/ Step:2 Open Koala (Start->Koala->Koala.exe”) and drag and drop your working folder in Koala like this: Step-3: Click “refresh” to see all CSS, JS, LESS,
Most developers use Git and GitHub and some use the SVN for managing projects. Both are version control systems. In this article, you are going to see the similar commands of Git vs SVN to manage the projects. The table of Git vs SVN commands: Description GIT Command SVN Command Copy a repository git clone
DevKinsta – A Free Local WordPress Development
DevKinsta is a FREE tool to develop the WordPress website on localhost. We are goiIntroduction It provides the way to design, develop, and deploy WordPress sites from the comfort of your local machine. DevKinsta is a free tool #Installation Installation To download the DevKinsta visit: https://kinsta.com/devkinsta/download/ Choose the DevKinsta for your MacOS or Windows operating
Keyboard Shortcuts (Cheat sheet) for Sublime Text 3
We often use keyboard shortcuts while developing. These shortcuts improve our productivity and save time a lot. In this cheat sheet.
Sublime Text Blog: All Useful Articles
Below is the list of the most useful Sublime Text 3 Editor articles.
We are going to see how to use the Alignment package into the Sublime Text 3. Table of Content #Introduction Introduction While development it is nice to see the code with well-aligned or with good indentation. Most of the users may use the PHPStrom, VSCode, or something else. They have some extensions which do the
The UTM Generator (aka UTM Builder) is a absolutely FREE tool 🤩. Let's build Your UTM Campaign URL for your project 🚀
Free SEO tools include a free UTM URL Generator for your next project.
🚀WordPress Free Tools: WordPress Theme Detector 💥
The ultimate tool to check website using which WordPress theme. 👉 Just enter the website URL and see the theme details. 🥳
WordPress Tools: Free Tools for Business
Browse the Free WordPress Tools for your business which includes theme detector, etc.
%title% - AI (Artificial Intelligence)
DALL·E 2 is a new AI (Artificial Intelligence) system which create realistic images from a text description in natural language. For now (Today 23 July 2022) the DALL·E platform is not available publicly. You need to apply for the waitlist for DALL·E access. Recently, I had applied for it and got the access. #What was
AI (Artificial Intelligence) is a future of humanity.
Full Site Editing (aka FSE) in WordPress
Full Site Editing or FSE is a new WordPress features included into the WordPRess 5.9 release.
This plugin adds a new image style for the Core Image block. How to use? Go to Gutenberg Editor and add a image block. e.g. Now Choose Image from: Upload New ImageOr Choose from LibraryOr Insert from URL E.g. The uploaded image looks like this: Select Image Styles from the Styles List: Features: Zero configuration
This array defines mappings between public API query parameters whose values are accepted as-passed, and their internal WP_Query parameter name equivalents (some are the same). Only values that are also present in the registered will be set.
Rest API Blog: All Useful Articles
Below is the list of the most useful Rest API articles.
Search Posts in WordPress Rest API
To search for posts using the WordPress REST API, you can use the GET method and pass the search parameter with your query as the value. For example: GET /wp-json/wp/v2/posts?search=biography This will return an array of posts that match your search query biography If you have any page, post or custom post type then you’ll
Install and use the JSONVue Chrome extension
The JSONVue is a chrome extension. It formats the output of the Rest API endpoints. You are going to see: #The browser show Rest API data The browser show Rest API data By default, the browser shows the Rest API data in a non-readable format. E.g. Below is the sample Rest API endpoint of my
Get Post Details with Rest API Endpoint
We can get the post details with the help of Rest API endpoint "/wp/v2/posts/{post_id}". We can additionally use the parameter "_fields" which allow use to get specific post details like id, title, content, etc.
WordPress Rest API Get specific posts by IDs by using `include` parameter
With the Rest API, we get all the posts. But, Sometimes we want to get only specific posts by post ids. WordPress has a rest API parameter include, which returns only requested posts by post ids.
Search Post by Post Meta in Rest API
WordPress provides Rest API support for posts, pages, and custom post types that have set the show_in_rest parameter as true. We have also the Rest API support for the tags, categories, and custom taxonomies which have the same show_in_rest parameter as true. Table of content Overview We have Rest API endpoints for the post
Add post meta in post (custom post type) endpoint with Rest API. #Todo: Todo: Change post-type with your post type slug. Change prefix-meta-key with your post meta key which you want to include in Rest API Response. Top ↑#Output: Output: Visit https://<mysite>/wp-json/wp/v2/<post-type>/ it show the stored data from meta key prefix-meta-key in the Rest API response. Top ↑#Code:
Rest API | Basic Authentication Example (Code Snippet)
Below is the example Rest API request with Basic Authentication. Below request update the site title. NOTE: We need to install and activate plugin https://github.com/WP-API/Basic-Auth on website where we want to perform basic authentication request.
While development I'm always querying about how to see all the CSS classes from Bootstrap 4. Finally, I have created it. I have categorized all the classes into a group.
Bootstrap Blog
Bootstrap
A more specific way to print out just the HTTP status code is something along the lines of: Command: curl -s -o /dev/null -w "%{http_code}" https://wordpress.org/ Output: 200 E.g.
cURL Errors and Reasons (The Complete List)
Below is the list of all cURL errors and the reasons behind these errors. #Ok Ok CURL error code 0 – CURLE_OK (0) All fine. Proceed as usual. Top ↑#Unsupported Protocol Unsupported Protocol CURL error code 1 – CURLE_UNSUPPORTED_PROTOCOL (1) The URL you passed to libcurl used a protocol that this libcurl does not support.
3 Ways to Create a Gutenberg Block in WordPress
Gutenberg is a new editor in WordPress which allow us to create rich text UI blocks to build our WordPress website. Let's see, how to create them with 3 ways.
Gutenberg Development Tutorial - Beginner to Advance
Gutenberg is merged into WordPress core from 5.0. Gutenberg is not limited for the Editor. Gutenberg is now using outside the editor. Below are some places in WordPress which are build with Gutenberg. The Customizer The Widgets screen The Menu screen The Gutenberg development phase 2 has some important improvements which include Global Styles, Block
Gutenberg | Blog | Common Components and Functions
Below is the list of all internal most used functions and components from packages. #Internal WordPress Packages Internal WordPress Packages #@wordpress/api-fetch @wordpress/api-fetch apiFetch Top ↑#@wordpress/autop @wordpress/autop removep autop Top ↑#@wordpress/blob @wordpress/blob createBlobURL getBlobByURL isBlobURL revokeBlobURL Top ↑#@wordpress/block-editor @wordpress/block-editor __experimentalBlockNavigationTree BlockCaption BlockControls BlockIcon BlockPreview Caption getColorClassName InnerBlocks InspectorControls MediaPlaceholder MediaUploadProgress PanelColorSettings PlainText RichText Warning withColors Top
Gutenberg Packages @wordpress/icons
The package @wordpress/icons provide a list of icons library. How to install @wordpress/icons? To install the @wordpress/icons use the
Gutenberg | Packages | @wordpress/api-fetch
#How to install package @wordpress/api-fetch? How to install package @wordpress/api-fetch? npm install @wordpress/api-fetch --save Top ↑#How to use package @wordpress/api-fetch? How to use package @wordpress/api-fetch? Top ↑#Examples Examples #Example of GET request in @wordpress/api-fetch Example of GET request in @wordpress/api-fetch Top ↑#Example of POST request in @wordpress/api-fetch Example of POST request in @wordpress/api-fetch
Gutenberg | Packages | @wordpress/autop
The Autop is a simple Gutenberg module which add or remove the <p> tags from the provided content. #Installation Installation Top ↑#Usage Usage #Using the autop function Using the autop function The above code convert the string ‘ Hello World’. Top ↑#Using the removep function Using the removep function The above code convert the string
In Gutenberg we have a lot of packages which help us to perform certain things. Gutenberg provides the list of packages for Gutenberg development. Below is the list of all the possible packages which are officially available in WordPress.
The Methods for Memorizing the PMP Exam
Recently, I have been free to organize my experience to sort out several knowledge points for preparing for the PMP exam.
PMP Blog: Methods for Memorizing the PMP Exam
CMD: Rename files, folders in windows operating system
If you are using the Windows Operating System then you use the Command Prompt (aka CMD) With the UI we can rename the files and folders. But as a developer, It’s really easy to rename the files and folders with the command prompt You are going to learn #Rename files or folders with REN or
Windows Operating System provides the mklink command to creates a symbolic link. The symbolink means the shortcut of the directory or a file. Syntax MKLINK [[/D] | [/H] | [/J]] Link Target /D Creates a directory symbolic link. Default is a file symbolic link. /H Creates a hard link instead of a symbolic link. /J
Windows Environment Variables PATH
The PATH is the system variable in the Windows Operating System. It contains the executables files path to run them from the command line or Terminal window.
Create shortcut aliases for WP CLI, Git, Grunt and PHPCS commands for windows
In development, We spend a lot of time on the command line. We type a lot of commands regularly. I have created a shortcut for most of the commands which I use on a daily basis some of them are below
Windows Blog: Most Useful Articles
Below is the list of most useful Windows Blog post articles.
Learn the HTML, CSS, JavaScript, PHP, WordPress, NPM, ReactJS, Redux, and more..
Suppose you have an array: $numbers = [ 10, 20, 30 ]; Now, You want to access each element to change its value. E.g. Suppose you want to add 50 to each value and make an array-like. $numbers = [ 60, 70, 80 ]; To do this you can use the php_filter() function. E.g. $numbers
PHP Array - What is array? Array functions? and more..
Below is the list of the most common PHP array functions which we used in daily life. array_filter – Filter the array. array_change_key_case array_chunk array_column array_combine array_count_values array_diff_assoc array_diff_key array_diff_uassoc array_diff_ukey array_diff array_fill_keys array_fill array_flip array_intersect_assoc array_intersect_key array_intersect_uassoc array_intersect_ukey array_intersect array_is_list array_key_exists array_key_first array_key_last array_keys array_map array_merge_recursive array_merge array_multisort array_pad array_pop array_product array_push array_rand array_reduce
You can find the multi-choice questions at: Answer all the PHP MCQ Questions
PHP is most widly used server side programming language.
Setup the PHPCS and WPCS on Operating System
The PHP_CodeSniffer and WordPress coding standards make the developer's life easy. We can set up the PHPCS and WPCS which fixes the coding issues automatically.
PHP Date and Time (with Examples)
We use the PHP function date() to display the date and time in different formats. We are going to see how to format the So bookmark this article for reference.
Update PHP Codesniffer (PHPCS, WPCS, WIMG)
Update PHP Codesniffer (PHPCS), WordPress Coding Standards (WPCS), PHP Compatibility (WIMG) Copy below individual or all command(s) to get latest update.
PHP blog
Installation Install PHP Code Sniffer You can see something similar: Install WordPress Coding Standerds Like: Create phpcs.xml.dist file. Now we need to create the PHPCS file and add the rules which allow: PHPCS sniffs. PHPCS sniffs are the rulesets which are required to install to check the code against that ruleset. When we try to
PHP Packages
You know that PHP is a server-side scripting language. But, You can execute the PHP script through the command prompt or terminal as well. You are going to see: #Set-up Localhost Set-up Localhost To execute the PHP on your computer you need the localhost environment. You can install the: If you already installed it then
PHPCompatibilityWP coding standard is not installed
#How to Check PHPCompatibilityWP exist? How to Check PHPCompatibilityWP exist? To check the PHPCompatibilityWP coding standard is installed on your system use command phpcs -i E.g. phpcs -i You can see the result like below: The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and PHPCompatibility Maybe you
[Solved] Enable/Disable allow_url_fopen from .ini OR .htaccess
The allow_url_fopen is a filesystem and streams configuration option. It enables the URL-aware fopen() wrappers that enable accessing URL objects like files. If allow_url_fopen() is enabled then we can access the remote files using the FTP or HTTP protocol. The extensions like zlib may register additional wrappers. We are going to see: #What is the
[Solved] PHP is not recognized as an internal or external command
We see common error: PHP is not recognized as an internal or external command. This is a common error which appear for any tool.
PHP: Blog, Articles, Questions, and More...
You are getting: #Read PHP Blog Posts Read PHP Blog Posts Below is the list of some blog articles which you may like: Read all the blog articles on the page PHP Blog Articles. Top ↑#Read PHP How-to Questions Read PHP How-to Questions Below is the list of some How To questions that you may
%parent_title% %title% in Webpack | %currentyear%
In the Webpack, We can use the optimization to avoid the minification. By default when execute command: webpack Then, It build the minified version of our source file into the destination file. So, We can add the optimization in the webpack.config.js file as below: module.exports = function( env ) { ... return { ... optimization:
Webpack | How to | Install Webpack with NPM
To install the webpack, we need the NPM and Node.js pre-installed. If you don’t have them then see Installing NPM and Node.js If you don’t have any sample project then create a sample project for webpack. Now, We are ready to install the webpack. Or, Use below shorthand command: E.g. We have now installed webpack.
Webpack | How to | Install Webpack-CLI
To install the webpack-cli, we need the first to install the webpack. If you don’t installed webpack then first install webpack. Also, If you don’t have any sample project then create a sample project for webpack. Now, We are ready to install the webpack-cli. Or, Use below shorthand command: E.g. We have now successfully installed
Webpack is a module bundler. Its main purpose is to bundle JavaScript, SCSS, CSS, Image, and other file types together for transforming, bundling, or packaging. We are going to see: Create a Project First create a directory webpack-tutorial and execute npm init -y to create a package.json file. E.g. See creating a sample project for webpack.
Webpack | Blog | Create a Sample Project
To set up the Webpack, we need to create a sample project. NOTE: If you already have created a project then you can avoid this article. We are going to see: #Create a Directory Create a Directory I’m creating a directory webpack-tutorial within the location c:\xampp\htdocs\tutorials with mkdir CLI command: mkdir webpack-tutorial E.g. Top ↑#Navigate
Webpack is a module bundler. Its main purpose is to bundle JavaScript, SCSS, CSS, Image, and other file types together for transforming, bundling, or packaging.
With the help of the wp post list command, you can list the post, page, and custom post types
WP CLI Command: wp post delete
With the help of the wp post delete command you can: Delete post Delete page Delete custom post type Enough? Nope, As you know after post, page, custom post ...
With the help of the wp post command, we perform the operations on post, page, and custom post types. We can do: Create post, page, and custom post type..
WordPress is an amazing CMS that allows us to use it in CMD or Command Prompt with the help of WP CLI commands (aka WordPress CLI Commands)
Calculate WordPress Performance with Profile WP CLI Command
WP CLI provides a profile CLI package which allows us to profile the WordPress website. It means we can now calculate the WordPress website performance. Follow
Sync (Pull or Push) WordPress Sites with WP CLI Command
After introducing the WP CLI commands, we can now pull or push the live sites with staging sites with the help of WP CLI commands.
Display Data in Table, JSON, or CSV Format with WP CLI Formatter
From the last few articles, we are familiar with the WP CLI command. In this article let's learn about how to display custom data in the table, JSON, or CSV format.
Arguments vs Associated Arguments in WP CLI
In WP CLI we can use the Arguments vs Associated Arguments most commonly as $args and $assoc_args respectively. They both give access to arguments but in a different ways.
We learn about WP CLI arguments or $args. If you have not read it yet then you can first read the article Understanding the WP CLI arguments.
We learn about creating the first WP CLI Hello World program. If you read that article then you can skip some below steps.
WP_CLI::confirm() + Associate Argument in WP CLI
See how to use the associate argument with the WP_CLI::confirm() command.
WP-CLI is the command-line interface for WordPress. You can update plugins, configure multisite installs, and much more, without using a web browser.
Setup WP CLI on Windows Operating System
Follow the below steps to install the WP CLI on your Windows operating system. Step 1 Create folder wp-cli in C drive. Step 2 Download wp-cli.phar from https://raw.github.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
In this article let's learn about WP_CLI::confirm() function. Note: If you read some recent articles then you can skip some below steps that are related to plugin creation..
Learn about how to execute the WP_Query into the WP CLI commands. Note: If you read some recent articles then you can skip some below steps that are related to plugin creation.
Executing WP CLI commands inside WP CLI command with WP_CLI::runcommand()
In this article let’s learn about how to execute another WP CLI commands. Note: If you read some recent articles then you can skip some below steps that are related to plugin creation. #Create Empty Plugin Create Empty Plugin Create a new folder wordpress-examples into plugins directory /wp-content/plugins/ Create a file wordpress-examples.php and add the
We learn how to install the WP CLI. Now, Let’s create a simple WP CLI hello world program. We are going to create a new plugin that contains the WP CLI hello world program. #Create Empty Plugin Create Empty Plugin Create a new folder wordpress-examples into plugins directory /wp-content/plugins/ Create a file wordpress-examples.php and add
Auto translate themes or plugins
With the help of WP CLI command we can translate the theme and plugin from the existing translated strings. You are going to see: #How to use? How to use? Create fresh WordPress setup. Clone the plugin wp-i18n into your /wp-content/plugins/ directory. Import the database latest.sql with WP CLI commnd as below:wp db import latest.sql
Create multiple users with WP CLI command
While developing or testing, we need different users with different user roles. In WordPress, we can create them manually. But, WordPress provides the CLI command (wp user create
Debugging the Scheduled Events (aka Cron Jobs) with WP CLI
#Check Cron is supported or not Check Cron is supported or not Tests the WP Cron spawning system and reports back its status. This command tests the spawning system by performing the following steps: Checks to see if the DISABLE_WP_CRON constant is set; errors if truebecause WP-Cron is disabled. Checks to see if the ALTERNATE_WP_CRON
In this section you can find the articles about the WP CLI.
Debug the slow hooks, functions, templates, queries with the WP CLI Profile package.
WP CLI allows us to create our own packages. We have a variety of different packages created by the WordPress community. I’m trying to add some of them. profile
Algo trading is most interesting thing to experiment with Angle Broking SmartAPI. #Introduction Introduction So, I have quick create a ReactJS app which ask username, password, and API key and display the user information. Its a quick and small app which does not have any additional features. Refer it for study purpose. App URL –
ReactJS Getting Started Guide [for Beginner] 2022
Step by step learn how to Install, Edit and Run ReactJS on localhost. Also learn about Build, Pre-Deploy, Deply the ReactJS application on Github pages.
`memo` is used for function component. Same as `PureComponent` class the `memo` componnent do the shallow comparison and decide to re-render the component. We can use the `memo` component to improve the performance.
We can load the component dynamically to imporve performance. This helps reduce the bundle size. It delay load component which are not used during the initial render.
ReactJS | API | isValidElement
It check the element or react component is valid or not. E.g. Invalid elements:
With `createRef()` we can access any element with reference. Same way we can forward the reference of element from one compoent to another with **forwardRef()** E.g. In below example we have a `<App>` component. We have created the refernence `input` with **createRef()**. And assign the refrence with `ref` attribute as `ref={input}`. We have another component `<Button ref={input} />` in which we have pass the input reference. We have created the `<Button>` component with `forwardRef()` function. It accept **props, ref** parameters. The `ref` parameter reference to our `input` field. On Click on button we trigger the function `clickHandler`. And finally we set the value to our input with `ref.current.value`. So, On click on button we can see the value: **with forwardRef()**.
We can create the reference with **createRef()** function. We can use the `ref` parameter to set the reference. We can use the same reference inside our componet. E.g. In below example, We have created a reference `input` with function **createRef()**. On button click we trigger the function **clickHandler** Inside `clickHandler` function we can access our input with variable `input`. So, We have set the value `Clicked` to our input with the help of `input.current.value`. We can access our `<input type=”text” ..>` with the help of reference.
As we know we can create the HTML elements with the help of `createElement()` function. We can avoid **createElement()** and re-use the same type of element with **createFactory()**. E.g. It is same as JSX: Suppose we want to create two `<h1>` tags with **createElement()**. E.g. We can use the **createFactory()** function to reuse the `<h1>` tags. E.g. Here, We have avoided to use **createElement()** function and used **createFactory( ‘h1’ )** to create same element multiple times.
Mostly we use the JSX markup inside our component. But, React also provide the function `createElement()` to create differnt elementos without using the JSX. It is little bit complicated and we need to write more code. E.g. Below are two examples: In first example we use the JSX. And, In second we’ll use the createElement(). 1) Using JSX: 2) Using `createElement()` Here, The function `createElement()` accepts 3 parameters: First argument is tag name. In our example we have pass the `h1` as first parameter to create a `<h1>` tag. Second argument is attribute object. In our example we pass the object `{ ‘id’: ‘first’ }` to set the **ID** attribute with value **first** to our `<h1>` tag. Third argumentn is the markup. In our example we pass it as `Heading 1` which is the text of our `<h1>` tag. NOTE: We can pass the another createElement() as a 3rd argument to create nested elements. E.g. Here, We have created 1 **div** tag with id **wrapper** and inside it created `<h1>` and `<h2>` tags with ID **one** and **two** respectively. Lets check how it is more easys with JSX format.
We can create global state to access across diff. components with **”Context API”**. We can use `createContext()` funtion to create the context. Wrap the `<App>` component with `<ThemeContext.Provider value={{ textColor: ‘red’ }}>` to pass the `textColor` to all inner `App` components. Inside `<App>` component we have `<Welcome>` component. So, We can access `textColor` into `<Welcome>` component with `<ThemeContext.Consumer>` Inside `<ThemeContext.Consumer>` we have a callback function in which we extract the `textColor`. And finally we use it to set the text color to our `<h2>` tag with `style={{ color: textColor }}`. E.g. We have created a `ThemeContext` context with `createContext()`.
We can use the `cloneElement` to extend the children components. E.g. We have a `<App>` component which contain `<Buttons>` component. In below example we have `<Buttons>` component which have 3 buttons: A, B, and C.- In `<Buttons>` component we have state `selected` We have markup `<p>You have selected: {selected}</p>`. Initialy `selected` does not contain any value. We have added the `onClick` event for each childern `<button>` with the help of `cloneElement()` function. With `cloneElement()` we extend each `<button>` children. So, On click on any button we used `setSelected()` to set our current button value. And then we see: On click on `A` button – We see `<p>You have selected: A</p>` On click on `B` button – We see `<p>You have selected: B</p>` On click on `C` button – We see `<p>You have selected: C</p>`
With Suspense, We can load the skelton or fallback component, elements. We can pass our components in `fallback` prop. E.g. In below example we wrap the <Suspense> component for our <SlowComponent> component. In Suspense component we have pass the fallback prop. It contain the element <span>Loading..</span> as a fallback to our slow component. So, Until our <SlowComponent> component load, we see the fallback element.
StrictMode highlighting problems in an application. IMP: Strict mode checks are run in development mode only; IMP: they do not impact the production build. he `findDOMNode()` method is DEPREACTED for that we get the Warning with `<StrictMode>` In above example we can see the error: Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of App which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
PureComponent do the shallow comparision and re-render the Component. E.g. If our states is not change and we try to re-render the component then it check there is now We can use the PureComponent to improve performance. In below example we have created `Welcome` and extend it with `PureComponent`. Initilize the `count` state with `0`. On `componentDidMount()` set the `1000 ms` / `1 second` interval with `setInterval()`. And for each second we set the same value `0` to our `count` state. Also for testing used `componentDidUpdate()` life cycle method which trigger after updating the component. In Console log we see the `componentDidUpdate` log only once. Becase when the state change after 1 second then PureComponent check that there is no diff. from old and new state value. So, PureComponent avoid the re-render. Instead of `PureComponent` if we use `Component` then for each second we see the log `componentDidUpdate` in console.
Profiler measures React application renders. And the “cost” of rendering. Its purpose is to help identify parts of an application that are slow. It benefit from optimizations such as memoization. It provides: id, // the “id” prop of the Profiler tree that has just committed phase, // either “mount” (if the tree just mounted) or “update”
We need to wrap all the child in one element. To avoid the extra <div> we can use the Fragment.
React provides the class Component. We can create class component. E.g.
React provides the children prop in which we can access other elements. const Wrapper = ( { children } ) => { return ( <div> <h1>Wrapper</h1> {children} </div> ) } const ReactChildren = () => { return ( <Wrapper> <h2>Hello World</h2> <p>Content goes here..</p> </Wrapper> ) } export default ReactChildren;
ReactJS provides below list of APIs:
Now a days, ReactJS is most popular JavaScript library for building Web Applications, Mobile Applications with React Native. #APIs APIs ReactJS provides below list of APIs: Children Component Fragment Profiler PureComponent StrictMode Suspense cloneElement createContext createElement createFactory createRef forwardRef isValidElement lazy memo Top ↑#Packages Packages
Google AdWords is a Google provided platform to publish our ads.
Create and Release New Package
Most of us may aware of the hosting packages on the NPM repository. So, In this article, we are going to learn about how to create and release NPM package on https://www.npmjs.com/ I have created and host the package https://www.npmjs.com/package/hello-world-by-mahesh In this article, I’m going to share you how I have created this package and
How to Install NPM and Node.js
Node.js is an open-source server environment run on various platforms (Windows, Linux, Unix, Mac OS X, etc.) that uses JavaScript on the server, and most importantly.
NPM How to
npm whoami [--registry <registry>] (just prints username according to given registry)
npm view [<@scope>/]<pkg>[@<version>] [<field>[.subfield]…] aliases: v, info, show
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git] (run in package dir) 'npm -v' or 'npm --version' to print npm version (6.14.4) 'npm view <pkg> version' to view a package's published version 'npm ls' to inspect current package/dependency versions
npm update [-g] [<pkg>…] aliases: up, upgrade, udpate
npm unpublish [<@scope>/]<pkg>@<version> npm unpublish [<@scope>/]<pkg> --force
npm uninstall [<@scope>/]<pkg>[@<version>]… [--save-prod|--save-dev|--save-optional] [--no-save] aliases: un, unlink, remove, rm, r
npm token list npm token revoke <tokenKey> npm token create [--read-only] [--cidr=list]
npm test [-- <args>] aliases: tst, t
npm team create <scope:team> [–otp <otpcode>]npm team destroy <scope:team> [–otp <otpcode>]npm team add <scope:team> <user> [–otp <otpcode>]npm team rm <scope:team> <user> [–otp <otpcode>]npm team ls <scope>|<scope:team>npm team edit <scope:team>
npm stop [-- <args>]
npm start [-- <args>]
npm stars [<user>]
npm star [<pkg>…] npm unstar [<pkg>…] alias: unstar
npm shrinkwrap
npm set <key> <value> (See npm config)
npm search [--long] [search terms …] aliases: s, se, find
npm run-script <command> [-- <args>…] aliases: run, rum, urn
npm root [-g]
npm restart [-- <args>]
npm repo [<pkg>]
npm rebuild [[<@scope>/<name>]…] alias: rb
npm publish [<tarball>|<folder>] [--tag <tag>] [--access <public|restricted>] [--dry-run] Publishes '.' if no argument supplied Sets tag `latest` if no --tag specified
npm prune [[<@scope>/]<pkg>…] [--production]
npm profile enable-2fa [auth-only|auth-and-writes] npm profile disable-2fa npm profile get [<key>] npm profile set <key> <value>
npm prefix [-g]
npm ping ping registry
npm pack [[<@scope>/]<pkg>…] [--dry-run]
npm owner add <user> [<@scope>/]<pkg> npm owner rm <user> [<@scope>/]<pkg> npm owner ls [<@scope>/]<pkg> alias: author
npm outdated [[<@scope>/]<pkg> …]
npm org set orgname username [developer | admin | owner] npm org rm orgname username npm org ls orgname [<username>]
npm ls [[<@scope>/]<pkg> …] aliases: list, la, ll
npm logout [--registry=<url>] [--scope=<@scope>]
npm link (in package dir) npm link [<@scope>/]<pkg>[@<version>] alias: ln
NPM | Commands | install-tests
npm install-test [args] Same args as npm install alias: it
NPM | Commands | install-ci-tests
npm install-ci-test [args] Same args as npm ci alias: cit
npm install (with no args, in package dir) npm install [<@scope>/]<pkg> npm install [<@scope>/]<pkg>@<tag> npm install [<@scope>/]<pkg>@<version> npm install [<@scope>/]<pkg>@<version range> npm install <alias>@npm:<name> npm install <folder> npm install <tarball file> npm install <tarball url> npm install <git:// url> npm install <github username>/<github project> aliases: i, isntall, add common options: [--save-prod|--save-dev|--save-optional] [--save-exact] [--no-save]
npm init [--force|-f|--yes|-y|--scope] npm init <@scope> (same as npx <@scope>/create) npm init [<@scope>/]<name> (same as npx [<@scope>/]create-<name>) aliases: create, innit
npm get <key> <value> (See npm config)
npm fund [--json] common options: npm fund [--browser] [[<@scope>/]<pkg> [--which=<fundingSourceNumber>] get npm get <key> <value> (See `npm config`)
npm explore <pkg> [ -- <command>]
npm edit <pkg>[/<subpkg>…]
npm doctor
npm docs <pkgname> npm docs . alias: home
source <(npm completion)
npm dist-tag add <pkg>@<version> [<tag>] npm dist-tag rm <pkg> <tag> npm dist-tag ls [<pkg>]
npm dedupe aliases: ddp, find-dupes
npm config set <key> <value> npm config get [<key>] npm config delete <key> npm config list [--json] npm config edit npm set <key> <value> npm get [<key>] alias: c
npm ci
npm cache add <tarball file< npm cache add <folder< npm cache add <tarball url< npm cache add <git url< npm cache add <name<@<version< npm cache clean npm cache verify
npm bugs [<pkgname<] alias: issues
npm bin [--global]
npm audit [--json] [--production] npm audit fix [--force|--package-lock-only|--dry-run|--production|--only=(dev|prod)]
#Examples Examples npm adduser [--registry=url] [--scope=@orgname] [--auth-type=legacy] [--always-auth] aliases: login, add-user
#Examples Examples npm access public [<package>] npm access restricted [<package>] npm access grant <read-only|read-write> <scope:team> [<package>] npm access revoke <scope:team> [<package>] npm access 2fa-required [<package>] npm access 2fa-not-required [<package>] npm access ls-packages [<user>|<scope>|<scope:team>] npm access ls-collaborators [<package> [<user>]] npm access edit [<package>]
Below is the list of all commands:
In this article we are going to see how to capture website screenshot with command line interface. We are going to see: #Introduction Introduction Before writing about how to create a website screenshot of website with CLI command, I think, I need to share some background. Recently, I was working on some project in which
NPM browser-sync Package (Install, Use, and Examples)
Browser sync is one of the good tool to avoid manual browser refresh. We are going to see: #Introduction Introduction Browsersync is a Node.js module. It provides a platform for fast network applications. It is a Time saving synchronized browser testing. In short, it creates a server like http://localhost:3000/ and watches the file changes. When
NPM package classnames is most popular package which helps us to define the dynamic classes or we’ll add classes conditionally. We are going to see how to use the NPM package classnames. Table of contents: #Installation Installation OR Top ↑#How to use classnames? How to use classnames? We are going to see the usage of
VS Code is a open source editor which is most famous in developers. In this article we are going to see how to set the default terminal in VS Code editor. In this article, I’m going to set the Git Bash as a default VS Code terminal. First you want to install and activate the
VSCode | How to | Add Folder in Workspace
In this article we are going to see how to add multiple projects in VSCode. #Step 1: Open VSCode Workspace Step 1: Open VSCode Workspace Below is the screenshot of my existing workspace. In my workspace I have two plugins. Cartflows and Cartflows Server. Top ↑#Step 2: Add Folder to Workspace Step 2: Add Folder
See all the shortcuts including Ctrl+Shift+P, F1 => Show Command Palette | Ctrl+P => Quick Open, Go to File | Ctrl+Shift+N => New window/instance | Ctrl+Shift+W => Close window/instance | Ctrl+, => User Settings | Ctrl+K Ctrl+S => Keyboard Shortcuts, and more..
Git Exclude files: Exclude with Git diff command
When we build the files with webpack, gulp, grunt, or any other tool then we see the minified files. In git, those files are also visible with "git diff"
Below is the list of all possible How to related questions that are related to Git. How to Exclude files from Git diff command?
How to check the git version on Windows operating system.
If you are looking for how to find the current git version on your system then you are in right place. GitHub provides the version command. Use the below command: git version You’ll see something below the screenshot:
With the help of the git diff command, you can show changes between commits, commit, working tree, etc. You are going to see: #Syntax Syntax git diff [<options>] [<commit>] [--] [<path>…] git diff [<options>] --cached [--merge-base] [<commit>] [--] [<path>…] git diff [<options>] [--merge-base] <commit> [<commit>…] <commit> [--] [<path>…] git diff [<options>] <commit>…<commit> [--] [<path>…] git
Learn about all git commands including add, bisect, branch, clone, commit, diff, fetch, grep, init, log, merge, mv, pull, push, rebase, reset, restore, rm, show, sparse-checkout, status, switch, and tag.
Git updates and news, and more
Git is a version control system that is free and open source. Commands Git provides a lot of commands to manage our projects. Below is the list of some of them. git config; Configure user information for all local repositories git init
React Native | How to | Add Drawer Navigation
#Installation Installation Additional dependencies for Expo. Top ↑#Example Example
React Native | How to | Add Linear Gradient
React Native not have added official support to add Linear Gradients. We have different options to add a linear gradient into the React Native app. In this article we are going to see: I’m going to show you how to use the Linear Gradient with the LinearGradient component provided by Expo.io. #Installation Installation Use below
Below is the list of all common How to questions of React Native.
Do everything from Terminal or Command Prompt with GitHub CLI. GitHub CLI is Free and open source. #Installation Installation We can install the GitHub CLI in various ways. I’m using the custom installation for Windows operating system in which I use the MSI file gh_1.0.0_windows_amd64.msi which is now in 5.84 MB. For other installation process
Search Replace in Database with $wpdb (in WordPress)
WordPress gives us the $wpdb global variable which is the Abstraction Object to access the WordPress database. With the help of $wpdb, we can perform the database operations.
Display Only Ready Scheduled Events (Corn Jobs) in WordPress
Description By using the function wp_get_ready_cron_jobs() to get all the READY scheduled events OR READY corn jobs. Note: Use below code snippet for ONLY debugging/development purpose. Code Snippet Output
Display All Scheduled Events (Corn Jobs) in WordPress
Description By using the funciton wp_get_schedules () to get all the scheduled events OR corn jobs. Note: Use below code snippet for ONLY debugging/development purpose. Code Snippet Output
Display Posts Group by Alphabets in WordPress
Create an array of posts grouped by alphabet with WP_Query. Use below to create the list of posts array with the group by alphabet.
Register or Enqueue Google fonts in WordPress Theme
A valid way to register the Google fonts in the theme or plugin. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Add Upload Limit Notice for Single Site in WordPress
Show individual site upload limit notice on media page WordPress (Only for Multisite) Eg. Snippet This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below.
Create a Simple Shortcode in WordPress (with Code Example)
Use code snippet to create a simple WordPress shortcode. I have created a sample shortcode prefix-portfolio with 2 attributes. #Before use change: Before use change: Change the Prefix with your own unique prefix. Change the prefix with your own unique prefix. Top ↑#How to use? How to use? Create a new page and add shortcode. Open
Check Which Template is loading in WordPress
Below is the simple function which you can use for debugging the site. It display the template file path of the current page. Like below image: Add below code snippet into your themes functions.php file. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open
WordPress | Add Custom Column to Custom Post Types (Code Snippet)
WordPress provide the filter manage_
WordPress Snippets: The untimate list of WordPress code snippets.
Setup the TOTP (Timebased One-Time Passwords) on WordPress
Time-Based One-Time Passwords (TOTP) are one of the best methods used for two-factor authentication. You are going to see: #What are Time-Based One-Time Passwords (TOTP)? What are Time-Based One-Time Passwords (TOTP)? Time-Based One-Time Passwords (TOTP) are something similar to Email codes. In Email codes, we get an email with the security code which we need
Two Factor Authentication (aka 2-Factor Authentication)
WordPress factor authentication is an extra security layer for your WordPress website. What does it mean 😅? In this article you are going to see: #What is the Two Factor Authentication? What is the Two Factor Authentication? Normally we log in to our website with the help of a username or email and password. If
Journey Behind Translating WordPress Bhari theme
In early January 2017, I started reviewing WordPress.org themes as a volunteer from https://themes.trac.wordpress.org/report/. So, I decided to create a simple WordPress theme.
A Complete Guide of wp-config.php File in WordPress
In WordPress, the wp-config.php is one of the most important files. The wp-config.php file is automatically generated while installing WordPress in the root directory of the website.
WordPress Filesystem API: Complete Overview with Examples
PHP provides the file handling functions like file_get_contents, file_put_contents, etc. In WordPress, we can use WordPress Filesystem API which gives us a safe way to work with files.
Fix Most Common Database Issues in WordPress
WordPress gives us a utility page repair.php. It allows us to fix the WordPress database issue. By default it's disabled. We can define the constant 'WP_ALLOW_REPAIR' which enables it.
Fix MIME validation for uploaded files from WordPress 5.0.1
If you have used function wp_handle_sideload() in any of your plugin/theme then you need to pass the mimes types too. Because WordPress 5.0.1 Security Released. In which the uploaded files are validated with the real MIME type.
Senitization and Escaping with Examples in WordPress
In this article, we are going to see how what is sanitization and escaping. What is sanitization? Getting secure user input is a sanitization. What is meant by secure user input? Suppose we have a setting page in WordPress.
WordPress Make a Translation Ready Themes and Plugins
Quick Reference: e is for echo x is for context n is for plurals # Translate Strings: __() – Retrieve a translated string. _e() – Display a translated string. _x() – Retrieve a translated string with context.
Multisite Support for Site Metadata in WordPress 5.1
Quick Highlights: WordPress multisite introduces a new database table wp_blogmeta, to store metadata associated with sites. This allows for the storage of arbitrary site data relevant in a multisite/network context.
WordPress Rest API Default Endpoints with Examples
In WordPress, there are a lot of default rest API endpoints that may help you while developing. How to access the rest API endpoints? You can access the rest API endpoints through URLs.
In-depth of WordPress plugin init file
We are going to see In-Depth about the WordPress plugin init file.
Import bbPress dummy data in WordPress
1) Quick Import: I have created a simple plugin that imports the bbPress dummy data on your site within a few minutes. Check the below video: The plugin will approve on wp.org, this week. For now, you can download it from the GitHub repo Sample Data.
How to use wp_parse_url() and wp_parse_str() functions
#wp_parse_url() wp_parse_url() wp_parse_url() is wrapper function for PHP’s parse_url() function that handles consistency in the return values across PHP versions. #Example 1: Example 1: Let’s extract the scheme, host, and path from the URL https://maheshwaghmare.com/ by using the wp_parse_url(). The output of the above code is below: array (size=3) 'scheme' => string 'https' (length=5) 'host'
Create the post on the wordpress.com site using OAuth and Rest API
#Working on Rest API and OAuth is very interesting. Working on Rest API and OAuth is very interesting. WordPress merged Rest API support into the core in WordPress 4.7 “Vaughan” check out the Rest API Merge Proposal. In this post, I’m creating the post on my site https://maheshwaghmare.com/ though rest API and OAuth. Top ↑#Let’s Try it Step by Step
GitHub to WordPress.com Automation
WorkdPress.com now provide the GitHub action support to all the sites which are hosted on WordPress.com with Business or eCommerce plan. The integration of this automation process is very easy. Lets see step by step, How I have setup GitHub automation to my site https://maheshwaghmare.com/ #Create FTP Details Create FTP Details If you have a
WordPress PHPUnit Tests | Install, Configure with Examples
Step by step setup PHPUnit tests for you WordPress theme or plugin and write some test cases with simple code snippet.
The plugin "Image SEO" simply highlights the missing or empty alt and caption from the post images. Additionally, it also checks the missing SEO focus keywords..
The plugin Easy Search provides a zero-configuration search for the Gutenberg block editor. Below is the screenshot of what it looks like in the WordPress Gutenberg Editor.
Most of the time we need the sample data. Basically, we need sample data which includes posts, pages, etc. We are going to see: Overview Themes and plugins ..
Download Free Images from 1.4+ Million CCO public domain Images. Table of Content Description Image is one of the most important parts of a website.
Copy the HTML into the Clipboard
With the help of Copy Anything to Clipboard plugin you can copy the HTML into the clipboard with the filter 'copy_the_code_localize_vars'. See the example.
Copy Anything to Clipboard: Upcoming Release Features, Plans
See the list of all upcoming features, fixes, etc of WordPress popular plugin "Copy Anything to Clipboard" which is one of the BEST and FREE plugins ever.
As per the request, I have added a filter support to redirect users after copy content to the clipboard.
Copy Anything to Clipboard with FREE WordPress plugin
Add a Copy button to copy blockquote, code snippet, custom text, Google meet link, Zoom meeting link, list items etc with easy to use user interface.
Table of Content Overview In this article, we are going to see how to use the User Switching WordPress plugin. We can test our current plugin or theme for different user roles. Create User We need to create a new user. You can create from Users > Add new page. But, I am using WP
Below is the country list with country code from the WooCommerce plugin. Country Code Country Name AF Afghanistan AX Åland Islands AL Albania DZ Algeria AS American Samoa AD Andorra AO Angola AI Anguilla AQ Antarctica AG Antigua and Barbuda AR Argentina AM Armenia AW Aruba AU Australia AT Austria AZ Azerbaijan BS Bahamas BH
WordPress Application Passwords
In this article, we are going to see all about the WordPress plugin Application Passwords. Create different applications with unique passwords for any user to manage the REST API & XML requests.
Basic Authentication for WordPress Rest API
In this article, we are going to see how to perform basic authentication requests with the plugin JSON Basic Authentication.
Yoast SEO Custom Template Variable
In this article, we are going to see how to add a custom template variable to the Yoast SEO plugin. We are going to read: What are the variables in Yoast? Yoast plugin provides the variables to customize the site title. Below are some examples of the variables.
Code Sniffer Errors and Warnings
Below is the list of all possible WordPress code sniffer errors and warnings.
The complete guide of WordPress Options API with examples.
WordPress User Roles & Capabilities
WordPress allows us to manage users with Roles and Capabilities. Basically, user roles are the combination of multiple capabilities. Each user role has 1 or many capabilities.
WordPress Cron Schedules and Events with Examples
In this article, we are going to see how to use WordPress Cron or WP Cron to register custom cron schedules and cron events. You are going to learn.
In-depth of WordPress plugin init file
I'm trying to explain In-Depth about the WordPress plugin init file. You are going to see: Init File Structure Below is the structure of the example plugin.
WordPress Blog
Debug Hook Sequence in WordPress
When we use multiple plugins then we often face an issue with other plugins. If it is related to the WordPress hooks then you can easily find the issue by checking the hook sequence.
Create Dashboard Widgets in WordPress
We can create the dashboard widgets with the help of function wp_add_dashboard_widget() and with the action hook wp_dashboard_setup(). Follow the step-by-step article and create your own dashboard widget.
While developing a WordPress theme you see the message: RECOMMENDED: add_editor_style() does not seem to be implemented properly.
It converts a value to a non-negative integer. Internally this function used abs( intval( $maybeint ) ).
Readable Date Format for Post in WordPress
Problem The first question raises in your mind is, what do you mean by WordPress readable date? Let me explain. While writing articles for my blog https://maheshwaghmare.com/, I notice that the date format of the published and draft posts are not readable.
[Solved] To perform the requested action WordPress needs to access your web server
WordPress will prompt you for FTP credentials If it does not have permission to write the files it needs to. You are going to see: #Perform the requested action error Perform the requested action error Whenever this happens we can see the error: To perform the requested action, WordPress needs to access your web server.
Download the Stable Plugin or Theme zip from WordPress
#Plugin Download URL Plugin Download URL You can add a download button on your website with the link of latest plugin zip. So, Your users always get the latest zip of your plugin which is hosted on wp.org. Stable plugin download zip URL is: Note: You need to use the plugin slug for {plugin-slug}. #How
Get all posts which contain specific shortcode
While working on some project, I was stuck on one issue. The issue was, User was multiple posts and he was use my shortcode on some of them. And I was trying to figure out which are the posts which content have my shortcode. The answer is in my question. To do this I need
Get all posts by post meta key and meta value
In this article we are going to see: #Description Description For some situations, we need to get all the posts which have specific meta key and meta value. We can do it with the help of the WP_Query class. Top ↑#Example Example Note: I’m giving you an imaginary example just for a reference to understand,
Failed to open stream: No such file (mock-mailer.php) for windows
After setup the PHP unit test on your Windows operating system maybe you get below error: In file C:\Users\MaheshW\AppData\Local\Temp\wordpress-tests-lib\wp-tests-config.php line 7 has code: Here, ABSPATH return the invalid path. You can simply change the above code with below: NOTE: Here change the {USERNAME} with your own user name. To know the user name just open
Fix Another update is currently in progress
Some times while updating the WordPress core version or updating bulk plugins we’ll get a notice: WordPress another update is currently in progress error describes itself. Table of Content This notice occurs because WordPress locks the update process if the update process triggers multiple times. The update class uses the method create_lock of the class
Download WordPress Latest or Old Versions
Below are the quick download links of the latest WordPress release. Or Download OLD plugin release for reference. NOTE: Always use latest WordPress plugin release. Use OLD versions only for development purpose. Loading..
Check logged in user role. Use function wp_get_current_user() to get the current/logged in user info. Usage: var_dump( prefix_user_has_role( 'administrator' ) ); // Output: // bool(true) Snippet: This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode
Setup a Blackfire profiling tool on your local machine ( I’m installing it on Windows ). Profiling help developer to analyze their coding performance. Find unwanted calls/memory issues and helps to optimize all the possible issues. #Installation Installation Create Empty Folder We can set up the Blackfire in any directory. I’m installing it in directory C:\Program Files\. Create an empty
#Introduction Introduction We can add custom image sizes with function add_image_size(). But, First, let’s discuss why we need custom images in WordPress? By default, WordPress provides 3 image sizes. Means, When we upload any image in WordPress media library then WordPress creates 3 image sizes for us. These image sizes are: Thumbnail (150x150) Medium (300x300)
Avoid canonical redirection or automatic redirection in WordPress
Canonical URLs are those URLs that are alternatives to the original page. By default, WordPress redirects URLs to the canonical page. You are going to see: #What are the canonical URLs? What are the canonical URLs? WordPress redirects the incoming links to the proper URL based on the site URL. Search engines consider the link
Below is the code snippet in which we register a new Taxonomy for the Post. add_action( 'init', 'prefix_register_taxonomy' ); function prefix_register_taxonomy() { $labels = array( 'name' => _x( 'My Taxonomies', 'taxonomy general name', 'textdomain' ), 'singular_name' => _x( 'My Taxonomy', 'taxonomy singular name', 'textdomain' ), 'search_items' => __( 'Search My Taxonomies', 'textdomain' ), 'all_items' =>
In WordPress we can add a custom CSS into Customizer setting. To add the custom CSS follow, below steps: Example Suppose, We want to change the heading background color, and text color. E.g. Here, We are going to change the CSS for the Homepage text. I have below CSS which I want to add in
Get current author posts count | WordPress
Use the function get_the_author_posts() or use shortcode [author_post_count] to display the current post author all posts count.
Display current author posts count | WordPress
Use the function the_author_posts() or use shortcode [author_post_count] to display the current post author all posts count.
In this article, we are going to see how to get or display the current post id. Table of Content Overview WordPress provide us two functions these are
WordPress get current blog details
Table of Content Introduction If you are working on multisite then you have an idea about the function get_blog_details(). The function get_blog_details() retrieve the details for a blog from the blog’s table and blog options. Syntax get_blog_details( $fields = null, $get_all = true ) $fields = A blog ID, a blog slug, or an array
How to Display Shortcode without execution
Problem Most of the times we need to display the actual shortcode into the documentation, blog post or somewhere else by without executing it. But, If that plugin is installed on our website where we use that shortcode into our documentation then that shortcode executing their markup. For example, I have created a plugin Easy
In this article we are going to see how to get the current post type. WordPress provide us the function get_post_type() function which return current post type. E.g. here we have created a CSS class post-<current post type>. The function get_post_type() internally call the function get_post(). So, we can pass the int|WP_Post as parameter. All of
Add Social Share Buttons into the WordPress
Description Zero configuration. Simply use shortcode. Features Zero configuration. Lightweight. Easy to use. Examples Below are some examples..
Add Custom Post Type into Feed
WordPress provide the reed support with URL. We can see the site feed with below URL pattern: https://mywebsite.com/feed/ The /feed/ is generated from the WordPress PHP file wp-includes\feed-rss2.php The have_posts() loop is executed while generating the feed. So, We can use the filter pre_get_posts to show our custom post type feed. Below is the sample
Create Table with WP_List_Table in WordPress
Sometimes we need to display our own data in the table format same as the default WordPress tables like post, pages, custom post types etc. We are going to see: Problem WordPress provides the class WP_List_Table which allow us to create our own custom tables. Below is the screenshot of the page which display the
Display Child Pages by Parent ID in WordPress
Problem I have categorize the articles in parent and child relationship. Below is the real time example of my current blog. Webpack Blog Create a Sample Project How to Install Webpack with NPM Install Webpack-CLI Here, My parent page is Webpack and Its child pages are Blog and How to respectively. The Blog and How
WordPress | How to | Import Theme Unit Test Data
#1) Quick Import: 1) Quick Import: I have created a simple plugin which imports the Theme Unit Test Data on your site within a few minutes. Check below video: The plugin will approve on wp.org in this week. For now, you can download it from Github repo Sample Data. Click on the download plugin to download. Top ↑#2)
Override WordPress Core functions with Plugin
WordPress allows us to override WordPress Core functions from the plugin. We can define those functions into the plugin and implement our own logic. File: wp-includes\pluggable.php Below is the list of those functions which we’ll not override
Download Google Fonts in WordPress
In WordPress theme, or plugin, we can download the Google fonts locally to avoid the extra HTTP request. It helps for website speed improvement.
Below is the list of all related articles:
WordPress | Release | WordPress 5.5 – Release, Features, and more..
WordPress 5.5 Release comes with amazing features including Auto-update, Sitemaps, Lazy-loading images, block directory, and more… We are going to see: #Release Release WordPress 5.5 version release date is scheduled on 11 August 2020. Top ↑#Features Features #Auto-update Auto-update Security is one of the major concern for any website. WordPress Theme and Plugin developers constantly
Below is the list of all releases:
WordPress - News, Updates, Blog, and more
See WordPress news, updates, and more.
Stick Div Inside Parent Div with Plain JavaScript
You are going to learn: See below short video of what we are trying to achive with plain JavaScript: Create Example File Create a new file index.html and add below code within it. You can see the outout in browse as below: Understand clientHeight and getBoundingClientRect To achieve the solution we need to understand about
Below is the list of all possible How to related questions that are related to JavaScript. How to stick the div inside another div? Your question is not found in the above list? Send the email with your how to question. I’ll create a step by step article for it. Contact me – https://maheshwaghmare.com/say-hello/
JavaScript | Testing Framework | Jest
#Installation Installation Screenshot – https://i.imgur.com/o0idDeW.png Top ↑#Configure Configure Create jest.config.json and add below code: Top ↑#Add Commands Add Commands Open package.json and add below test and test:watch commands as below: Top ↑#Add first test Add first test Create a file with *-test.js. E.g. I’m creating the index.test.js file. Add below code within it: Now, Execute
Event Description resize Trigger on window resize. scroll Trigger on scroll on-page.
In JavaScript, everything is an object. Learn more about JavaScript objects.
ES6 Feature: var vs let vs const in JavaScript
Let's see what is the difference between the var, let, and const in JavaScript. In this article, we are going to see: var All we are familiar with the var keyword.
JavaScript Arrow Functions (ES6)
Arrow function is a new ECMAScript specification feature available for us. Arrow Functions are the annomuis functions. Example Addition with Sum() function Let's see how to use arrow Functions with simple examples Suppose we have a JavaScript function that accepts two parameters and returns the addition of those numbers.
JavaScript ES6 (known as Ecmascript) is a new standard that provides new features in JavaScript including Arrow functions, Promises, Let vs Const vs Var, and much more.
With the help of length property we’ll get the array lenght. E.g. let a = [1, 2, 3]; In the variable a there are 3 items. To get the count of this array we’ll use: a.length // Output: 3
How to use the filter method in array (JavaScript)
With the help of filter() array method we’ll filter the and create new array from existing array. Suppose we have array: let a = [ 'One', 'Two', 'Three' ]; The array is stored as: 0: "One" 1: "Two" 2: "Three" Suppose we want to create a new array without the “Two” value. Then, We’ll use
With the help of map() array method we’ll modify and create new array from existing array. Suppose we have array: let a = [ { name: 'Mahesh', age: 23, }, { name: 'Jyoti', age: 21, }, ]; The array is stored as: 0: {name: 'Mahesh', age: 23} 1: {name: 'Jyoti', age: 21} Suppose we want
JavaScript Create Array Methods
In JavaScript we can create a array with two ways: #Create new array with – [] Create new array with – [] Top ↑#Create new array with – new Array() Create new array with – new Array()
Beta Plugins Below is the list of all WordPress Beta Plugins.
Top 100 WordPress Popular Plugins on WordPress.org
Browse the top 100 WordPress popular plugins from wordpress.org and choose them for different purposes.
Learn the HTML, CSS, JavaScript, PHP, WordPress, NPM, ReactJS, Redux, and more..
#Bhari Theme Bhari Theme # Bhari is lightweight, responsive theme for bloggers who love to write articles, share awesome stuff etc. Top ↑#Installation Installation In your admin panel, go to Appearance > Themes and click the Add New button. Click Upload and Choose File, then select the theme’s .zip file. Click Install Now. Click Activate to use your new theme right away. Top ↑#Documentation Documentation
#1) Bhari Theme 1) Bhari Theme Bhari is lightweight, responsive theme for bloggers who love to write articles, share awesome stuff etc. Get it for free download Read more..
Most of the development time we required the sample data. It is hard to import the sample data from different plugins. So, I have built the plugin which provides the single interface to import the plugin/theme sample data with ONE click. For now, I have added BBPress and WooCommerce plugin support. I’ll extend it in
Free Images for your WordPress website
Download royalty-free images/photos under CC0 public domain for your own blog. Select images/photos from 1.4 million royalty-free stock photos. FEATURES INCLUDE: Search Pixabay’s CC0 public domain pictures. Direct image uploads to WordPress media library. 100% safe, model-released images. Image attribution automatically added.
Plugin add the Copy button within the <pre> tag and it copy the content of <pre> tag into the clipboard.
Set active plugins and default theme before site reset. Note: ‘Reset Site’ plugin not support multisite.
Plugins | Post Contributors (Old)
Use this plugin to set multiple contributors for single post. Simply selecting contributors check boxes at Post Editor. It show list of users with checkboxes and show them at POST. Getting started 1) Click ‘Activate’ 2) Go to POST->Add New OR Select existing one i.e. POST->All Posts and select Post 3) Choose ‘Contributors’ and click ‘Publish’. To check
Plugins | Parallax Slider (Old)
Create parallax slider for your website. It provide ultimate admin panel for slide customization. Note: I use google drive for background images. So, If you are offline then background images form option panel “Background” are empty. These does not show pattern images. (This is for minimize plugin .zip)
Plugins | Customizer Reset (Theme Astra)
The Customizer Astra Theme Customizer reset plugin allows you to reset your Astra theme customizer settings from directly within the customizer interface.
Add the search filed in theme & plugin file editor window. Note: ‘Theme and Plugin file Search’ plugin only supports WordPress version 4.9 and greater. Extend on Github
Sample Data Download sample data of Theme Unit Test, WooCommerce, bbPress etc with one click. Read More.. #Free Images Free Images Download royalty free images/photos under CC0 public domain for your own blog. Select images/photos from 1.4 million royalty free stock photos. Read More.. Top ↑#Copy the Code Copy the Code Plugin add the Copy button within
Bhari is lightweight, responsive theme for bloggers who love to write articles, share awesome stuff etc.
Occasionally I write articles on different topics including HTML, CSS, ReactJS, Bootstrap, PHP, and most common on WordPress itself. I love exploring new tools, technologies.
Contact me for WordPress plugin and theme development, WooCommerce customizations, performance optimizations, or any development. Also, If you are using my plugins or themes still you can contact me.
Hay! My name is Mahesh Waghmare
I am a Mission-driven full stack developer with a passion for thoughtful UI design, collaboration, and teaching. I'm leaving in Osmanabad, Maharashtra, India. Read more about me.
