Wordpress- Disable update notification for individual single plugin

Question: How can we disable 'update notification' for individual single plugin in wordPress?
Answer: Using below filter we can disable 'update notification' for individual single plugin in wordPress.

/******/
/* Disable update notification for individual single plugin
/******/
function filter_plugin_updates( $value ) {
    unset( $value->response['akismet/akismet.php'] );
    return $value;
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates' );

SSH- List of Basic SSH Commands

SSH CommandExplanation
lsShow directory contents (list the names of files).
cdChange Directory.
mkdirCreate a new folder (directory).
touchCreate a new file.
rmRemove a file.
catShow contents of a file.
pwdShow current directory (full path to where you are right now).
cpCopy file/folder.
mvMove file/folder.
grepSearch for a specific phrase in file/lines.
findSearch files and directories.
vi/nanoText editors.
historyShow last 50 used commands.
clearClear the terminal screen.
tarCreate & Unpack compressed archives.
wgetDownload files from the internet.
duGet file size.

CSS- Responsive Masonry Layout using Only CSS without jQuery

Question: How can we do responsive Masonry Layout using Only CSS without jQuery?
Answer: Below are the code and output responsive Masonry Layout using Only CSS without jQuery.
HTNL
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.
CSS
*, *:before, *:after {box-sizing:  border-box !important;}
article {-moz-column-width: 13em; -webkit-column-width: 13em;-moz-column-gap: 1em; -webkit-column-gap: 1em; }
section {display: inline-block;margin:  0.25rem;padding:  1rem;width:  100%; background:  #efefef;}

OUTPUT

SSH- How to create php files in /var/www folder?

Question:  How can we create php files in /var/www folder using SSH command?
Answer:
-Create the file

sudo touch hello.php

-Open the file

sudo vi hello.php

Enter write mode (we were in command mode initially) by pressing  a  (note that    vi   is case sensitive)

After that, press Esc (to change to command mode) and type :wq Check if everything is fine with
cat hello.php

However, it's probably a better idea to use editors such as vim or nano as work with them is a lot simpler than that.

Wordpress- Contact form 7 : Validate comma separated urls

Question: How we can validate comma separated urls in for Contact form 7 plugin?

Answer: We can do this with contact form 7 filter.

For Example:

- If in form field is -

[textarea* yoururls]

- If we will put the url comma seperated .

- We can use below filter to custom validation in functions.php

add_filter( 'wpcf7_validate_textarea*', 'function_validate_urls', 20, 2 );
function function_validate_urls( $result, $tag ) {
    if ( 'yoururls' == $tag->name ) {
        $yoururls = isset( $_POST['yoururls'] ) ? trim( $_POST['yoururls'] ) : '';
        $error='noerror';
        $sepurl = explode(",",$yoururls);
        foreach($sepurl as $sep){
             $sep = preg_replace('/\s+/', '', $sep);
            if($sep!=''){
                if (filter_var($sep, FILTER_VALIDATE_URL)) {
                   // valid
                } else {
                    //invalid
                    $error= 'error';
                }
            }
        }
        if ( $error == 'error' ) {
           $result->invalidate( $tag, "Please check all urls in exact format." );
           // $result->invalidate( $tag, $error );
        }
    }

    return $result;
}

SSH- Change all files and folders permissions of a directory to 644/755

SSH- Change all files and folders permissions of a directory to 644/755
 
find * -type d -print0 | xargs -0 chmod 0755 # for directories
find . -type f -print0 | xargs -0 chmod 0644 # for files
For WordPress -
All files should be 664.
All folders should be 775.
wp-config.php should be 660.

Magento 1.9 - How can we make a slider of product thumbnail images on product page ?

Question: How can we make a slider of product thumbnail images on product page in Magento 1.9.?


Answer: For this, we can follow below-
 Go to app/design/frontend   you_theme  catalog/product/view/media.phtml
And can use below codes:

<?php echo $this->getChildHtml('after'); ?>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
  
    <ul id="prod-thumb" class="product-image-thumbs owl-carousel owl-theme">
    <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php
        if (($filterClass = $this->getGalleryFilterHelper()) && ($filterMethod = $this->getGalleryFilterMethod()) && !Mage::helper($filterClass)->$filterMethod($_product, $_image)):
            continue;
        endif;
        ?>
        <li class="item">
            <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                     width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
            </a>
        </li>
    <?php $i++; endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>


<script type="text/javascript" src="<?php echo  Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>js/owlcarousel/owl.carousel.js"></script>

<script>
jQuery(document).ready(function() {

  jQuery("#prod-thumb").owlCarousel({
    items : 3,
    itemsCustom : [
      
        [320, 3],
        [480, 4],
        [600, 5],
        [760, 4],
        [900, 4],
      ],   
    lazyLoad : true,
    navigation : true,
    pagination: false
  });

});
</script>

 <style>


/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 50%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
   
.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

  </style>

WordPress: How to Add Pagination to a List of Categories

Question: How can we integrate pagination with a list of categories in WordPress?

Answer: Below is the code to integrate pagination with a list of categories in WordPress.

 
$args = array(
	'parent' => 0,
	'hide_empty' => 0
);

$categories = get_categories( $args );
$cat =  ceil(count( $categories )/5);    
$j=0;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = 5;
$offset = ($posts_per_page * $paged) - 5 ;
$args = array(
	'orderby' => 'name',
	'parent' => 0,
	'hide_empty'         => 0,
	'number' => $posts_per_page,
	'offset' => $offset,
	'posts_per_page' => 5,
	'paged' => $paged
	//'exclude'            => '1,3,24,9'
);
$categories = get_categories( $args );
foreach ( $categories as $category ) {
 $j++;
 echo '' . $category->name . '
'; } $big = 999999999; // need an unlikely integer echo '';

Here’s an explanation of the provided code:

This PHP script integrates pagination with a list of WordPress categories, enabling you to display a limited number of categories per page. Here's a breakdown of the code:

  1. Initial Arguments ($args):
    The $args array specifies the query parameters for retrieving categories:

    • 'parent' => 0 ensures that only top-level categories are fetched.
    • 'hide_empty' => 0 includes empty categories in the results.
  2. Total Pages Calculation ($cat):
    The total number of pages is calculated by dividing the total count of categories by the number of categories per page (5 in this case), using the ceil() function to round up.

  3. Pagination Variables:

    • $paged retrieves the current page number from the query variables. Defaults to 1 if not set.
    • $posts_per_page defines the number of categories displayed per page (set to 5).
    • $offset calculates the starting index for the current page's categories.
  4. Updated Arguments for Pagination:
    A new $args array is created for fetching paginated categories:

    • 'number' and 'posts_per_page' limit the results to 5 per page.
    • 'offset' determines where the results start for the current page.
  5. Fetch and Display Categories:

    • The get_categories() function fetches the categories based on $args.
    • A foreach loop iterates through each category and outputs a hyperlink to the category's archive page using get_category_link() and the category's name.
  6. Pagination Links:

    • The paginate_links() function generates the pagination controls.
    • The 'base' parameter sets the URL structure, with %#% replaced by the page number.
    • 'format' appends the page number as a query string (?paged=%#%).
    • 'prev_text' and 'next_text' define custom labels for the "previous" and "next" buttons.
    • 'current' indicates the current page, and 'total' specifies the total number of pages ($cat).

The result is a paginated list of top-level categories displayed as links, with navigation controls to move between pages.

Let me know if you need further clarification!

Magento 1.9 - Cannot display image inserted by WYSIWYG editor

I finally solved the problem. The cause of the problem is unprocessed shortcodes in the html content, which is the {{ media url="..." }} statement. Before echo this statement, the html content should be process by the processor from helper "cms". Below is the code:

$html_content = $content_from_db['content'];
$html_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($html_content);
echo $html_content;

CSS- Star Rating Input using CSS and HTML

Example:

HTML:
Rating:
  
 
 
 
 
 
 
 
 
 
 
  



CSS:
.starRating:not(old){
  display        : inline-block;
  width          : 7.5em;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

.starRating:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}

.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.png');
  background-size : contain;
}

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background      : url('star-on.png');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}
Note: Make sure that two images 'star-off.png' and 'star-on.png'  are existing, which you are using in CSS .

jQuery- How can we do multiple drop-down values auto suggestions?

Question: How can we do multiple drop-down values Auto suggestions?
Answer: We can do this using below codes using choosen libraries. We can test the code putting in a single html file test.html
Code 1: Include jQuery/CSS libraries





Code 2: jQuery script
$(function() {
    $(".choosen-select").chosen();
});
Code 3: HTML

Output

jQuery/HTML- Count characters in textarea

Topic: 1.Character Counting Remaining on textarea using jQuery.

Topic: 2. jQuery- Count characters in textarea

Topic: 3. How can I count characters in textarea on onkeyup() event using jQuery?

Solution:

We can find above topics solutions in below code.

STEP 1: Include jQuery

 

STEP 2: Script

 
function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);
        }
};

STEP 3: HTML

 
 
Remaining limit:500 characters

SSH- Useful SSH commands

SSH- Useful SSH commands

1. Access monitor

 mysql -u [username] -p; (will prompt for password)

2. Show all databases:

 show databases;

3. Access database:

 mysql -u [username] -p [database] (will prompt for password)

4.Create new database:

 create database [database];

5.Select database:

 use [database];

6. Determine what database is in use:

 select database();

7. Show all tables:

 show tables;

8. Show table structure:

 describe [table];

9. List all indexes on a table:

 show index from [table];

10. Create new table with columns:

 CREATE TABLE [table] ([column] VARCHAR(120), [another-column] DATETIME);

11. Adding a column:

 ALTER TABLE [table] ADD COLUMN [column] VARCHAR(120);

12. Adding a column with an unique, auto-incrementing ID:

 ALTER TABLE [table] ADD COLUMN [column] int NOT NULL AUTO_INCREMENT PRIMARY KEY;

13. Inserting a record:

 INSERT INTO [table] ([column], [column]) VALUES ('[value]', [value]');

14. MySQL function for datetime input:

 NOW()

15. Selecting records:

 SELECT * FROM [table];

16.Explain records:

 EXPLAIN SELECT * FROM [table];

17. Selecting parts of records:

 SELECT [column], [another-column] FROM [table];

18. Counting records:

 SELECT COUNT([column]) FROM [table];

19.Counting and selecting grouped records:

 SELECT *, (SELECT COUNT([column]) FROM [table]) AS count FROM [table] GROUP BY [column];

20. Delete all records in a table:

 truncate table [table];

21. Removing table columns:

 ALTER TABLE [table] DROP COLUMN [column];

22. Deleting tables:

 DROP TABLE [table];

23.Deleting databases:

 DROP DATABASE [database];

24. Custom column output names:

 SELECT [column] AS [custom-column] FROM [table];

25. Export a database dump:

 mysqldump -u [username] -p [database] > db_backup.sql

26. Import a database dump (more info here):

 mysql -u [username] -p -h localhost [database] < db_backup.sql

27. Logout:

 exit;

Opening YouTube Videos on a Custom Button Click Using jQuery

Welcome to See Coding!

At See Coding, we simplify web development through practical tutorials and examples. Today’s post shows how to create a YouTube video modal that opens on a button click using jQuery. Perfect for websites, portfolios, or e-commerce platforms!

Step-by-Step Guide to Implementing a YouTube Modal

1. HTML Structure

Here’s a basic structure for the button and modal. (Replace VIDEO_ID with your YouTube video’s unique ID.)


2. CSS for Modal Styling

This CSS ensures your modal is responsive and visually appealing.

.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
.modal-content {
    width: 600px;
    max-width: 90%;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
}

3. jQuery for Button Click and Video Control

This script dynamically loads the video and handles modal events.

$(document).ready(function () {
    $(".open-video").on("click", function () {
        const videoUrl = $(this).data("video");
        $("#videoIframe").attr("src", videoUrl + "?autoplay=1");
        $("#videoModal").fadeIn();
    });

    $(".close, #videoModal").on("click", function () {
        $("#videoIframe").attr("src", "");
        $("#videoModal").fadeOut();
    });

    $(".modal-content").on("click", function (e) {
        e.stopPropagation();
    });
});


Engage With Us!

At See Coding, we love hearing from our readers.
💡 Have ideas for improvement?
📩 Need help customizing the code?
👉 Comment below or use our Conatct us.

WooCommerce – remove payment method from emails

Question: How can we remove payment method from emails in woocommerce?

Answer: We can use below woocommerce filter to remove payment method from emails in woocommerce.

add_filter( 'woocommerce_get_order_item_totals', 'custom_woocommerce_get_order_item_totals' );

function custom_woocommerce_get_order_item_totals( $totals ) {
  unset( $totals['payment_method'] );
  return $totals;
}