WordPress Tricks

Show custom dropdown based on visited url in woocommerce category page

Suppose in some specific url ( mainly your product category page url) you want to show some specific or customize dropdown. Here I am sharing you such code which you can use by customizing it.

add_action( 'woocommerce_before_shop_loop', 'showcustomdropdown', 31 );
 
function showcustomdropdown() {      
   if ( is_product_category() ) {      
     // wc_product_dropdown_categories();
	$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];


if ((strpos($url,'?product_cat=wall-mounted+single-zone') !== false) || strpos($url,'?product_cat=floor-mounted+single-zone') !== false || strpos($url,'?product_cat=ceilling-cassettes+single-zone') !== false || strpos($url,'?product_cat=concealed-duct+single-zone') !== false || strpos($url,'/mini-split-ac/single-zone/') !== false)  {
	echo "<select id='product_cat'>";
	echo '<option value=" ">'."Select Category"."</option>"; 
   echo '<option value="?product_cat=wall-mounted+single-zone">'. "Wall Mounted" .  '</option>';
	echo '<option value="?product_cat=floor-mounted+single-zone">'."Floor Mounted"  .  '</option>';
	echo '<option value="?product_cat=ceilling-cassettes+single-zone">'. "Ceilling Cassettes" .  '</option>';
	echo '<option value="?product_cat=concealed-duct+single-zone">'. "Concealed Duct" .  '</option>';
	echo "</select>";
} else {
    
}
	   
   } 
   wc_enqueue_js( "
      $('#product_cat').change(function () {
         location.href = '/shop/' + $(this).val();
      });
   " );
}
Web Development

Remove Links and keep text in table or Div : Use it either for mobile or desktop

Suppose you have a table and you have information with links there. So in Desktop view you want to keep those information with links, but in mobile view you just want the information to show without wrapping links. Here is the JQuery code which i used to implement that. Basically i collected the code from stackoverflow and modified as per my requirements.

Here is the code

 <script>
$(document).ready(function() {
	  	 
	
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		console.log(" mobile ");
  $('table tr td,table tr td').each(function(){
  
    if($(this).hasClass("nolink")){ 
    $(this).find("a").contents().unwrap();
    }
    });
}
});
 </script>
WordPress Tricks

WordPress theme Zoologist by Automattic: CSS Customization of header, footer, contents and more

Zoologist by Automattic
Image Courtesy WordPress.com

Zoologist  by Automattic is a simple single column theme. If you are searching for a single column layout theme with basic design then this theme can be a good choice for you. Here I am going to share you CSS tricks to modify header, footer, fonts style and more.

Live Demo of Zoologist by Automattic

If you want to install it in your self hosted wordpress site, you can download them from WordPress.com repository.

Download Zoologist Parent theme Blockbase

Download Zoologist Child theme

Also You need to Install Gutenberg Plugins by Gutenberg Team

So, Here I am sharing you the css tricks which you can use to change the style of the theme.

Continue reading “WordPress theme Zoologist by Automattic: CSS Customization of header, footer, contents and more”
WordPress Tricks

Custom Post Type archive template with pagination and Advance Custom Field value

Here I am sharing you a basic template to show Custom Post Type posts with pagination and also the values from Advance Custom Field plugins.

If you face any issue to implement it, feel free to do comments in the comments section.

<?php
/**
* Template Name: Custom Post Archive
*
* @package WordPress
 */
 get_header(); 
?>
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(  
        'post_type' => 'herb_study',
        'post_status' => 'publish',
        'posts_per_page' =>3, 
         'paged' => $paged
       
    );

    $loop = new WP_Query( $args ); 
        
    while ( $loop->have_posts() ) : $loop->the_post(); 
?>

 
 
<?php 
if(get_field('Image',get_the_ID())){?>
<img src="<?php   echo get_field('Image',get_the_ID());?>"/>
<?php } ?>
 
 
 
 <?php endwhile;
 ?>


<span class="pagination"> 
 <?php
 echo paginate_links( array(
                   'total' => $loop->max_num_pages
               ) );
 
     ?>
</span>		
		 
        <?php  
   
    wp_reset_postdata();
?>

<?php get_footer(); ?>
WordPress Tricks

Solution of Fatal error: Uncaught Error: Call to undefined function gutenberg_block_template_part() in \wp-content\themes\blockbase-wpcom\header.php:16

So I tried to test the Zoologist theme by Automattic which is using Blockbase parent theme. But while trying to install, I found the theme showing this Fatal Error

Fatal Error Blockbase parent theme by Automattic

Solution

Please Install Gutenberg plugins by Gutenberg team . Click Here To Install Gutenberg Plugins and the issue will be solved

Gutenberg by Gutenberg Team
Web Development

Identify If you are not at the top of a webpage while it loads or refresh and add class to a Div or HTML Elements using jQuery

Suppose you are visiting a page and you scrolled to a portion of that page, now if you refresh or reload the page, you need to check you are not at the top of the website
and add a class to a HTML Elements. So This jQuery code will help you achieve this.

	<script>
	jQuery(document).ready(function(){
		 
 
    var windowpos = jQuery(window).scrollTop();
	console.log(windowpos);
      
      if(windowpos>100){
        jQuery('CLASS OR ID OF HTML ELEMENTS').addClass('CLASS YOU WANT TO ADD');
      }
 }); 	
 </script>
WordPress Tricks

If slug or portion of URL matched then redirect it to different URL using htaccess file.

Basically this is a solution of broken link in wordpress. As broken link cause issues in SEO, so you may need to redirect a bulk amount of urls to different url. So here I am sharing you a solution which basically I found working.

Client wanted to redirect all urls ( which was showing 404 error ) containing specific slug ( like category/success-story/) to be redirected to a different URL. Here is the code i used and put it in htaccess file of wordpress root folder.

<IfModule>
RewriteEngine on
RewriteRule ^(.*)url-slug/url-childslug(.*)$ https://www.your-site-url/page/about [L,R=301]
</IfModule>

Just replace the slugs and url as per your requirement.

WordPress Tricks

WordPress Blog Post Search Form Code: Only Post Search and Exclude pages and others

If you need to put a search form to show blog post based on the search term, you can use the code I shared. Generally normal search form may show you result from pages and other custom post type. But here I used the form which is used to show only blog posts.

wordpress blog post search form
Continue reading “WordPress Blog Post Search Form Code: Only Post Search and Exclude pages and others”
WordPress Tricks

Accepting Tips or Donations in your site: Buy Us or Buy me a coffee

Those who are creators, artists, teachers, service providers and have websites, they can use this Tip Jar WP plugins to accept tips or donations etc. Actually I found one of my client using this plugins and i helped her configuring it and did some css changes to make it fit by changing the width and font size. If you are using you can ask question in the comments section.

Continue reading “Accepting Tips or Donations in your site: Buy Us or Buy me a coffee”
WordPress Tricks

Sobe: WordPress lighthearted personal blogging theme by Automattic, Modifications or customizations with css.

Theme Sobe is a lighthearted personal blogging theme by Automattic for sharing life’s most memorable moments. You can see the Demo of theme Sobe. If you want to use it in your personal blogging site, you can download Theme Sobe from WordPress.com theme repository, or from here.

theme sobe wordpress modifications using css

Here, I will share with you some css customizations which you can use to modify the header font size, color, contents etc. If you have any questions feel free to ask in the comments section.

Continue reading “Sobe: WordPress lighthearted personal blogging theme by Automattic, Modifications or customizations with css.”