Code Snippets

Useful HTML, Javascript / Jquery and PHP code snippets which I’ve found most useful and needed to be shared. These code snippets are excellent resources.

Ugly Form Fields on Mobile, particularly Select Field and Submit Buttons

Are you experiencing ugly form fields on the mobile devices which look nothing like the very cool and awesome fields which you built for the desktop version? That could be because its using the browser’s default css for the input and select fields and buttons. I’ve experienced this on my iphone but it could happen with other mobile operating systems and browsers also. This bit of code will eliminate that

Display Product Categories with Thumbnail Image

Use shortcode: [show-product-categories-with-image] Add the following to your functions.php file. function showProductCat() { $cat_args = array( ‘orderby’ => ‘name’, ‘order’ => ‘asc’, ‘hide_empty’ => true, ); $product_categories = get_terms( ‘product_cat’, $cat_args ); $result = “<div class=’product-categories-with-image’>”; if( !empty($product_categories) ){ foreach ($product_categories as $key => $category) { $thumb_id = get_woocommerce_term_meta( $category->term_id, ‘thumbnail_id’, true ); $term_img = wp_get_attachment_image_src( $thumb_id, ‘thumbnail’, true ); $cat_img = “”; if ($term_img[3]) { $cat_img = “<img src=’”.

Redirect for a Specific Page on WordPress

Here’s a snippet of code to redirect users who land on a specific page of your wordpress site. You will need the page id. Add it to your functions.php file. The code below redirect users to my site. 🙂 function redirect_to_another_page() { $page_id_to_redirect = 119; //enter page id here $destination = ‘http://yahoo.com’; //enter destination url here if ( is_page($page_id_to_redirect) ) { wp_redirect( $destination, 301 ); exit; } } add_action( ‘template_redirect’,

Deactive a Sidebar or Widgetized Area

Here’s how to deactive a Sidebar or Widgetized Area in WordPress so it won’t show on the website and neither will it show on the Widgets section of the wordpress backend. First, get the name of the sidebar, you may need to check the theme functions file to get exactly it is. In this case, we will assume that the sidebar name is ‘sidebar-1’. Add the code below to your

Embed a Visual Composer page with CSS Styles

Here’s how to embed a page created with Visual Composer onto another page with the page CSS styles included. You can add this code to either the header or footer file of your theme, or another theme file for that matter. First step: note the id of the page to be embedded. Use this snippet and put the id into the first line of code as indicated below. <?php $id

Install a new font .otf file using css

First step: upload the .otf to the server so its accessible by the css file. Add this bit of code to the top of your css file to activate a new font using its .otf file. In this case, the .otf file was placed in the fonts folder on the same level as the css file. @font-face { font-family: ‘Arial’; src: url(‘./Arial.eot’); src: local(‘Arial’), url(‘./Arial.woff’) format(‘woff’), url(‘./Arial.ttf’) format(‘truetype’); } Here’s

Load / Enqueue the latest version of css and javascript files

Add the following code to your functions.php file to load / enqueue the most recent child theme style.css file or any css/javascript file. $cache_buster = date(“YmdHi”); function my_custom_files() { wp_register_style( ‘childstyle’, get_stylesheet_directory_uri() . ‘/style.css’, $cache_buster, ‘all’ ); wp_enqueue_script( ‘my-scripts’, get_stylesheet_directory_uri() . ‘/scripts.js’, array(), $cache_buster, true ); wp_enqueue_style( ‘childstyle’ ); } add_action( ‘wp_enqueue_scripts’, ‘my_custom_files’, 11);

Smooth Transitions

Add this bit of code to ensure smooth transitions of elements: * { -webkit-transition: all 700ms; transition: all 700ms; } This will apply to all elements and for all types of transitions; whether its related to the element’s height, width, positioning or font size. It is especially useful for mobile responsive when the element size has to be made smaller to fit the device. By using this smooth transition, the

Get Contents from Visual Composer Page and Load into Another with CSS Styling

<?php $id = 200; //page id $shortcodes_custom_css = get_post_meta( $id, ‘_wpb_shortcodes_custom_css’, true ); if ( ! empty( $shortcodes_custom_css ) ) { echo ‘<style type=”text/css” data-type=”vc_shortcodes-custom-css-‘.$id.’”>’; echo $shortcodes_custom_css; echo ‘</style>’; } $post = get_post($id); echo apply_filters(‘the_content’, $post->post_content); ?>

Stop Product Image from Opening in New Window

You’ve got your woocommerce site up and running but there’s this really annoying thing happening when users click on the product image. The image opens in the same window, navigating away from the product page. Here’s a quick fix using jquery. If you’re not familiar with child themes, download the Custom CSS/JS plugin and drop this into a javascript file! jQuery(document).ready(function( $ ){ if ( $(“.woocommerce-product-gallery__image”).length ) {    //make sure