Web Development

Simple Timezone carousel with next and previous button to show different times of countries, using jQuery, php and css: WordPress or php based sites

allaboutbasic

Here is a simple timezone carousel to show time of different countries in carousel format. You can use Next and Previous button to show Next 4 countries time. I have shared you the corresponding php, html and css code. If you face any issue, feel free to comments. 


<div id="time-carousel" class="time-carousel">
  <?php 
    $timezone_identifiers = DateTimeZone::listIdentifiers(DateTimeZone::AMERICA | DateTimeZone::EUROPE);
    foreach($timezone_identifiers as $timezone) {
        $date = new DateTime('now', new DateTimeZone($timezone));
        echo '<div class="time-carousel-item">';
        echo '<h3>'.$timezone.'</h3>';
        echo '<p>' . $date->format('H:i') . '</p>';
        echo '</div>';
    }
  ?>
</div>
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>

<script>
jQuery(document).ready(function(){
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = jQuery(".time-carousel-item");
        for (i = 0; i < slides.length; i++) {
            if(i < slideIndex || i >= slideIndex + 4) {
                slides.eq(i).hide();  
            } else {
                slides.eq(i).show();
            }
        }
    }

   jQuery("#prev").click(function(event){
    event.preventDefault();
    var slides = jQuery(".time-carousel-item");
    slideIndex = Math.max(0, slideIndex - 4);
    showSlides();
});

jQuery("#next").click(function(event){
    event.preventDefault();
    var slides = jQuery(".time-carousel-item");
    slideIndex = Math.min(slides.length - 4, slideIndex + 4);
    showSlides();
});
});
</script>
<style>
	.time-carousel {
  display: flex;
  flex-wrap: wrap;
}
.time-carousel {
    display: flex;
    flex-wrap: wrap;
}
.time-carousel-item {
    width: 25%;
    padding: 10px;
    text-align: center;
}
	.time-carousel-item h3 {
    font-size: 18px;
    font-weight: bold !IMPORTANT;
}
</style>
WordPress Tricks

In elementor font family is used var( –e-global-typography-primary-font-family ) how to change this font?

allaboutbasic

To change the font family in Elementor, you can do the following:

  1. Go to the Elementor editor for the page or template where you want to change the font family.
  2. Click on the hamburger menu icon in the top left corner to open the Global Settings.
  3. Go to the Typography tab.
  4. Under the Primary Font section, you will see the option to change the font family.
  5. You can either choose a font from the dropdown menu or enter the name of a custom font you want to use.
  6. Click on the Save button and the new font family will be applied to all elements on your page that use the primary font.
WordPress Tricks

Create free Yoga instruction or teaching site for free using wordpress Oceanwp theme: 4 Minute video

allaboutbasic

If you are a Yoga instructor and trying to create your website, here is your solution. Here I have shown in a video (4minutes) how you can create your initial Yoga Teaching site for free and how u can set up the site.

You can see Demo here.

Here is the OceanWP Theme.

WordPress Tricks

Yoast breadcrumb add Product or any Text with links just after Home text

allaboutbasic
yoast breadcrumb add Product or any Text with links just after Home text

Please add the following code to your theme’s function.php

add_filter( 'wpseo_breadcrumb_links', 'yoast_seo_breadcrumb_add_link' );

function yoast_seo_breadcrumb_add_link( $links ) {
    global $post;

    
        $breadcrumb[] = array(
            'url' => site_url( '/products/' ),
            'text' => 'Products',
        );
 
        array_splice( $links, 1, 0, $breadcrumb );
     

    return $links;
}
Web Development

Click button and change image color using css only ( jQuery not needed)

allaboutbasic
Button Click and Image color will change using css only. No JQuery is needed.

Here is the code I am Sharing

CSS CODE

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  background-size: 225px 70px;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);   }

.red{ background: red; }

.red:checked{ background: linear-gradient(brown, red) }

.green{ background: green; }

.green:checked{ background: linear-gradient(green, lime);}

.red:checked ~ img,.red:checked ~ p img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img,.green:checked ~ p img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

HTML CODE

  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
 
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>

   
   <p><strong><a>sample1</a></strong><br><a id="sample1"><img src="https://i.stack.imgur.com/bd7VJ.png" alt="sample1" height="74" title="sample1" class="invert"></a></p>
   
  <p><strong><a>sample2</a></strong><br><a id="sample2"><img src="https://i.stack.imgur.com/bd7VJ.png" alt="sample1" height="74" title="sample2" class="invert"></a></p>
WordPress Tricks

Click on Link and Scroll to ID: Fix Overlapping issue of top fixed header

allaboutbasic

Sometimes you face issue where Top fixed header overlap the portion of the Target. To fix the issue you can use this jquery code. You need to have good understanding about how to use it. Or do a comments if you need help

You need to change the Parent Element ID or Class in the provided code

 jQuery('Parent Element ID or Class').on('click', 'a', function(e){
		   e.preventDefault();
		   e.stopImmediatePropagation();
	var id=	jQuery(this).attr('href');
		 console.log(id);
 jQuery('html,body').animate({scrollTop: jQuery(id).offset().top -180},'slow');
	   });
WordPress Tricks

Media display settings set “Link to” “Media File” or “None” by default

allaboutbasic

I am sharing you the code to do this

set Link To “Media File”

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_link_type', 'file' );
}

set Link To “None”

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_link_type', 'none' );
}
WordPress Tricks

How to Add a product search form in woocommerce Category page

allaboutbasic

Here I am sharing you the code to show a product search form in woocommerce category page. You need to put the code in functions.php page

adding product search form in woocommmerce product category page
add_action( 'woocommerce_before_shop_loop', 'my_woocommerce_before_shop_loop' );

function my_woocommerce_before_shop_loop() {
    if ( is_tax( 'product_cat' )   ) {?>

<div class="et_pb_row et_pb_row_0 et_pb_equal_columns et_pb_gutters3 productsearch">						
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
	<label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
	<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
	<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
	<input type="hidden" name="post_type" value="product" />
</form>						
						</div>
<?php
         
    }
}