DEV Community: Muhammad Ahmad

Drag and Drop Rows in WordPress Using jQuery UI

Muhammad Ahmad — Sat, 25 Nov 2023 12:34:52 +0000

Introduction:

As WordPress developers, we often find ourselves in situations where we need to create custom plugins to cater to the unique requirements of our clients. Recently, I encountered a challenge while developing a WordPress plugin for a client who required a user-friendly way to manage data through sortable rows with drag-and-drop functionality. Surprisingly, the resources available on this topic were limited, and I faced difficulties finding a comprehensive guide.

In an effort to bridge this gap and assist fellow developers facing similar challenges, I’ve decided to share my insights and the solution I crafted for implementing sortable rows with drag-and-drop in WordPress. This article serves as a guide for those seeking a clear and detailed explanation of the process. So, whether you’re developing a custom plugin or simply interested in enhancing your WordPress skills, this article is tailored for you. Let’s dive into the world of sortable tables and make the data management experience smoother for both developers and end-users.

Checkout the complete guide for creating sortable rows in WordPress.

How to Make Images Retina-Ready for your WordPress Theme without any plugin?

Muhammad Ahmad — Tue, 17 Jan 2023 18:50:58 +0000

Step 1: Define Image Sizes

`add_action( 'after_setup_theme', function(){

$image_sizes = [
    [
        'size'      =>  'thumbnail',
        'width'     =>  150,
        'height'    =>  150
    ],
    [
        'size'      =>  'medium',
        'width'     =>  300,
        'height'    =>  300
    ],
    [
        'size'      =>  'medium_large',
        'width'     =>  768,
        'height'    =>  0
    ],
    [
        'size'      =>  'large',
        'width'     =>  1024,
        'height'    =>  1024
    ]
];

foreach( $image_sizes as $sizes ) {
    add_image_size( sprintf('%s', $sizes['size']), $sizes['width'], $sizes['height'] );
    add_image_size( sprintf('%s@%dx', $sizes['size'], 2), $sizes['width']*2, $sizes['height']*2 );
    add_image_size( sprintf('%s@%dx', $sizes['size'], 3), $sizes['width']*3, $sizes['height']*3 );
}

} );`

Step 2: Insert Retina Sizes in `SRCSET`

`add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {

$img_id         = $attachment->ID;
$requested_image    = wp_get_attachment_image_src( $img_id, $size );
$res            = ['2x', '3x'];
$srcset         = [];
$size_args          = [
    'width'     => $requested_image[1],
    'height'    => $requested_image[2]
];

$srcset[] = $requested_image[0] .' 1x';
foreach($res as $r) {
    $r_img = $size .'@'. $r;
    $r_src = wp_get_attachment_image_src($img_id, $r_img);
    if($r_src[3] == true) {
        $srcset[] = esc_url($r_src[0]) .' '. $r;
    }
}

$attr['src']    = $requested_image[0];
$attr['srcset'] = implode( ', ', $srcset );
unset($attr['sizes']);

return $attr;

}, 10, 3 );`

How to Make Images Retina-Ready for your WordPress Theme without any plugin?

Let's first understand why its important for your website to retina-ready nowadays. With the rise of very high density "super retina" displays in the newest

ahmadthedev.com

Have fun coding!

How to Add Numbered Pagination in WordPress without using any plugin?

Muhammad Ahmad — Wed, 08 Apr 2020 19:41:30 +0000

Pagination plays a very important part in websites creation. Basically, it allows users to page back and forth through multiple pages of content. It also helps you to control the length of the page.

Lets discuss some basics but important questions

1. Paginate_links()

Function paginate_links() is the WordPress’s builtin function and can be used to create a paginated link list for any area.

2. Why do you need an unlikely integer in pagination?

The get_pagenum_link( $big ) will create an URL, not a link based on the number provided in the first parameter. This function is used to get the basic pattern for the URL, and the high integer is used here because we must provide an integer as an argument.

3. What is the difference between `get_query_var('paged')` and `get_query_var('page')`?

The function get_query_var() is used to get the values from $wp_query public query variables, and in this case that is page and paged. These two parameters and their values are used by WP_Query to calculate pagination and more importantly the offset of posts according to page numbers.
paged used on the home, blog, archive pages, and pages to calculate pagination. 1st page is 0 and from there the number corresponding to the page number.
page use on a static front page and single pages for pagination. By pagination on single pages, I mean that single posts can be broken down into multiple pages.

4. Why we use wp_reset_postdata()?

You need to use wp_reset_postdata() after every custom WP_Query() to resets the value of the global $post variable to the post property of the main query.

How to create a custom WordPress breadcrumb without a plugin?

Muhammad Ahmad — Mon, 06 Apr 2020 14:20:19 +0000

Breadcrumbs are navigation links, used to display all the pages leading from the home page. This is placed at the top of the page and helps to backward navigation. You guys may think what is the purpose of this post as there are tones of plugins that are doing the same job. Well, the answer is simple the more plugins or external resources you use, the more heavy and hard to maintain your website.

DEV Community: Muhammad Ahmad

Drag and Drop Rows in WordPress Using jQuery UI

How to Make Images Retina-Ready for your WordPress Theme without any plugin?

Step 1: Define Image Sizes

Step 2: Insert Retina Sizes in SRCSET

How to Make Images Retina-Ready for your WordPress Theme without any plugin?

How to Add Numbered Pagination in WordPress without using any plugin?

Lets discuss some basics but important questions

1. Paginate_links()

2. Why do you need an unlikely integer in pagination?

3. What is the difference between get_query_var('paged') and get_query_var('page')?

4. Why we use wp_reset_postdata()?

How to create a custom WordPress breadcrumb without a plugin?

ahmadthedev / wp-breadcrumb-function

Step 2: Insert Retina Sizes in `SRCSET`

3. What is the difference between `get_query_var('paged')` and `get_query_var('page')`?