Include CSS the right way in a WordPress’ child theme

We really should be using wp_enqueue_style functions to include your theme’s stylesheets rather than using @import statements. The enqueue functions allows us to specify dependencies in much better way.

//enqueue style for child theme
function  custom_child_enqueue_styles(){
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() . '/style.css' );
	// enqueue child styles - style.css
	wp_enqueue_style('parent-theme-child', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	// enqueue child styles - scss/child.css
	wp_enqueue_style('parent-theme-child-scss', get_stylesheet_directory_uri() .'/scss/child.css', array('parent-theme', 'parent-theme-child'));
}
add_action('wp_enqueue_scripts', 'custom_child_enqueue_styles');

CSS Trick – anchor position adjustment

HTML

<ul>
  <li><a href="#link1"</li>
  <li><a href="#link2"</li>
</ul>
<a name="link1" class="anchor"></a>
<p>Some content goes here.</p>
<a name="link2" class="anchor"></a>
<p>Some content goes here.</p>

CSS

.anchor {/*anchor link*/
	display: block; 
	position: relative; 
	top: -50px; 
	visibility: hidden;
}

WooCommerce 2.1.9 cheatsheet – single product page

How To Remove Related Products

Add the following code to your theme’s functions.php

//remove related products from single product page
remove_action ( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

Continue reading “WooCommerce 2.1.9 cheatsheet – single product page”

Bare-bone CSS horizontal navigation with dropdown

Let’s see if I can make this tutorial simply and easy. The tutorials out there are lengthy and cluttered with non-essential elements to make the example visually pleasing. I wanted to make mine BARE MINIMUM so that I can see what CSS property are actually make the structure.

Key elements for HTML code:

  • Top level menu’s UL tag – “top” class assigned
  • Second level menu’s UL tags -“sub” class assigned

Key Elements for CSS:

  • margin and padding reset – Browsers applies 16px to top- and bottom- margin, and 40px to left-padding. Let just get rid of those so you are not confused.
  • list-style – make the bullet go away. It just looks too broken when they are there (this is NOT a contrubuting CSS property to make the horizontal nav structure)
  • inline-block on ul.top > li – This HAs to be “inline-block”. Can’t be inline, can’t be block. Well, technicially it will work okay with just “inline” under Chrome browser, but messes them up with IE and FireFox.
  • relative on ul.top > li – again this HAS to be “relative”. Making this element “relative” forces the “absolute” position of the submenu origin point to be this element .
  • absolute on ul.sub – making it “absolute” will not interfere the flow of ul.top > li.

So this will get you started on building a horizontal navigation with drop down menu. Of course, this is just a starting point. You will need to decorate them, size them, position them, and add some behaviors to make it fully functional. But now you know which properties are being used to make the navigation structure.