Aaron EmSixTeen

Efficient font stack with Sass

The strength of Sass is the mixins and functions. Being able to automate many of the repetitive coding for CSS is both amazing in building and maintaining a clean and efficient code. I often find many developers creating complex systems for simple tasks, such as managing a font stack. This can be tedious to set up and employ. In this article, I will explain how I automate this system.

The font stack is one of those problems which are often solved by simple variables. In this instance, it makes a lot of sense and is easy enough to work with. But when you work with our (beloved) designers from Dogstudio, you can be sure of having to use lot of font variants. It quickly happens that I do not remember all the properties of each variants. And when I say "use lot of font variants", I mean at least 15 in most cases.

Sass maps to the rescue

Instead of simply define variables, I will ceate a font stack map and a mixin to use the map easily.

Adding @k1sul1's suggestion from the comments as it's more concise than what I had before:

I just wanted them all gone, so I ran this in the MySQL shell.

UPDATE wp_posts SET post_content = REGEXP_REPLACE(post_content, "\\[\/?vc(.*?)\]", "");

Note the double backslash. If you forget it, you'll replace all v's and c's with nothing, and the shortcodes will still be there. This works for other shortcode as well, just replace vc.

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

	<?php if (!defined('ABSPATH')) die('Restricted Area');


	/*
	* Plugin Name: Disable Yoast SEO Notifications
	* Description: Hide annoying notifications after each upgrade of Yoast SEO plugin and others admin notices.
	* Version: 1.1
	* Author: Aurélien Denis
	* Author URI: https://wpchannel.com/
	*/

	<?php

	add_action('admin_init', function () {
	// Redirect any user trying to access comments page
	global $pagenow;

	if ($pagenow === 'edit-comments.php') {
	wp_redirect(admin_url());
	exit;
	}

	1. Copy/Paste the information below to the clipboard
	2. Open the spreadsheet whose sheets need to be alphabetised
	3. Choose Tools > Script editor > Blank (this opens a new tab in the browser)
	4. Press Control+A followed by Control+V copy and paste the script in
	5. Press Control+S to save the script
	6. Choose Run > sortSheets
	7. Go back to the spreadsheet tab to view the new sorted tab order

	--Copy everything below this line--
	function sortSheets () {

	<?php
	if( have_rows('social_media', 'option') ):
	echo '<div class="container social my-4">';
	echo '<p class="follow mb-0 align-middle">Follow us</p>';
	echo '<ul class="nav align-middle">';
	while ( have_rows('social_media', 'option') ) : the_row();
	$socialchannel = get_sub_field('social_channel', 'option');
	$socialurl = get_sub_field('social_url', 'option');
	echo '<li class="nav-item">';
	echo '<a class="nav-link" rel="nofollow noopener noreferrer" href="' . $socialurl . '" target="_blank">';

	<?php if ( get_field( 'field_name' ) ): ?>

	This is displayed when the field_name is TRUE or has a value.

	<?php else: // field_name returned false ?>

	This is displayed when the field is FALSE, NULL or the field does not exist.

	<?php endif; // end of if field_name logic ?>

	<?php
	/* Function to show images whether SVG or non SVG */
	/* $size & $attribute both can hold array if you want */
	function show_image( $image_id, $size = null, $attributes = null ) {
	//first lets get the file info sto understand what kind of file it is
	//as for svg file we will take different approach
	$file_info = pathinfo( wp_get_attachment_url( $image_id ) );

	//so, if the file type is SVG
	if ( $file_info['extension'] === 'svg' ) {

	<?php
	// add the below to your functions file
	// then visit the page that you want to see
	// the enqueued scripts and stylesheets for

	function se_inspect_styles() {
	global $wp_styles;
	echo "<h2>Enqueued CSS Stylesheets</h2><ul>";
	foreach( $wp_styles->queue as $handle ) :
	echo "<li>" . $handle . "</li>";