Archives: Snippets | Page 10

The following snippet is taken from WooCommerce documentation and does exactly what you think. Add this snippet to your functions.php file to add a new country to the WooCommerce countries list:

function woo_add_my_country( $country ) {
   $country["AE-DU"] = 'Dubai';
   return $country;
}
add_filter( 'woocommerce_countries', 'woo_add_my_country', 10, 1 );

If you look at the source of paginated pages on your blog, you will see they all share the same title tag. To avoid duplicate <title> tags, add the page number to the end of the tag. You can do this (assuming you use WordPress SEO by Yoast) by adding the following code to your functions.php file:

function change_yoast_title($title) {
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	if ( is_paged() ) {
		return $title . ' - Page ' . $paged;
	}
	else {
		return $title;
	}
}
add_filter('wpseo_title','change_yoast_title');

A short snippet I use often when I need to scroll to a specific element (by ID). Simply change ‘600’ to the speed you want the scroll to run (ms). You can also change the selector a[href*="#"] to whatever selector you choose.

$('a[href*="#"]').on('click', function (e) {
	e.preventDefault();

	$('html, body').animate({
		scrollTop: $($(this).attr('href')).offset().top
	}, 600, 'linear');
});

Nice, right? Check out the demo I created on Codepen. If you run into smooth scrolling issues or frontend scrolling performance problems, take a look at the link above.

Here is also a post on how to create on-scroll animations using the AOS library.

There are situations where you want to limit content editors from uploading images beyond a certain size. You can even be more specific and allow uploads of a specific pixel size. Add the following code to your functions.php file:

/* 
 * Check image resolution (px) before crunching
 */
function savvy_validate_image_size( $file ) {
    $image = getimagesize($file['tmp_name']);
    $minimum = array(
        'width' => '460',
        'height' => '460'
    );
    $maximum = array(
        'width' => '1280',
        'height' => '1280'
    );
    $image_width = $image[0];
    $image_height = $image[1];

    $too_small = "Image dimensions are too small. Minimum size is {$minimum['width']} by {$minimum['height']} pixels. Uploaded image is $image_width by $image_height pixels.";
    $too_large = "Image dimensions are too large. Maximum size is {$maximum['width']} by {$maximum['height']} pixels. Uploaded image is $image_width by $image_height pixels.";

    if ( $image_width < $minimum['width'] || $image_height < $minimum['height'] ) {
        $file['error'] = $too_small;
        return $file;
    }
    elseif ( $image_width > $maximum['width'] || $image_height > $maximum['height'] ) {
        $file['error'] = $too_large;
        return $file;
    }
    else
        return $file;
}
add_filter('wp_handle_upload_prefilter','savvy_validate_image_size');

You can change the minimum and maximum width and height (pixels) on lines 6-12. Take a look at the broader post on image sizes in WordPress.

WooCommerce has a built-in option to redirect all users to the cart page when they add a product. This option is under WooCommerce > Settings > Products > “Add to cart behaviour”.

But if you want to redirect visitors directly to the checkout page, add the following code to your active child theme (or theme) functions.php file:

function custom_add_to_cart_redirect( $url ) {
    $url = WC()->cart->get_checkout_url();
    return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' );

This code redirects users directly to the checkout page after adding a product to the WooCommerce cart. On the same topic, see the post Popup after adding to cart in WooCommerce.

For more on adding fields and modifying the WooCommerce checkout page, see WooCommerce checkout – how to change and add fields.

The following snippet lets you limit WordPress search to a specific Custom Post Type so results come only from that post type. Add to functions.php and set the post type(s) to search on line 4:

function SearchFilter($query) {
  if ($query->is_search) {
    // Insert the specific post type you want to search
    $query->set('post_type', 'feeds');
  }
  return $query;
}

add_filter('pre_get_posts','SearchFilter');

By default, WordPress does not allow all types of code in the WordPress content editor. For example, Inline SVGs contain many tags such as <def>, <rect>, etc. To allow Inline SVG, use the following code in functions.php:

function override_mce_options($initArray) {
    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

Note that this code allows any tag, whether SVG-related or not.

There are several situations where you may get an HTTP Error when trying to upload images to the WordPress media library:

• Problematic file name (special characters, etc.).
• File size exceeds what the server allows (upload_max_size).
• Insufficient PHP memory on the server.
• Insufficient storage space on the server.

HTTP error in WordPress media library.

Start by checking the file name and try reducing the file size. To increase memory, add the following code to the wp-config.php file in your site root:

define( 'WP_MEMORY_LIMIT', '256M' );

You can also do this via the .htaccess file, but if your hosting provider blocks this you may get a 500 Internal Server Error, so be careful and do not use this method if that is the case (simply remove the line).

php_value memory_limit 256M

If you have access to the php.ini file, you can do it with:

memory_limit = 256M

In some cases ModSecurity on the server can prevent you from uploading files. You can disable it via cPanel or try the following lines in .htaccess (disable if you get an error). Note that ModSecurity exists for good reason – securing your WordPress site:

<IfModule mod_security.c>SecFilterEngine Off 
SecFilterScanPOST Off 
</IfModule>

Here is a broader post on solving WordPress image upload issues.

The .gitignore file tells Git not to track certain files in the project. For WordPress, here is a recommended .gitignore file you can modify for your project. For more on the mu-plugins directory included in the file, see the linked guide.

# -----------------------------------------------------------------
# .gitignore for WordPress
# -----------------------------------------------------------------

# ignore everything in the root except the "wp-content" directory.
/*
!wp-content/

# ignore all files starting with .
.*

# track this file .gitignore (i.e. do NOT ignore it)
!.gitignore

# track .editorconfig file (i.e. do NOT ignore it)
!.editorconfig

# track readme.md in the root (i.e. do NOT ignore it)
!readme.md

# ignore all files that start with ~
~*

# ignore OS generated files
ehthumbs.db
Thumbs.db

# ignore Editor files
*.sublime-project
*.sublime-workspace
*.komodoproject

# ignore log files and databases
*.log
*.sql
*.sqlite

# ignore compiled files
*.com
*.class
*.dll
*.exe
*.o
*.so

# ignore packaged files
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip

# ignore everything in the "wp-content" directory, except:
# "mu-plugins" directory
# "plugins" directory
# "themes" directory
wp-content/*
!wp-content/mu-plugins/
!wp-content/plugins/
!wp-content/themes/

# ignore these plugins from the core
wp-content/plugins/hello.php
wp-content/plugins/akismet/

# ignore specific themes
wp-content/themes/twenty*/

# ignore node/grunt dependency directories
node_modules/