Prashant Baldha on WordPress

Blog

  • How to Upload a Plugin to WP.org Plugin Repository using SVN?

    How to Upload a Plugin to WP.org Plugin Repository using SVN?

    You should submit the plugin zip file on the https://wordpress.org/plugins/developers/add/ to get approval from the WordPress.org Plugin team. You should be logged in to WordPress.org when submitting to the WordPress.org Plugin repository. When developing a WordPress Plugin, You should follow all best practices mentioned in WordPress Plugin Development HandBook.

    The Plugin Review Team may contact you on your email. The Plugin Review Team would come with either rejection or approval. If the Plugin Review Team comes to your email with approval, They will give you SVN checkout URL in the reply email address.

    Would you please follow the below steps to upload the plugin in WordPress.org Plugin Repository?

    Add changes to trunk

    • Make a folder (directory) plugin-slug in your Local computer.
    • Open a terminal in the plugin-slug folder and run the command: svn co https://plugins.svn.wordpress.org/plugin-slug
    • Then, You should copy paste your all plugin files and folders in the plugin-slug/trunk folder.
    • After putting all plugin files and folders in the plugin-slug/trunk folder, You must tell the SVN that I want to add these files and folders in repository changes. It is equivalent to staging in git. We should run the command in the terminal: svn add --force trunk/* --auto-props --parents --depth infinity -q or svn add . –force
    • For svn deleting removed files, Please run the command svn status | grep '^!' | awk '{print $2}' | xargs svn delete from command line.
    • After you add all changed files and folders in staging, We should run the command: svn ci -m 'trunked 5.2.4 version: Introduced settings' It is need to add commit message. Here, The senetence “trunked 5.2.4 version: Introduced settings” is commit message.
    • Run command `svn up` to make changed in WP.org Plugin Repository.

    Tagging New Version:

    • To tag your version, You should copy all files and folder of trunk. For it, We should run the command in the terminal: svn cp trunk tags/5.2.4
    • Then run the command in the terminal to stage tags/5.2.4/* changes: svn add --force tags/5.2.4/* --auto-props --parents --depth infinity -q
    • Run the command to commit tagged version: svn ci -m "tagging version 5.2.4"
    • Run command svn up to make changed in WP.org Plugin Repository.

    More information is on https://thewpx.com/wordpress-svn-repository/.

  • Why should you use at least free Cloudflare for your WordPress website?

    Why should you use at least free Cloudflare for your WordPress website?

    Cloudflare has a free plan that has enough features to serve your basic WordPress site. It is completely free. Cloudflare is used by 81.2% websites of the total websites in the world. WordPress is used by 42.5% of all websites across the globe. If we combine these both Softwares, We can make an awesome website.

    The Cloudflare free plan has many advantageous benefits.

    Main benefits of Cloudflare Free App:

    • Free CDN Server
    • Free SSL certificate
    • Caching
    • Fast and Free DNS Server
    • Basic Level Bot Fight Mode
    • Use Free Apps

    Free Cloudflare plan saves your WordPress site from hacking and DDoS attack.

    Cloudflare gives you a free, fast DNS server and firewall for your site. Many Webhosting companies are changing money for DNS servers and SSL certificate. Many DNS serves are slow in comparison to the Cloudflare DNS server. Cloudflare gives free CDN and caching services free of cost. Cloudflare has 194 data centers across the globe to serve your website.

    Cloudflare gives a free SSL certificate to your WordPress site.

    Cloudflare firewall protects you from DDOS attacks. By Making Custom IP firewall rules, You can block your sites from specific malicious IP addresses machines.

    You can check your site’s unique visitor statistics with the country information. You can install free Cloudflare apps that are very useful. Many Apps are also paid.

    Cloudflare Apps

  • get_home_path() vs ABSPATH and get_home_url() vs get_site_url() in WordPress

    Many WordPress developers are often confusing between get_home_path() and ABSPATH. Same way, They are confused between get_home_url() and get_site_url(). Both codes give the same result in normal WordPress installation. But both codes give different results in a special WordPress installation site where WordPress core files located at a different place than web site’s root folder.

    Here, I am going to explain what is difference between get_home_path() and ABSPATH by taking an example. To understand it I have made a demo WordPress site in which I have made a different WordPress code sub-directory in subfolder /wordpress. To understand how to move WordPress code into a different sub-directory you should follow the steps described in https://wordpress.org/support/article/giving-wordpress-its-own-directory/#method-ii-with-url-change. I have given a different WordPress sub-directory to my WordPress site. I have used Method 2 described in the given link.

    I have added below code in the wp-content/mu-plugins/test.php file:

    <?php
add_action( 'admin_init', function() {

    echo 'Home Path: '.get_home_path();
    echo '<br>';
    echo 'ABSPATH: '.ABSPATH;

    echo '<br><br>';

    echo 'Home URL: '.get_home_url();
    echo '<br>';
    echo 'Site URL: '.get_site_url();
    

    die;
} );

    The output of the script is as below:

    Home Path: //Users/prashant/Local Sites/wpsepdir/app/public/
ABSPATH: /Users/prashant/Local Sites/wpsepdir/app/public/wordpress/


Home URL: http://wpsepdir.local
Site URL: http://wpsepdir.local/wordpress

    The get_home_path() gives root path of WordPress site. The `ABSPATH` gives the path of subdirectory where WordPress codes reside.

    The get_home_path() gives the URL where the user can visit the site. The get_site_url() gives URL where the WordPress codes reside.

    Here, Home word refers to site’s home. The Home is root folder of the site. Whereas site and ABSPATH refers to WordPress subdirectory where WordPress core code exists.

  • WordPress Code Debugging – Part 1

    Being a developer, We are spending a lot of time in debugging besides writing code. If we can debug with speed, We can be more productive in our development. In this article, I would like to show you debugging tips and tricks.

    Error-free code

    We are generally debugging when we produce erroneous code. First, we should take care that we should not produce any buggy code. If we write an error-free code, We will not face a question of debugging.

    There are three ways to prevent bugs:

    1. Follows coding standards
    2. Use simple expressive variable/function names
    3. Write single-purpose short functions

    To write the error-free code, I personally insist to follow any coding standard. I personally prefer WordPress code standards. To check whether we are following code standard perfectly, We should use code standard checking tools. I personally use PHP Code Sniffer with WordPress Coding standard. The coding standard generates the consistent formation of the code.

    Try to use simple and fully qualified function names. Instead of naming $p, We should make the function name $post. The $post name suggests that it holds the post object.

    Break/Divide a code into more functions instead of writing all code in a single function. A Function should be written single purpose, and It should be as short as possible. An error can’t be hidden in a short function. An error can be hidden in a lengthy function code.

    Code Linting

    Break/Divide a code into more functions instead of writing all code in a single function. A Function should be written single purpose, and It should be as short as possible. An error can’t be hidden in a short function. An error can be hidden in a lengthy function code.

    Advanced debugging with breakpoint

    Do advanced debugging by using the breakpoint with the XDebug and Integrated Development Environment IDE Editor like VSCode. A Breakpoint pauses the execution and allows to inspect the code. For how to use XDdebug with the VSCode, Please visit the https://github.com/felixfbecker/vscode-php-debug

    VSCode with Xdebug breakpoint

    When control comes to the breakpoint, the execution pauses and allows us to inspect the code. We can do advanced debugging with breakpoint using the chrome dev tool. For how to use breakpoint with the chrome dev tool, Please visit the https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

    WP-Config constants

    When you are developing in WordPress, Please make sure that below the constant value set in the root/wp-config.php file.

    define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', __DIR__ . '/wp-content/prashant-11072021-FDFDFRGFDDFD.log' );
define( 'WP_DEBUG_DISPLAY', true );

    If the above-mentioned constants are not set and you write any buggy code, You can not see any error.

    WordPress plugin for debugging

    1. Query Monitor: Monitor SQL Queries, Query load time and AJAX request
    2. Debug Bar: Adds a debug menu to the admin bar that shows query, cache, and other helpful debugging information.
    3. Log Deprecated Notices: Logs the usage of deprecated files, functions, and function arguments
    4. User Switching: allows you to quickly swap between user accounts in WordPress at the click of a button

  • How to Install WP-CLI in Windows 10?

    WP-CLI is the WordPress Command line tool. WP CLI helps the user like us to perform WordPress administration tasks and Scaffolding. For more detail of the WP CLI, Please go to the WP CLI handbook.

    In this article, I will show how to install the WP CLI in Windows.

    @ECHO OFF
php "d:/wp-cli/wp-cli.phar" %*
    • Then we should set the D:/wp-cli for the path by running following command by the command line. Please note that I have used d:\ in the lower case
    setx path "%path%;d:\wp-cli"
    • Then run the wp command from anywhere and see the output.

  • Introduction to WordPress Taxonomy

    Taxonomy makes groups of posts. Taxonomy enables you to a group of the post of similar characteristics.

    In WordPress, Mainly two types of taxonomies are used. Both are inbuilt taxonomies.

    • Tags
    • Categories

    Categories are Hierarchical Taxonomy, Whenever Tags are Non-Hierarchical Taxonomy.

    Custom taxonomy

    Many People know that WordPress is a blogging platform, But WordPress provides all facilities that one CMS framework provides. WordPress gives the facility to make custom taxonomy that enhances WordPress as a CMS framework. To make custom taxonomy WordPress has register_taxonomy() function.

    <?php register_taxonomy( $taxonomy, $object_type, $args ); ?>

    You can refer to this function to the https://developer.wordpress.org/reference/functions/register_taxonomy/. Use init action hook to call this function.

    Parameters:

    $taxonomy (string) (Required):

    The name of taxonomy. Taxonomy should contain only alphanumeric characters and underscore. .All letters should be in lower case. Taxonomy name character length is less than 32 characters.

    $object_type (array/string)(required)

    The name of the post type for this taxonomy. $object_type can be a built-in post or custom post type. WordPress default post types are post, page, revision, or nav_menu_item. If we want to associate this custom taxonomy $object_type parameter has a custom post type name.

    $args (array)(optional)

    An array of taxonomy setting array.

    Arguments:

    label (string)(optional) – The Plural name of this taxonomy.
    labels (array)(optional) – An array of labels. For array labels, We consider hierarchical taxonomy as categories and non-hierarchical taxonomy as tags. If labels array is not passed or empty labels array passed, name element of labels array is set to label args element and sigular_name element of labels array is set to taxonomy name.

    • name – Plural name of the taxonomy
    • singular_name – Singular name of the taxonomy.
    • menu_name – The text displayed in the menu. If menu_name is not given, menu_name is to name value.
    • all_items – All Items Text.
    • edit_item – Edit Item Text
    • view_item -View Item Text
    • edit_item – Edit Item text
    • view_item – View Item Label
    • update_item – Update Item Text
    • add_new_item – Add new Item Text
    • new_item_name – New Item Name Label Name
    • parent_item – Parent Item Label. parent_item is only for hierarchical taxonomy. Default is Parent Category
    • parent_item_colon -same as parent item but with colon, default is same as parent_item.
    • search_item -search Item Text
    • popular items – Popular Items Text

    There are other argument elements. You can refer them to the https://developer.wordpress.org/reference/functions/register_taxonomy/#arguments.

  • Make WordPress Core Ticket Patch Using GIT

    Many WordPress developers would like to become WordPress core contributors. To be a WordPress core contributor, You should find the WordPress core track tickets, which required a patch on the https://make.wordpress.org/core/reports/. 

    Most of the WordPress developers are familiar with git, but the WordPress core patch can be made by svn in general. However, You can make a patch by git by below steps in windows

    1. Git download and install (https://git-scm.com/download/win)
    2. Nodejs download and install (https://nodejs.org/en/download/)
    3. Run the command git clone git://develop.git.wordpress.org/ wordpress-develop in command line.
    4. Run the command `cd wordpress-develop` in command line.
    5. Run the command ` npm install ` in command line.
    6. Run the command ` npm run dev ` in command line.
    7. Install wordpress in the wordpress-develop/src folder and make your changes
    8. Run the command ` git diff > 30000.diff ` in command line. It will create the 30000.diff file.

  • Change colourful Image to black and white Image using CSS

    During My Professional web development, I need a black and white image of a colorful image. At that time, I have decided that I would not use Adobe Photoshop or Any Other Photo Editor Software, but I would like to use CSS.

    I have got many solutions from google, but There was no cross-browser compatibility. Finally, after googling, I got cross-browser compatible CSS to make the image black and white and remove that effect.

    To make the Image black and white, I have used the below CSS :

    .black-white-img { filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }


    And to remove the effect of black and white, I have used the below CSS:

    .colorful-img { filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); -webkit-filter: grayscale(0%); }

  • Implement DropzoneJS with PHP

    What is DropzoneJS?

    DropzoneJS is a javascript library that helps to upload multiple files using AJAX. DropZoneJs gives Drag and Drop File Upload Functionality. There are common questions to us as web-developer how we allow users to allow upload multiple files. DropZoneJs is also previewing images thumbnail in the upload preview area. DropZoneJs is compatible with Bootstrap upload file UI. We can additionally restrict uploading only a single file upload to specific numbers of file upload.

    DopzoneJS is easy to implement for a newbie PHP developer.

    Benefits of DopzoneJs:

    • Easy to implement
    • Highly Customizable
    • Easy to custom configuration
    • Not Depend on JQuery
    • Lightweight
    • Drag and Drop File Upload

    Integrate or Implement DropzoneJS in Php:

    • To implement dropzone we need dropzone js file and css files
    • First, you should download the dropzone project from https://github.com/enyo/dropzone.
    • Copy download folder from that DropZoneJs project folder DropZoneJs and paste it into our project folder. In our case this our project folder is upload_demo.
    • Rename that download folder as DropZoneJs in our project folder.
    • Now we have to include javascript and CSS in our webpage file:
    <script src="DropzoneJS/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="DropzoneJS/css/dropzone.css" />
<link rel="stylesheet" type="text/css" href="DropZoneJs/css/basic.css" />
    • Copy and paste below HTML code in the web-page where you want to put drag and drop UI:
    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
</form>
    • Copy below code in upload.php file:
    <?php
$ds = DIRECTORY_SEPARATOR;
$upload_path = "uploads"; 
if($_FILE["file"]) {
    move_uploaded_file($_FILES["file"]["tmp_name"], $upload_path .$ds. $_FILES["file"]["name"]);
}

Prashant Baldha on WordPress

A WordPress Developer and Core Contributor

Skip to content ↓