DEV Community: Raymundo CH

Git: using --interactive mode to commit specific parts of a file

Raymundo CH — Tue, 17 Jun 2025 02:02:06 +0000

Sometimes you want to commit only a few sections of a file rather than the whole file. In order to have more control over the contents of a commit we can implement the --interactive mode of the git add command.

Tracking the files with Git

Let's say that you just created a file called fruits.txt within the working directory and you want to save its contents into two different commits.

The file contains two words:

Bananas
Apples

By running the command git status we can see that the file is untracked:

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   countries.txt
        modified:   spanish.txt

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        fruits.txt

Firstly make Git track the file; in other words make Git aware that the file exists by running the next command:

git add -N fruits.txt

Then run git status and check out the output; now the file fruits.txt appears under the Changes not staged for commit heading which means Git it aware the file exists:

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   countries.txt
        new file:   fruits.txt
        modified:   spanish.txt

Running the --interactive mode to customize the commit

We can customize the contents of a commit not just on a file basis but on a line-by-line basis.

The command git addcan be used to customize the contents inside the staging area; in other words we can customize the commit:

Run the next command:

git add --interactive

In the prompt enter the keyword patch:

What now> patch

In my case the output looks as shown below:

   staged     unstaged path
  1:    unchanged        +1/-0 countries.txt
  2:        +0/-0        +2/-0 fruits.txt
  3:    unchanged        +1/-0 spanish.txt

In the prompt enter the number corresponding to the file fruits.txt as shown below:

Patch update>> 2

The output looks as shown below in my case; note the asterisc next to the entry for the fruits.txt file; which means such a file was selected. Press enter in the prompt as a confirmation:

  staged     unstaged path
  1:    unchanged        +1/-0 countries.txt
* 2:        +0/-0        +2/-0 fruits.txt
  3:    unchanged        +1/-0 spanish.txt
Patch update>>

Then the output displays the contents of the file; in this case two lines of text. Enter e in the command prompt to indicate that we want to customize which line of text will be included in the next commit and which one won't be included:

index 0000000..9584ef5
--- /dev/null
+++ b/fruits.txt
@@ -0,0 +1,2 @@
+Bananas
+Apples
(1/1) Stage addition [y,n,q,a,d,e,?]? e

The text editor opens and in order to indicate that one line won't ne included into the next commit let's add a # symbol at the beginning of the line:

# Manual hunk edit mode -- see bottom for a quick guide.
@@ -0,0 +1,2 @@
+Bananas
#Apples
# ---

Save the changes and exit the text editor. Now in the command prompt enter diff to see what's included in the staging area :

What now> diff

The output contains the files within the staging area and an overview of the additions and deletions made to the file. In the command prompt enter the number which represents the file to see its contents:

          staged     unstaged path
  1:        +1/-0        +1/-0 fruits.txt
Review diff>> 1

The output indicates that the words Bananas will be included into the next commit; note how the word Apples does not appear in the file anymore:

index 0000000..2db3da3
--- /dev/null
+++ b/fruits.txt
@@ -0,0 +1 @@
+Bananas

In the command promt enter quit to exit the --interactive mode:

What now> quit
Bye.

Now in order to see the contents of the file fruits.txt which ain't be included into the commit run the next command:

git diff fruits.txt

And the output looks as shown below:

diff --git a/fruits.txt b/fruits.txt
index 2db3da3..9584ef5 100644
--- a/fruits.txt
+++ b/fruits.txt
@@ -1 +1,2 @@
 Bananas
+Apples

The word Apples is not in the staging area and won't be included into the next commit.

Commit the changes

Run the next command:

git commit -m "some comment on the commit"

And the new commit will be created. Run git log to see the listing of commits available:

commit a722eda865765382bc3e88a0e750d6f316f22c0a (HEAD -> main)
Author: Raymunco CH <no@email.com>
Date:   Mon Jun 16 19:50:14 2025 -0600

    commit for Bananas

more commits appear here in my case....

Commiting the remaining text line

The word Apples remains unstaged and uncommited therefore let's create a commit for it.

Run the command:

git add fruits.txt

Once the file is into the staging area; let's run the next command to see the contents added to the staging area:

git diff --staged

the output looks as follows:

--- a/fruits.txt
+++ b/fruits.txt
@@ -1 +1,2 @@
 Bananas
+Apples

Once the word Apples is staged and ready to be commited then run the next command_

git commit -m "Commit for apples"

And that's it!! the contents of the file fruits.txt were splitted into two commits.

Happy Coding!!

Git : How to commit a few lines of code from several files?

Raymundo CH — Sun, 15 Jun 2025 01:54:16 +0000

Most of the times when making a commit with Git the files are staged and then those files are commited. Nevertheless sometimes we need to split a file into chunks and save those chunks into different commits. In other words sometimes we might need to commit a few lines of code only rather than the whole file. Here I share with you how to do it.

Adding the file to te staging area

First we must add the file to the staging area in case the file is untracked by Git. In this case I want to add the file inside the Deactivation folder:

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   tinyshortcode.php

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        Deactivation/
        FilterCurrency/

So I have to run the next Git command:

git add -N Deactivation/

And the staging area looks as shown below:

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        new file:   Deactivation/register.php
        modified:   tinyshortcode.php

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        FilterCurrency/

Picking up the desired lines in the first file

The commit will comprise lines of code from the files register.php and tinyshortcode.php.

Let's work with the file register.php by running the next Git command:

 git add --patch Deactivation/register.php

And let's enter the option e into the command prompt; e stands for edit and enables you to choose the lines of code you want to save in the next commit:

(1/1) Stage addition [y,n,q,a,d,e,?]? e

A text editor is opened in the console where you have to use # at the beginning of the lines which you want to remove from the commit; the remaining lines will be included into the commit:

@@ -0,0 +1,12 @@
+<?php
+
+function rch_register_deactivation_logic(){
+
#    delete_option("fruitsTableData");
+}
+
+
+register_deactivation_hook(
+    WP_PLUGIN_DIR."/tinyShortcode/tinyshortcode.php",
+    "rch_register_deactivation_logic"
+);

Take a closer look at the code above and see how only one line of the code will be removed and the remaining lines will be saved into the commit; the lines of code which start with + will be commited.

Run the next command to see the changes made. In other words you will see the lines of code to be included into the next commit:

git diff --cached

Also check out the staging area and see how it looks different:

On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   Deactivation/register.php

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   Deactivation/register.php
        modified:   tinyshortcode.php

Picking up the desired lines of the second file

Since the second file is already located in the staging area then we just have to run the Git command necessary to choose a few lines of code for the next commit:

 git add --patch tinyshortcode.php

A promt is displayed where we have to enter the option e:

(1/1) Stage this hunk [y,n,q,a,d,e,?]? e

A text editor is opened where we have to choose the lines to be removed from the commit by adding a # at the beginning of the line:

+require_once WP_PLUGIN_DIR."/tinyShortcode/Deactivation/register.php";
#require_once WP_PLUGIN_DIR."/tinyShortcode/Activation/register.php";

Now the staging area looks as shown below:

On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   Deactivation/register.php
        modified:   tinyshortcode.php

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   Deactivation/register.php
        modified:   tinyshortcode.php

Remember that you have to run the next command to see the staging area:

git status

Let's commit the changes

Once the staging area contains the lines of code we want to include in the next commit it's time to save the changes:

git commit -m "Add a description here..."

Don't forget to see the lines of code of the newly created commit with the command:

git show [commit hash]

And in order to see the listing of commits with their corresponding hashes use the command:

git log

Thanks for reading this article!! see you soon! Happy coding

Wordpress development - shortcodes and arrays as parameters

Raymundo CH — Thu, 05 Jun 2025 02:03:11 +0000

When inserting a shortcode into the Wordpress editor we can use strings or numbers as parameters; but what if we want to pass in an array as a parameter? How can we code a shortcode which handles arrays as parameters?

In this article I'll cover how to code a shortcode which receives arrays as parameters as well as how to pass in an array to a shortcode in the Wordpress editor.

Calling the add_shortcode function

First the add_shortcode must be called to configure a new shortcode; this function requires two parameters:

function rch_handle_render_table( $atts = [] ){}

 //shortcode logic will be here...

}
add_shortcode("render_table","rch_handle_render_table");

Note how the name of the function is prefix; this is important to prevent collisions with other functions from other plugins.

Formatting the array of parameters

Sometimes users insert a shortcode and when adding the parameters the user mistypes the parameters; let's say the name of the parameter is paramone and the user types in ParamOne which contains uppercases. That's the reason why the names of the parameters must be turned into lowercase so that the php code does not crash.

See the code below:


    $formattedAtts = array_change_key_case(
          $atts,
          CASE_LOWER
    );

The $atts array holds the parameters and the names of the parameters are the keys.

Unserializing the arrays passed in as parameters

Passing in the array directly into the shortcode when using the Wordpress editor is not possible; you must transform the array into a text string with an special format; that process is called serialization.

When the parameters are received they must be unserialized so that they can be used:

  if(isset($formattedAtts['header'])){

        $formattedAtts['header'] = unserialize($formattedAtts['header']);

    }

     if(isset($formattedAtts['body'])){

        $formattedAtts['body'] = unserialize($formattedAtts['body']);

    }

Overwriting the default parameters

Shortcodes must be able to work is case the parameters ain't passed in; therefore default parameters must be declared and overwritten only if the user passes in the required parameters:

 $finalAtts = shortcode_atts(
        array(
            "header" => array("#","Fruit Name","Fruit Price"),
            "body" => array(
                array(
                    "Fruit name 1","Fruit price 1"
                ),
                array(
                    "Fruit name 2","Fruit price 2"
                )
            )
        ),
        $formattedAtts
    );

The shortcode_atts function call replaces the default parameters with the corresponding parameters passed in. The first array represents the default parameters.

Generating the header of the table

In this case the shortcode displays a table; the php code necessary to generate the table header looks as follows:

 $htmlMarkup = "<table>
           <thead><tr>";

    foreach($finalAtts['header'] as $value ){

        $htmlMarkup .=  "<th>".$value."</th>";
    }

    $htmlMarkup .= "</tr></thead>";


    $htmlMarkup .= "<tbody>";

Generating the table body

The php code necessary to render the body of the table looks as shown below:

 foreach($finalAtts['body'] as $index => $singlerow ){

        $rowNumber = $index + 1;

        $htmlMarkup .= "<tr><td>".$rowNumber."</td>";

        foreach($singlerow as $value ){

            $htmlMarkup .= "<td>".$value."</td>";

        }

        $htmlMarkup .= "</tr>";
    }

    $htmlMarkup .= "</tbody>
    </table>";

Inserting the shortcode

Open the Wordpress block editor and insert the shortcode by using the shortcode block.

Below appears an screenshot of the shortcode with both parameters being used. Note how the values for the parameters are serialized text strings:

Remember that the values for the parameters must be arrays and also don't forget that there are many free online tools where you can serialize your arrays in a few clicks.

Below appears an screenshot of the render_table shortcode in action:

Wordpress development - creating a shortcode with parameters

Raymundo CH — Tue, 03 Jun 2025 03:16:30 +0000

Shortcodes are the method provided by Wordpress to embeed php code snippets into either a post or page. Since you are able to embeed custom php code into a publication therefore the possibilities are endless!

In this tutorial we are going to code a shortcode which renders a Table to the web browser; it can handle parameters.

Calling the add_shortcode function

Call the add_shortcode function and declare the callback function which runs when this shortcode is embeeded into a publication:

function handle_prices_table_shortcode($atts = [], $content = null){

//here the shortcode logic will be placed...

}

add_shortcode("prices_table","handle_prices_table_shortcode");

The above shortcode can be embeeded into a publication by inserting the text string [prices_table] into a publication's content.

Checking the shortcode type

Inside the function declaration add the next lines of php code:

if($content){
    return;
 }

In case the shortcode is used to enclose content then nothing is printed by the shortcode because the shortcode is not design to work with enclosed content. Shortcodes which enclose content are other type of shortcode and they won't be covered here.

Formatting parameters

When the users add parameters to the shortcode they can mistype the parameter and use uppercase letters like ParamOne instead of paramone; turning all parameters names into lowercase prevents the code from crashing.

Add the next lines of php code:

$formattedAtts = array_change_key_case(
      $atts,
      CASE_LOWER
  );

The previous php code transforms the parameters names into lowercase; the names of the parameters are saved as keys into an array.

Overriding default parameters

Chances are the user forgets to insert parameters. In that case the default parameters will be used:

$finalAtts = shortcode_atts(
    array(
        "header" => array("#","Fruit Name","Fruit Price"),
        "body" => array(
            array("Fruit 1","Price 1"),
            array("Fruit 2","Price 2")
        )
    ),
    $formattedAtts
);

The first array contains the default values; these values will be overriden with the values provided by the $formattedAtts array.

Creating the header of the table

The first parameter will contain the table header text strings; these values will be transformed into HTML markup as shown below:

$htmlMarkup = "<table class='table'>
       <thead><tr>";

       for($i = 0; $i <= count($finalAtts['header']); $i++ ){


          $htmlMarkup .= "<th>".$finalAtts['header'][$i]."</th>";


       }

    $htmlMarkup .= "</tr></thead><tbody>";

In short the previous code snippet is iterating over the values of the $finalAtts['header'] array.

Creating the body of the table

The next code snippet iterates over the values of the $finalAtts['body'] array and generates a row on each iteration:

 foreach($finalAtts['body'] as $index => $rowValues ){

        $htmlMarkup .= "<tr>";

        $num = $index + 1;

        $htmlMarkup .= "<td>".$num."</td>";

          foreach($rowValues as $record ){

            $htmlMarkup .= "<td>".$record."</td>";

          }

        $htmlMarkup .= "</tr>";

    }


    $htmlMarkup .= "</tbody>
  </table>";

Returning the HTML markup

At the bottom a return statement must be placed; remember that shortcodes must return some value always:

  return $htmlMarkup;

The following screenshot displays the table in action. In my case the Bootstrap CSS framework was added to the project so the look of your table will be a bit different:

Wordpress REST API - URL parameters

Raymundo CH — Mon, 02 Jun 2025 20:58:00 +0000

When working with the Wordpress REST API we can create our own endpoints and configure them according to our needs; one important feature of any API are URL parameters because they enable HTTP requests to include additional information. Let's analyze how to add those parameters to a given API endpoint.

The rest_api_init action hook

Each time we want to add custom endpoint we have to implement the rest_api_init action hook as shown below:


function rch_handle_params_request(){

 //call to register_rest_route() will be here...

}


add_action("rest_api_init","rch_handle_params_request");

The register_rest_route function

This function is required to configure an endpoint from scratch and as you can see it uses several parameters:

 register_rest_route(
        "customAPI/v1",
        "/post/(?P<id>\d+)",
        array(
            "methods" => "GET",
            "callback" => "rch_get_custom_post"
        )
    );

The parameters are explained next:

customAPI/v1 is the namespace or a way to group endpoints; it's like a prefix and must be unique throughout the API.
/post/(?P\d+) is the URL parameter configuration; note how a regular expression is used to check the format of the id number.
The HTTP method is set to GET which enables the route to have support for GET requests only.
The callback parameter is set to a reference to the function which handles the HTTP request and generates the reponse.

Breaking down the callback function

The next code snippet must be placed outside the rch_handle_params_request function declaration:

function rch_get_custom_post($request){


    $posts = get_posts(array(
        "numberposts" => -1,
        "post_type" => "post",
        "post_status" => "publish",
        "p" => $request['id']
    ));

    if(!$posts){

        return rest_ensure_response(new WP_Error(
            "rest_not_found",
            "The post does not exist",
            array(
                "status" => 404
            )
        ));

    }else{

        return rest_ensure_response($posts);

    }
}

I'm gonna try to sum up all the previous code so that you can understand it faster.

The get_posts function retrieves publications from Wordpress; two parameters are not very obvious; the first one is numberposts => -1 which indicates that all the posts matching the criteria must be retrieved and "p" => $request['id'] indicates that the id number of the matching publication must be equal to the property id of the request object; this property contains the value passed in via the URL parameter.

The if-block checks whether the $posts array is empty or not; when the $posts array is empty then an error object is retured otherwise the matching publication is returned.

Wordpress REST API - creating your first custom endpoint

Raymundo CH — Sun, 25 May 2025 03:22:29 +0000

Wordpress provides access to a REST API which can be implemented to transform a Wordpress installation into a Headless CMS. Therefore the frontend can be created by using any framework like React or Angular while the data is stored into Wordpress and consumed by means of the built-in REST API.

You can also configure custom endpoints; in order words you can create your own API and include it into a Wordpress installation.

This short tutorial covers how to add a custom endpoint to the Wordpress REST API.

Creating a new plugin and activating it

In order to create a custom API endpoint a new plugin must be created and activated so head over to the Plugins folder and add the folder called restPlugin inside; then create the file **restplugin.php **and add the next php code snippet:

<?php
/* 
Plugin Name: Rest Plugin
Description: This plugins generates a testing API
Author: YOUR-NAME
*/

The previous comment provides metadata regarding the plugin and it's used to indicate Wordpress that this folder is a plugin; also the metadata is shown within the Plugins screen.

Then head over to the Dashboard and inside the Plugins screen look for the plugin and activate it.

Adding a new file to the project

Add a new php file called register.php; this is the file where the php code will be added later on but before that it must be included into the project so open the file restplugin.php and add the next line below the :

require_once WP_PLUGIN_DIR."/restPlugin/register.php";

Creating the API endpoint

Open the register.php file and add the next code snippet inside:

<?php


function rch_handle_welcome_message(){

    return rest_ensure_response("Welcome to the restplugin API");
}


function rch_register_api_routes(){


    register_rest_route(
        "restplugin/v1",
        "/welcome-message",
       array(
        "methods" => "GET",
        "callback" => "rch_handle_welcome_message"
       )
    );
}


add_action("rest_api_init","rch_register_api_routes");

The rest_api_init hook is used to configure the REST API. The register_rest_route() function is called to add the new endpoint to the API.

The first parameter passed in to the function is called the namespace and it's like a prefix used to classify the endpoints or group the endpoints into a category. The namespace is very important because it prevents the endpoints from crashing with other endpoints from another plugin.

The second parameter is the path to the API resource; paths must also be unique within the same namespace to avoid collisions with other paths for other API resources.

The combination of the namespace and the path forms the route; later on it will be shown how to implement the route to access a given API resource.

The third parameter is an array which describes the HTTP methods allowed for the newly added API endpoint; in this case the GET method only. The function which handles the HTTP request for a given route and HTTP method is known as the endpoint and is indicated into the array as well.

Note that some people define an endpoint as the specific address for a given API resource which includes the HTTP method and the route.

Making an HTTP request to the API

Open the web browser and enter the next address into the address bar:

http://localhost/index.php/wp-json/restplugin/v1/welcome-message

In case the previous adress does not work you could also try the following address without the /index.php part:

http://localhost/wp-json/restplugin/v1/welcome-message

You should see the text "Welcome to the restplugin API" on the screen!

Thanks for reading through this tutorial! see you soon!

Wordpress development - configure a theme template by using a plugin

Raymundo CH — Wed, 14 May 2025 22:28:01 +0000

When you are developing a plugin you might come across a situatuion where you have to update a theme template or create a new one from scratch.

Under the previous circumstances the solution I've implemented is the use of the template_include filter.

I'm going to explain how this filter works and it's quite interesting and useful.

First call the add_filter() function as shown below and pass in the filter name as parameter:

<?php


function rch_add_custom_post_type_template($template){


    return $template;


}

add_filter("template_include","rch_add_custom_post_type_template");

Note how the function receives the $template variable which holds the path to the php file which contains the HTML markup and the php code.

Then let's add the logic to filter the web pages and locate the one we want to modify:

function rch_add_custom_post_type_template($template){

    if(is_singular("mycars")){


    }

    return $template;


}

add_filter("template_include","rch_add_custom_post_type_template");

Note how the is_singular() function was implemented to find the publication which contains content related to the custom post type called mycars.

Then the path to the template must be saved into a variable and returned as the result of the function:

 if(is_singular("mycars")){

    $template_path = WP_PLUGIN_DIR."/carsplugin/frontend/carsTemplate.php";

        if(file_exists($template_path)){

            return $template_path;
        }

    }

Remember that the constant called WP_PLUGIN_DIR holds the path to the plugins folder; it's important to note the difference between path and URL.