<?php
function site_inline_scripts() {
global $current_user;
$property_ga4 = "CONTAINER";
$staging = false;
if($_SERVER['HTTP_HOST']!="domain.com"){
$property_ga4 = "CONTAINER2";
$staging = true;
}
if ( !isset( $current_user->roles[0] ) || $current_user->roles[0] == 'customer' || $staging == true) {
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<?php echo $property_ga4; ?>');</script>
<!-- End Google Tag Manager -->
}
}
add_action('wp_footer', 'site_inline_scripts', 17);Convert date format from WordPress post values
<?php
echo date('F j, Y', strtotime($remote_post->date));Create Shortcode in WordPress
Create shortcode that can be used in posts or pages like this:
[newshortcode]Add to functions.php
<?php
function newshortcode_shortcode() {
if(is_admin()) return;
$post_title = get_the_title();
ob_start();
?>
<?php echo $post_title; ?>
<div>Some text</div>
<?php
$output = ob_get_contents();
ob_end_clean();
return $output;
}
add_shortcode('newshortcode', 'newshortcode_shortcode');
?>Add Code After the Body Tag in WordPress
WordPress 5.2 introduces a new function called wp_body_open(). This function triggers wp_body_open action and useful to place code after the opening of the body element.
add_action('wp_body_open', 'body_scripts');
function body_scripts() {
?>
<script>console.log('test here');</script>
<?php
}Adding inline script or style to WordPress in head element
In your theme’s functions.php:
function inline_scripts() {
?>
<script>console.log('test here');</script>
<?php
}
// Add hook for admin <head></head>
add_action( 'admin_head', 'inline_scripts' );
// Add hook for front-end <head></head>
add_action( 'wp_head', 'inline_scripts' );Create JavaScript Accordion
JavaScript:
const accordionSections = document.querySelectorAll(".accordion");
accordionSections.forEach((accordion) => {
accordion.onclick = function () {
this.classList.toggle("is-open");
let content = this.getElementsByClassName("accordion-content")[0];;
//console.log(content);
if (content.style.maxHeight) {
//this is if the accordion is open
content.style.maxHeight = null;
} else {
//if the accordion is currently closed
content.style.maxHeight = content.scrollHeight + "px";
//console.log(content.style.maxHeight);
}
};
});HTML
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons' media='all' />
<div class="accordion">
<div class="summary">Title 1</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eros ac leo ultricies interdum sit amet et nunc.</div> </div>
<div class="accordion">
<div class="summary">Title 2</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eros ac leo ultricies interdum sit amet et nunc.</div> </div>
<div class="accordion">
<div class="summary">Title 3</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eros ac leo ultricies interdum sit amet et nunc.</div> </div>CSS:
.accordion {
cursor: pointer;
position: relative;
}
.accordion:before {
font-family: "Material Icons";
content: "\e5e1";
display: inline-block;
position: absolute;
top: 22px;
}
.accordion .summary {
padding-left: 24px;
}
.accordion.is-open:before {
transform: rotate(90deg);
}
.accordion:hover,
.accordion.is-open {
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}Animate elements if visible in viewport (page scroll)
Using IntersectionObserver API
The IntersectionObserver API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.
Here’s an example that triggers a function when an Element is in viewport:
const inViewport = (entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting && entry.target.id=="php"){
php.setValueAnimated(9, 3);
}
});
};
const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('.gauge-container');
ELs_inViewport.forEach(EL => {
Obs.observe(EL, obsOptions);
});Here’s an example that triggers a classList toggle when an Element is in viewport:
const inViewport = (entries, observer) => {
entries.forEach(entry => {
entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
});
};
const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('[data-inviewport]');
ELs_inViewport.forEach(EL => {
Obs.observe(EL, obsOptions);
});[data-inviewport] { /* THIS DEMO ONLY */
width:100px; height:100px; background:#0bf; margin: 150vh 0;
}
/* inViewport */
[data-inviewport="scale-in"] {
transition: 2s;
transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport {
transform: scale(1);
}
[data-inviewport="fade-rotate"] {
transition: 2s;
opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport {
transform: rotate(180deg);
opacity: 1;
}Scroll down...
<div data-inviewport="scale-in"></div>
<div data-inviewport="fade-rotate"></div>Bootstrap Breakpoints
Bootstrap v5.0
Min-width
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
// Source mixins
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Max-width
We occasionally use media queries that go in the other direction (the given screen size or smaller):Copy
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. For example:Copy
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
Spacing before column
To add spacing between columns, instead of making an empty bootstrap column you can use offset.
The below will show 3 columns offset to the left of the 6 column with text.
<div class="col-sm-6 col-sm-offset-3">I am text</div>Float right
To float elements right use:
<div class="float-end">Float end on all viewport sizes</div>