Razworks Food Blog

Razworks Food Blog

Wordpress

iOS specific CSS

by

To target iOS specific devices:

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

It works because only Safari Mobile implements -webkit-overflow-scrolling: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

I used this because a WordPress Genesis responsive menu had some icon alignment discrepancies on iPhone only.
Here is the example in a media Query:

/*** IOS mobile icon adjustments ***/
	@supports (-webkit-overflow-scrolling: touch) {
		/* CSS specific to iOS devices */ 
		.genesis-nav-menu.responsive-menu .menu-item-has-children li {
			position: relative;	
		}
		.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
			margin-right: 0;
		}
		
		.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
			content: "\f347";
			position:absolute;
			left:80%;
			float: none;
			font: normal 16px/1 'dashicons';
			height: 16px;
			padding: 15px 20px;
			right: 0;
			text-align: right;
			z-index: 9999;
			color:#fff;
		}
		
		.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
			content: "\f343";
		}
		.genesis-nav-menu.responsive-menu li a {
			font-size:30px;
			font-size:3.0rem;
		}

	  }

 

CSS Clearfix with Pseudo Selector

by

Opposed to adding an “Empty Div” or  “Overflow” to clear floats, you can use the CSS pseudo selector (:after) to clear floats.

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

 

Woocommerce Logged in Only

by

Restrict Woocommerce pages to logged in usesrs only:

/****************** Logged in Only *************************/
function woo_loggedin_redirect() {
 if (
 ! is_user_logged_in()
 && (is_woocommerce() || is_cart() || is_checkout())
 ) {
 // feel free to customize the following line to suit your needs
 wp_redirect(home_url());
 exit;
 }
}
add_action('woo-loggedin_redirect', 'woo_loggedin_redirect');

 

Add robots meta tag to specific page

by

This method is for the Genesis framework, applied in the functions.php file

// Add Robots Meta
add_action( 'genesis_meta', 'raz_robots_meta_tag' );
function raz_robots_meta_tag() {
   if ( is_page('page title')) {  
       echo '<meta name="robots" content="noindex,nofollow">';
   }
}

 

Woocommerce Widget Featured Product by Category

by

In Woocommerce > Includes > Widgets > class-wc-widget-products.php

Add at line 70:
‘in_cat’ => array(
‘type’ => ‘text’,
‘std’ => __( ‘Category Number’, ‘woocommerce’ ),
‘label’ => __( ‘In Category’, ‘woocommerce’ )
),

Add at line 101:
$cat = ! empty( $instance[‘in_cat’] ) ? sanitize_title( $instance[‘in_cat’] ) : $this->settings[‘in_cat’][‘std’];

Add at line 114:
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘term_id’,
‘terms’ => $cat,
),