See Coding | Learn More | Let's Improve our Coding Knowledge

See Coding offers easy, practical solutions in PHP, CSS, Magento, WordPress, JavaScript, jQuery, and more. Our content is designed to simplify coding concepts, providing tips and step-by-step guides to help developers of all levels enhance their coding skills. With a focus on real-world applications, we cover debugging, optimization, and best practices, keeping you updated on the latest in the field. Whether you’re a beginner or an experienced coder, See Coding is here to support your learning.

Wordpress- WordPress Post Pagination without plugin

STEP 1. Add the following function to your functions.php file:

function pagination($pages = '', $range = 2)
{  
     $showitems = ($range * 2)+1;  
 
     global $paged;
     if(empty($paged)) $paged = 1;
 
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
 
     if(1 != $pages)
     {
         echo "<div class="pagination">";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href="".get_pagenum_link(1)."">«</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href="".get_pagenum_link($paged - 1)."">‹</a>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href="".get_pagenum_link($i)."" class="inactive">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">›</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($pages)."">»</a>";
         echo "</div>\n";
     }
}

STEP 2. To style it, add the following to your stylesheet (typically style.css).

.pagination {
 clear:both;
 padding:20px 0;
 position:relative;
 font-size:11px;
 line-height:13px;
}
.pagination span, .pagination a {
 display:block;
 float:left;
 margin: 2px 2px 2px 0;
 padding:6px 9px 5px 9px;
 text-decoration:none;
 width:auto;
 color:#fff;
 background: #555;
}
.pagination a:hover{
 color:#fff;
 background: #3279BB;
}
.pagination .current{
 padding:6px 9px 5px 9px;
 background: #3279BB;
 color:#fff;
}

STEP 3: Final step, Put in your template file:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$arg= array('post_type' => 'post-type',
   'taxonomy' => 'texonomy-slug',
   'term'=> 'term-slug',
   'paged' => $paged,
   'posts_per_page' => 5,
   'orderby' => 'date',
   'post_status'=>'publish'                                                                      
     );
$loop = new WP_Query($arg);
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
 <!-- Show loop content... -->
<?php endwhile; ?>
 
<?php if (function_exists("pagination")) {
    pagination($loop->max_num_pages);
} 

Wordpress plugin - Category and Taxonomy Image

Features :

Setting for taxonomy,image field to be enabled.
Very simple in use
Can be customized easily.

Installation:

Unzip into your /wp-content/plugins/ directory. If you're uploading it make sure to upload the top-level folder. Don't just upload all the php files and put them in /wp-content/plugins/.
Activate the plugin through the 'Plugins' menu in WordPress
Go to your WP-admin ->Settings menu a new "Taxonomy Image" page is created.
Go to your WP-admin ->Settings ->Taxonomy Image displayed in the taxonomies list form where you can select the taxonomies you want to include it in WP Custom Taxonomy Image.
Go to your WP-admin select any category/term ,here image text box where you can manage image for that category/term.
you can use the following function into your templates to get category/term image:

if (function_exists('get_wp_term_image'))
{
   $meta_image = get_wp_term_image($term_id); 
   //It will give category/term image url 
}
 
echo $meta_image; // category/term image url

where $term_id is 'category/term id'

Screenshots :

WP Custom Taxonomy Image Plugin allow you to add image with category/taxonomy..

Wordpress plugin - Client Logo Carousel

Display client logos responsive carousel with the help of a shortcode in editor as well as template page. Having different carousel settings.

Features :

Simple and light weight
Fully responsive
Having different settings in admin
Ability to add client links to each logo
Auto slide option

Installation:

Upload the folder "wp-client-logo-carousel" to "/wp-content/plugins/" '
Activate the plugin through the "Plugins" menu in WordPress .
Update settings for carousel going to wp-admin->WP Client Logo->Logo Carousel Settings
Add client logo going to wp-admin->WP Client Logo->Add New Client Logo..
Call shortcode to your wordpress editor directly, by using

1	`[wpaft_logo_slider]`

Call shortcode to your php template file using

1	`echo` `do_shortcode('[wpaft_logo_slider]');`

Carousel By category *
To show logos from a particular category. We can call shortcode to our wordpress editor directly, by using

1	`[wpaft_logo_slider category="SLUG OF CAROUSEL CATEGORY"]`

* And we can call shortcode to our php template file using

1	`echo` `do_shortcode('[wpaft_logo_slider category="CAROUSEL CATEGORY SLUG"]');`

NOTE: Be sure the 'SLUG OF CAROUSEL CATEGORY' is the slug of category.

Screenshots :

Download plugin:

Magento 1.9 - getBaseUrl retrieving different urls

Magento getBaseUrl retrieving different urls

There are multiple ways. For examples:-

1. http://yourdomain.com/

1	`echo` `Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);`

2. http://yourdomain.com/index.php/

1	`echo` `Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK);`

3.http://yourdomain.com/js/

1	`echo` `Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);`

4.http://yourdomain.com/media/

1	`echo` `Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);`

5.http://yourdomain.com/skin/

1	`echo` `Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);`

Wordpress- hook to auto login after registration

Question: How can an user auto logged in after registration in wordPress?
Answer: Using below hook/action/code, user will auto login after registration in wordPress.

function _new_user_auto_log_in($user_id){
  if(!is_user_logged_in()){
    $secure_cookie = is_ssl();
    $secure_cookie = apply_filters('secure_signon_cookie', $secure_cookie, array());
    global $auth_secure_cookie;
    $auth_secure_cookie = $secure_cookie;
    
    wp_set_auth_cookie($user_id, true, $secure_cookie);
    $user_info = get_userdata($user_id);
    do_action('wp_login', $user_info->user_login, $user_info);
 
  }
}
add_action('user_register', '_new_user_auto_log_in');

Wordpress - Update WordPress URLS in Database When Site is Moved to new Host

QUESTION: How we can change Change and Update WordPress URLS in Database When Site is Moved to new Host?

ANSWER: When migrating a WordPress site to a new URL either to a live production site or a testing development server, the new URL strings in the MySQL database need to be changed and updated in the various MySQL database tables.

First of all, we have do a MySQL database export of the old database on the old server, create a new blank database on the new server, import the old data either in PHPMyAdmin or mysql

After that we have to use below query as below. Also if needed change the table prefix values where applicable (i.e. wp_ )

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldurl', 'http://www.new_url') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.oldurl','http://www.new_url');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldurl', 'http://www.new_url');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.oldurl','http://www.new_url');

For reference :

Wordpress- How to Stay Logged in for Longer Periods

Question: How to stay logged in for longer periods in wordPress?
Answer: Using below hook/filter/code user will stay stay logged in for longer periods in wordPress.

// WordPress filter to Stay logged in for longer periods
add_filter( 'auth_cookie_expiration', 'keep_me_logged_in' );
function keep_me_logged_in( $expirein ) {
    return 31556926; // 1 year in seconds
}

Magento - How to show all products of a category in only one page

Question: How can we show all products of a category in only one page?
Answer: You can find the solution in Magento backend,

it's like this :
Configuration > catalog > frontend > Allow All Products per Page > yes

Woocommerce- Change number or products per row to 3

Question: How can we change number or products per row to 3 in woocommerce?
Answer: We can this adding below filter in functions.php

// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 3; // 3 products per row
    }
} 

SSH- How to export/import a MySQL database via SSH

Question: How can we export/import a MySQL database via SSH commands?

Answer: we can export/import a MySQL database using below commands.

USERNAME - the MySQL user assigned to your database.

DATABASE - the name of your MySQL database.

1. Exporting a MySQL database

1	`mysqldump -uUSERNAME -p` `DATABASE` `> backup.sql`

2. Importing a MySQL database

1	`mysql -uUSERNAME -p` `DATABASE` `< backup.sql`

SSH- How to zip a folder via SSH Terminal

This is how you can zip a folder via SSH on your Linux server. Works on Debian and other servers.

1	`zip -r filename.zip foldername/`

jQuery- Stop YouTube video within iFrame on external Button click

//First get the  iframe URL
var url = jQuery('#YourIFrameID').attr('src');
 
//Then assign the src to null, this then stops the video been playing
jQuery('#YourIFrameID').attr('src', '');
 
// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
jQuery('#YourIFrameID').attr('src', url);

jQuery- show div on hover - hide div on mouseout

Question: How can we show div on hover and hide div on mouseout ?

Answer: Using below example code we can do this.

HTML

<a href="#" class="mark">hover anchor</a>
<div class="icontent">
  <p>
    lorem ipsum dolor sit amet......
  </p>
</div>

(function(){
  var del = 200;
  $('.icontent').hide().prev('a').hover(function(){
    $(this).next('.icontent').stop('fx', true).slideToggle(del);
  });
})();

Magento 1.9 - Add to cart button on upsell product page in magento

To add "add to cart" button on upsell product page-

Follow below steps : -

STEP 1. open the upsell.phtml page:-

i.e.

1	`app/design/frontend/default/your theme/template/catalog/product/list/upsell.phtml`

STEP 2. Put the code where button to show-

<form action="<?php echo $this->getAddToCartUrl($_link) ?>" method="post" id="product_addtocart_form_<?php echo $_link->getId()?>" <?php="" if($_link-="">getOptions()): ?> enctype="multipart/form-data"<!--php endif; ?-->>
          <!--php if(!$_link--->isGrouped()): ?>
          <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo ($this->getMinimalQty($_link)?$this->getMinimalQty($_link):20) ?>">
          <label for="qty"><!--php echo $this--->__('Qty') ?>:</label>
          <!--php endif; ?-->
          <button type="button" onclick="this.form.submit()"><span><span><span><!--php echo $this--->__('Add to Cart') ?></span></span></span></button>
        </form>

Enjoy:)

Ajax- submit form using ajax (With file/ image)

Below is the HTML and script to submit form using ajax (With file/ image)

HTML

<form action="#" name="uploader1" method="post" enctype="multipart/form-data" id="MyUploadForm">
    <span class="img1">Image 1</span><input name="file_upload" id="imageInput" type="file">
    <input type="submit" name="submit">
    <span id="success1"></span>
</form>

Script

jQuery("form[name='uploader1']").submit(function(e) {
        var formData = new FormData(jQuery(this)[0]);
        jQuery.ajax({
            url: "http://your-domain/processupload.php",
            type: "POST",
            data: formData,
            async: false,
            success: function (msg) {
               // alert(msg)
                jQuery( "#success1" ).html(msg);
            },
            cache: false,
            contentType: false,
            processData: false
        });
 
        e.preventDefault();
    });

Note: Please be sure, jQuery libary has included for the page.

jQuery- Toggle Up and Dowm

HTML:

<div id="faq-list">
 <div class="overflow">
    <div class="to-bottom-border">
    <h2 class="ques">Click 1</h2>
    <div style="display:none;" class="answer">
     <p>Expanded 1</p>
     </div>        
     </div> 
 
<div class="to-bottom-border">
    <h2 class="ques">Click 2</h2>
    <div style="display:none;" class="answer">
     <p>Expanded 1 </p>
     </div>        
     </div>      
</div>
</div>

SCRIPT:

jQuery(document).ready(function() {
    jQuery('#faq-list h2').click(function() {
       jQuery(this).next('.answer').slideToggle(500);
       jQuery(this).toggleClass('close');
        
    });
}); // end ready

Important: Please make sure, jQuery library is included in the page.

Wordpress- Ajax Pagination (How to implement pagination on a custom WP_Query Ajax ?)

Question: How can we implement pagination on a custom WP_Query Ajax ?

Answer: We can follow the following steps.

1. Load More link.

1	`<a` `id="more_posts"` `href="#">Load More</a>`

2. Javascript: - Put this at the bottom of the file.

var ajaxUrl = "<!--php echo admin_url('admin-ajax.php')?-->";
 var page = 1; // What page we are on.
 var ppp = 3; // Post per page
 
 $("#more_posts").on("click",function(){ // When btn is pressed.
     $("#more_posts").attr("disabled",true); // Disable the button, temp.
     $.post(ajaxUrl, {
         action:"more_post_ajax",
        // offset: (page * ppp) + 1,
         offset: (page * ppp),
         ppp: ppp
     }).success(function(posts){
         page++;
         $(".name_of_posts_class").append(posts); // CHANGE THIS!
         $("#more_posts").attr("disabled",false);
     });
});

3. Put this in the functions.php file.

function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");
 
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    );
 
    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post();
       the_content();
    }
 
    exit;
}
 
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

4. Enjoy :)

PHP- How can we convert string to slug?

Below is the function to convert string to slug.

function createSlug($str, $delimiter = '-'){
 
$slug = strtolower(trim(preg_replace('/[\s-]+/', $delimiter, preg_replace('/[^A-Za-z0-9-]+/', $delimiter, preg_replace('/[&]/', 'and', preg_replace('/[\']/', '', iconv('UTF-8', 'ASCII//TRANSLIT', $str))))), $delimiter));
   
 return $slug;
 
}

For example:

$str= 'this is slug'; //If this is the string which we have to convert as slug
$createdSlug= createSlug($str); //Call funtion
echo $createdSlug; // Print output

Output:

1	`this-is-slug`

Wordpress- How to disable responsive images srcset in WP 4.4+

We have to just paste below code in theme's function.php

//disable src set
function aft_disable_srcset( $sources ) {
    return false;
}
add_filter( 'wp_calculate_image_srcset', 'aft_disable_srcset' );

Wordpress- How can we customize custom logo dimension in child theme?

Question: How can we customize custom logo dimension in child theme?

Answer: Putting following code/hook in child theme functions.php, logo dimension could be customized.

If we want to add width=500 and height=200 for logo, we can use below filter.

add_action( 'after_setup_theme', 'child_theme_logo_customize', 99 );
function child_theme_logo_customize() {
    add_theme_support( 'custom-logo', array(
        'width'  => 500,
        'height' => 200,
    ) );
} 

CSS- Creating full width (100% ) container inside fixed width container.

Question: How can we create full width (100% ) container inside fixed width container with CSS?

Answer: Some times we need to add a full width containers (which spans 100% of window) inside a container which has a fixed width and aligned center.

Like below screenshot-

HTML

<div class="container" style="width: 750px; margin: 0 auto;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
<div class="row-full">
     --- Full width container ---
</div>
 
 <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
 
</div>

CSS

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 left: 50%;
 background-color:red;
}

Pages