-
How to hide WooCommerce category from the shop page
WooCommerce is a fantastic ecommerce plugin that lets you turn any WordPress website into an online shop. You can create multiple categories for your products, and all of these products, regardless of their category, are listed on the shop page (www.yoursite.com/shop/). Many shop owners want the ability to hide certain products from the shop page…
-
autoprefixer
I highly recommended running your CSS through this auto prefixer. https://autoprefixer.github.io/
-
Standard plugins for maintenance of wp site
These are the plugins I add to all new installations. Allows for easy secuity, seo, caching, custom post types and fields, and also ability to customise wp-admin menu. With managewp as well, I can maintain any site with automated backups too. WordFence Yoast SEO Hummingbird Custom Post Types UI ACF Admin Menu Editor
-
Microdata
Structured data within HTML. https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata http://schema.org/docs/gs.html
-
Toolset Types plugin alternative
Alternative to Toolset Types. Lightweight, easy to use. I recommend combining with ACF as replacement for Toolset Types. Custom Post Type UI
-
Flexbox vs Grid
I am undecided but currently use flexbox. https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf https://css-tricks.com/css-grid-replace-flexbox/ https://tutorialzine.com/2017/03/css-grid-vs-flexbox (features a great line “There is no reason to use only CSS grids or only flexbox. Learn both and use them together.”)
-
fixed header, resize on scroll
imo header should always be fixed if it is going to scroll with the screen, rather than changing to position:fixed; one you start to scroll, as you have to account for the gap it leaves (can cause the content to ‘jump’ up which looks awful). example. to clear a 100px header, I will add 100px…
-
100% height of screen minus height of header
Technique to get scrollable nav for menu which is 100 vertical-height minus the height of <header> nav { height:calc(100vh – 100px); /* where header is 100px */ } nav will likely be position:fixed; top:100px; right:0;
-
transform:translate();
css absolute positioning to center element #element { position:absolute; left:50%; top:50%; transition:translate(-50%, -50%); }
-
Flexbox
Flexbox eg for notepad. <ul id=”parent”> <li>content</li> <li>content</li> <li>content</li> <ul> #parent { display:-webkit-flex; display:flex; justify-content:space-between; align-items:center; align-content:space-between; flex-wrap:wrap; } flexbox guide